[Frontend] WIP overlay expansion

Fixes #1437 WIP on expansion animation, not working properly yet
[Frontend] WIP Style Guide
2025-06-25 02:29:24 +00:00 · 2017-02-16 16:12:42 -08:00 · 2017-02-16 15:20:50 -08:00 · 2017-02-15 18:38:39 -08:00 · 2017-02-15 14:45:47 -08:00 · 2017-02-14 17:30:24 -08:00
18 changed files with 409 additions and 212 deletions
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar ">
+    <div class="holder flex-elem l-flex-row object-browse-bar">
        <div class="items-select left flex-elem l-flex-row grows">
            <mct-representation key="'back-arrow'"
                                mct-object="domainObject"
@ -31,16 +31,18 @@
            </mct-representation>
        </div>
        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation key="'switcher'"
-                                mct-object="domainObject"
-                                ng-model="representation">
-            </mct-representation>
-            <!-- Temporarily, on mobile, the action buttons are hidden-->
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }"
-                                class="mobile-hide">
-            </mct-representation>
+            <span class="l-object-action-buttons">
+                <mct-representation key="'switcher'"
+                                    mct-object="domainObject"
+                                    ng-model="representation">
+                </mct-representation>
+                <!-- Temporarily, on mobile, the action buttons are hidden-->
+                <mct-representation key="'action-group'"
+                                    mct-object="domainObject"
+                                    parameters="{ category: 'view-control' }"
+                                    class="mobile-hide l-object-action-buttons">
+                </mct-representation>
+            </span>
        </div>
    </div>
    <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@ -28,4 +28,8 @@
        key="'menu-arrow'"
        mct-object='domainObject'
        class="flex-elem context-available-w"></mct-representation>
-</span>
+</span>
+<a class="s-button icon-expand t-btn-view-large"
+   title="View large"
+   mct-trigger-modal>
+</a>
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay" ng-class="{'delayEntry100ms' : ngModel.delay}">
+<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
    <div class="abs blocker"></div>
    <div class="abs holder">
        <a ng-click="ngModel.cancel()"
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
@ -1,8 +1,8 @@
 {
  "metadata": {
    "name": "openmct-symbols-16px",
-    "lastOpened": 1481575258437,
-    "created": 1481575255265
+    "lastOpened": 1487197651675,
+    "created": 1487194069058
  },
  "iconSets": [
    {
@ -540,13 +540,21 @@
          "code": 921654,
          "tempChar": ""
        },
+        {
+          "order": 120,
+          "id": 105,
+          "name": "icon-reset",
+          "prevSize": 24,
+          "code": 921655,
+          "tempChar": ""
+        },
        {
          "order": 121,
          "id": 103,
          "name": "icon-x-in-circle",
          "prevSize": 24,
          "code": 921656,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 118,
@ -554,7 +562,7 @@
          "name": "icon-brightness",
          "prevSize": 24,
          "code": 921657,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 119,
@ -562,15 +570,15 @@
          "name": "icon-contrast",
          "prevSize": 24,
          "code": 921664,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
-          "order": 120,
-          "id": 105,
-          "name": "icon-reset",
+          "order": 122,
+          "id": 106,
+          "name": "icon-expand",
          "prevSize": 24,
-          "code": 921655,
-          "tempChar": ""
+          "code": 921665,
+          "tempChar": ""
        },
        {
          "order": 37,
@ -578,7 +586,7 @@
          "name": "icon-activity",
          "id": 32,
          "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 36,
@ -586,7 +594,7 @@
          "name": "icon-activity-mode",
          "id": 31,
          "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 52,
@ -594,7 +602,7 @@
          "name": "icon-autoflow-tabular",
          "id": 47,
          "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 55,
@ -602,7 +610,7 @@
          "name": "icon-clock",
          "id": 50,
          "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 58,
@ -610,7 +618,7 @@
          "name": "icon-database",
          "id": 53,
          "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 57,
@ -618,7 +626,7 @@
          "name": "icon-database-query",
          "id": 52,
          "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 17,
@ -626,7 +634,7 @@
          "name": "icon-dataset",
          "id": 12,
          "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 22,
@ -634,7 +642,7 @@
          "name": "icon-datatable",
          "id": 17,
          "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 59,
@ -642,7 +650,7 @@
          "name": "icon-dictionary",
          "id": 54,
          "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 62,
@ -650,7 +658,7 @@
          "name": "icon-folder",
          "id": 57,
          "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 66,
@ -658,7 +666,7 @@
          "name": "icon-image",
          "id": 61,
          "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 68,
@ -666,7 +674,7 @@
          "name": "icon-layout",
          "id": 63,
          "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 77,
@ -674,7 +682,7 @@
          "name": "icon-object",
          "id": 72,
          "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 78,
@ -682,7 +690,7 @@
          "name": "icon-object-unknown",
          "id": 73,
          "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 79,
@ -690,7 +698,7 @@
          "name": "icon-packet",
          "id": 74,
          "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 80,
@ -698,7 +706,7 @@
          "name": "icon-page",
          "id": 75,
          "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 114,
@ -706,7 +714,7 @@
          "name": "icon-plot-overlay",
          "prevSize": 24,
          "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 113,
@ -714,7 +722,7 @@
          "name": "icon-plot-stacked",
          "prevSize": 24,
          "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 10,
@ -722,7 +730,7 @@
          "name": "icon-session",
          "id": 5,
          "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 24,
@ -730,7 +738,7 @@
          "name": "icon-tabular",
          "id": 19,
          "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 7,
@ -738,7 +746,7 @@
          "name": "icon-tabular-lad",
          "id": 2,
          "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 6,
@ -746,7 +754,7 @@
          "name": "icon-tabular-lad-set",
          "id": 1,
          "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 8,
@ -754,7 +762,7 @@
          "name": "icon-tabular-realtime",
          "id": 3,
          "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 23,
@ -762,7 +770,7 @@
          "name": "icon-tabular-scrolling",
          "id": 18,
          "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 112,
@ -770,7 +778,7 @@
          "name": "icon-telemetry",
          "id": 86,
          "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 90,
@ -778,7 +786,7 @@
          "name": "icon-telemetry-panel",
          "id": 85,
          "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 93,
@ -786,7 +794,7 @@
          "name": "icon-timeline",
          "id": 88,
          "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 116,
@ -794,7 +802,7 @@
          "name": "icon-timer-v1.5",
          "prevSize": 24,
          "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 11,
@ -802,7 +810,7 @@
          "name": "icon-topic",
          "id": 6,
          "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 115,
@ -810,7 +818,7 @@
          "name": "icon-box-with-dashed-lines",
          "id": 29,
          "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
        }
      ],
      "metadata": {
@ -2183,6 +2191,30 @@
            ]
          }
        },
+        {
+          "id": 104,
+          "paths": [
+            "M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
+          ],
+          "attrs": [
+            {
+              "fill": "rgb(0, 161, 75)"
+            }
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-reset"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {
+                "f": 1
+              }
+            ]
+          }
+        },
        {
          "paths": [
            "M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM832 704l-128 128-192-192-192 192-128-128 192-192-192-192 128-128 192 192 192-192 128 128-192 192 192 192z"
@ -2303,26 +2335,31 @@
          }
        },
        {
-          "id": 104,
+          "id": 106,
          "paths": [
-            "M460.8 460.8l-187.8-187.8c57.2-42.8 128-68.2 204.8-68.2 188.2 0 341.6 153.2 341.6 341.4s-153.2 341.2-341.4 341.2c-165 0-302.8-117.6-334.6-273h-138.4c14.2 101.8 61 195.6 135 269.6 90.2 90.2 210.4 140 338 140s247.6-49.8 338-140 140-210.4 140-338-49.8-247.6-140-338-210.4-140-338-140c-111.4 0-217 38-302 107.6l-176-175.6v460.8h460.8z"
+            "M960 0c0 0 0 0 0 0h-320v128h165.4l-210.6 210.8c-25 25-25 65.6 0 90.6 12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8l210.8-210.8v165.4h128v-384h-64z",
+            "M896 805.4l-210.8-210.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l210.8 210.6h-165.4v128h384v-384h-128v165.4z",
+            "M218.6 128h165.4v-128h-320c0 0 0 0 0 0h-64v384h128v-165.4l210.8 210.8c12.4 12.4 28.8 18.8 45.2 18.8s32.8-6.2 45.2-18.8c25-25 25-65.6 0-90.6l-210.6-210.8z",
+            "M338.8 594.8l-210.8 210.6v-165.4h-128v384h384v-128h-165.4l210.8-210.8c25-25 25-65.6 0-90.6-25.2-24.8-65.6-24.8-90.6 0.2z"
          ],
          "attrs": [
-            {
-              "fill": "rgb(0, 161, 75)"
-            }
+            {},
+            {},
+            {},
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-expand"
          ],
          "isMulticolor": false,
          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-reset"
-          ],
          "colorPermutations": {
            "1161751207457516161751": [
-              {
-                "f": 1
-              }
+              {},
+              {},
+              {},
+              {}
            ]
          }
        },
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@ -77,6 +77,7 @@
 <glyph unicode="&#xe1038;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
+<glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@ -66,7 +66,7 @@ body, html {
    color: $colorBodyFg;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
-    font-weight: 200;
+    font-weight: normal;
    height: 100%;
    width: 100%;
 }
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@ -73,10 +73,11 @@ $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
 $glyph-icon-resync: '\e1036';
+$glyph-icon-reset: '\e1037';
 $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
-$glyph-icon-reset: '\e1037';
+$glyph-icon-expand: '\e1041';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@ -175,11 +176,12 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
 .icon-thumbs-strip {  @include glyph($glyph-icon-thumbs-strip); }
 .icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
 .icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
+.icon-resync {  @include glyph($glyph-icon-resync); }
+.icon-reset {  @include glyph($glyph-icon-reset); }
 .icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
 .icon-brightness {  @include glyph($glyph-icon-brightness); }
 .icon-contrast {  @include glyph($glyph-icon-contrast); }
-.icon-reset {  @include glyph($glyph-icon-reset); }
-.icon-resync {  @include glyph($glyph-icon-resync); }
+.icon-expand {  @include glyph($glyph-icon-expand); }
 .icon-activity {  @include glyph($glyph-icon-activity); }
 .icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@ -631,7 +631,8 @@ textarea {
    }
 }

-.view-switcher {
+.view-switcher,
+.t-btn-view-large {
    @include trans-prop-nice-fade($controlFadeMs);
 }

--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@ -249,7 +249,7 @@
 .context-menu-holder,
 .menu-holder {
 	position: absolute;
-	z-index: 70;
+	z-index: 120;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
@ -273,7 +273,7 @@

 .btn-bar.right .menu,
 .menus-to-left .menu {
-        z-index: 79;
+    z-index: 79;
 	left: auto;
 	right: 0;
 	width: auto;
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@ -21,11 +21,16 @@
 *****************************************************************************/

 .overlay {
-    font-size: 90%;
    &.delayEntry100ms {
        @include keyframes(fadeInFromNone) {
-            0% { display: none; opacity: 0; }
-            100% { display: block; opacity: 1; }
+            0% {
+                display: none;
+                opacity: 0;
+            }
+            100% {
+                display: block;
+                opacity: 1;
+            }
        }
        @include animation-delay($delayEntryMs);
        @include animation(fadeInFromNone $durEntryMs ease-in);
@ -43,17 +48,13 @@
        left: auto;
        z-index: 100;
    }
+
    > .holder {
-        @include containerSubtle($colorOvrBg, $colorOvrFg);
-        border-radius: $basicCr * 3;
-        color: $colorOvrFg;
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        @include transform(translateX(-50%) translateY(-50%));
-        height: 70%;
-        width: 50%;
        min-height: 300px;
        min-width: 600px;
        z-index: 101;
@ -65,72 +66,106 @@
            left: $m;
        }
    }
-    .title {
-        @include ellipsize();
-        font-size: 1.2em;
-        line-height: 120%;
-        margin-bottom: $interiorMargin;
-    }
+}

-    .hint, .field-hints { color: $colorFieldHintOverlay !important;  }
-
-    .abs.top-bar {
-        height: $ovrTopBarH;
-    }
-
-    .abs.editor,
-    .abs.message-body {
-        top: $ovrTopBarH + $interiorMarginLg;
-        bottom: $ovrFooterH + $interiorMarginLg;
-        left: 0;
-        right: 0;
-        overflow: auto;
-        .field.l-input-med {
-            input[type='text'] {
-                width: 100%;
-            }
-        }
-    }
-
-    .bottom-bar {
-        text-align: right;
+.overlay {
+    &.l-dialog {
        .s-button {
-            $bg: $colorOvrBtnBg;
            &:not(.major) {
-                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
-            }
-            font-size: 95%;
-            height: $ovrFooterH;
-            line-height: $ovrFooterH;
-            margin-left: $interiorMargin;
-            padding: 0 $interiorMargin * 3;
-            &:first-child {
-                margin-left: 0;
+                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
            }
        }

+        > .holder {
+            @include containerSubtle($colorOvrBg, $colorOvrFg);
+            border-radius: $basicCr * 2;
+            //color: $colorOvrFg;
+            height: 70%;
+            width: 50%;
+        }
+
+        .title {
+            @include ellipsize();
+            font-size: 1.2em;
+            line-height: 120%;
+            margin-bottom: $interiorMargin;
+        }
+
+        .hint, .field-hints {
+            color: $colorFieldHintOverlay !important;
+        }
+
+        .abs.top-bar {
+            height: $ovrTopBarH;
+        }
+
+        .abs.bottom-bar {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow: visible;
+            height: $ovrFooterH;
+        }
+
+        .abs.editor,
+        .abs.message-body {
+            top: $ovrTopBarH + $interiorMarginLg;
+            bottom: $ovrFooterH + $interiorMarginLg;
+            left: 0;
+            right: 0;
+            overflow: auto;
+            .field.l-input-med {
+                input[type='text'] {
+                    width: 100%;
+                }
+            }
+        }
+
+        .bottom-bar {
+            text-align: right;
+            .s-button {
+                font-size: 95%;
+                height: $ovrFooterH;
+                line-height: $ovrFooterH;
+                margin-left: $interiorMargin;
+                padding: 0 $interiorMargin * 3;
+                &:first-child {
+                    margin-left: 0;
+                }
+            }
+        }
+
+        .l-progress-bar {
+            $h: $progressBarHOverlay;
+            display: block;
+            height: $h;
+            line-height: $h;
+            margin: .5em 0;
+            width: 100%;
+        }
+
+        .select {
+            box-shadow: $shdwBtnsOverlay;
+        }
    }

-    .abs.bottom-bar {
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow: visible;
-        height: $ovrFooterH;
-    }
+    &.l-large-view {
+        > .holder {
+            @include keyframes(overlayIn) {
+                from { opacity: 0; width: 1%; height: 1%; }
+                to { opacity: 1; width: 90%; height: 90%; }
+            }
+            @include animToParams(overlayIn, $dur: 1s, $delay: 0);
+            background: $colorBodyBg;
+            border-radius: $basicCr * 2;
+            //height: 90%;
+            //width: 90%;

-    .l-progress-bar {
-        $h: $progressBarHOverlay;
-        display: block;
-        height: $h;
-        line-height: $h;
-        margin: .5em 0;
-        width: 100%;
-    }
-
-    .select {
-        box-shadow: $shdwBtnsOverlay;
+            .t-btn-view-large {
+                display: none;
+            }
+        }
    }
 }

--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@ -20,69 +20,77 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .frame {
-	$ohH: $btnFrameH;
-	$bc: $colorInteriorBorder;
-	&.child-frame.panel {
-		background: $colorBodyBg;
-		border: 1px solid $bc;
+    $ohH: $btnFrameH;
+    $bc: $colorInteriorBorder;
+    &.child-frame.panel {
+        background: $colorBodyBg;
+        border: 1px solid $bc;
        z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-		&:hover {
-			border-color: lighten($bc, 10%);
-		}
-	}
-	.object-top-bar {
-		font-size: 0.75em;
-		height: $ohH;
-		line-height: $ohH;
-        .left {
-            padding-right: $interiorMarginLg;
+        &:hover {
+            border-color: lighten($bc, 10%);
        }
-	}
-	>.object-holder.abs {
-		top: $ohH + $interiorMargin;
-	}
-	.contents {
-		$myM: $interiorMargin;
-		top: $myM;
-		right: $myM;
-		bottom: $myM;
-		left: $myM;
-	}
-	&.frame-template {
-		.s-button,
-		.s-menu-button {
-			height: $ohH;
-			line-height: $ohH;
-			padding: 0 $interiorMargin;
-			> span,
+    }
+    .object-browse-bar {
+        font-size: 0.75em;
+        height: $ohH;
+        line-height: $ohH;
+    }
+
+    > .object-holder.abs {
+        top: $ohH + $interiorMargin;
+    }
+    .contents {
+        $myM: $interiorMargin;
+        top: $myM;
+        right: $myM;
+        bottom: $myM;
+        left: $myM;
+    }
+    &.frame-template {
+        .s-button,
+        .s-menu-button {
+            height: $ohH;
+            line-height: $ohH;
+            padding: 0 $interiorMargin;
+            > span,
            &:before {
-				font-size: 0.65rem;
-			}
-		}
+                font-size: 0.65rem;
+            }
+        }

-		.s-menu-button:after {
-			font-size: 8px;
-		}
+        .s-menu-button:after {
+            font-size: 8px;
+        }

-		.view-switcher {
-			z-index: 10;
-		}
-	}
-	.view-switcher {
-		// Hide the name when the view switcher is in a frame context
-		.title-label {
-			display: none;
-		}
-	}
+        .view-switcher {
+            z-index: 10;
+        }
+    }
+    .view-switcher {
+        margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
+        // Hide the name when the view switcher is in a frame context
+        .title-label {
+            display: none;
+        }
+    }
 }
- body.desktop .frame.frame-template {
-     // Hide the view switcher by default when it's in an element that's in a frame context
-     // Frame template is used because we need to target the lowest nested frame
-     .view-switcher {
-         opacity: 0;
-     }
-     &:hover .view-switcher {
-         // Show the view switcher on frame hover
-         opacity: 1;
-     }
- }
+
+body.desktop .frame {
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
+    // Frame template is used because we need to target the lowest nested frame
+    .view-switcher,
+    .t-btn-view-large {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    // Target the first descendant so that we only show the elements in the outermost container.
+    // Handles the case where we have layouts in layouts.
+    &:hover > .object-browse-bar {
+        .view-switcher,
+        .t-btn-view-large {
+            opacity: 1;
+            pointer-events: inherit;
+        }
+    }
+}
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@ -136,14 +136,6 @@
    .mini-tab-icon.toggle-pane {
        z-index: 5;
    }
-    &.items {
-        .object-browse-bar {
-            .left.abs,
-            .right.abs {
-                top: auto;
-            }
-        }
-    }
 }

 body.desktop .pane .mini-tab-icon.toggle-pane {
@ -250,10 +242,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
    vertical-align: top;
 }

-.object-browse-bar,
-.top-bar {
-    .view-switcher {
-        margin-right: $interiorMarginLg * 2;
+.object-browse-bar {
+    .l-object-action-buttons {
+        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
    }
 }

@ -265,7 +256,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
    white-space: nowrap;

    .left {
-        padding-right: $interiorMarginLg;
        .l-back {
            margin-right: $interiorMarginLg;
            &.s-status-editing { display: none; }
@ -348,7 +338,7 @@ body.desktop {
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
-    .pane.primary-pane .object-browse-bar {
+    .pane.primary-pane > .object-browse-bar {
        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
    }
 }
--- a/platform/features/layout/bundle.js
+++ b/platform/features/layout/bundle.js
@ -24,6 +24,7 @@ define([
    "./src/LayoutController",
    "./src/FixedController",
    "./src/LayoutCompositionPolicy",
+    './src/MCTTriggerModal',
    "text!./res/templates/layout.html",
    "text!./res/templates/fixed.html",
    "text!./res/templates/frame.html",
@ -37,6 +38,7 @@ define([
    LayoutController,
    FixedController,
    LayoutCompositionPolicy,
+    MCTTriggerModal,
    layoutTemplate,
    fixedTemplate,
    frameTemplate,
@ -222,6 +224,15 @@ define([
                    "template": frameTemplate
                }
            ],
+            "directives": [
+                {
+                    "key": "mctTriggerModal",
+                    "implementation": MCTTriggerModal,
+                    "depends": [
+                        "$document"
+                    ]
+                }
+            ],
            "controllers": [
                {
                    "key": "LayoutController",
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="frame frame-template abs">
-    <div class="abs object-top-bar l-flex-row">
+    <div class="abs object-browse-bar l-flex-row">
        <div class="left flex-elem l-flex-row grows">
            <mct-representation
                key="'object-header'"
--- a/platform/features/layout/src/MCTTriggerModal.js
+++ b/platform/features/layout/src/MCTTriggerModal.js
@ -0,0 +1,106 @@
+define([
+
+], function () {
+
+    var OVERLAY_TEMPLATE = '' +
+'<div class="abs overlay l-large-view">' +
+'    <div class="abs blocker"></div>' +
+'    <div class="abs holder">' +
+'        <a class="close icon-x"></a>' +
+'        <div class="abs contents"></div>' +
+'    </div>' +
+'</div>';
+
+    /**
+     * MCT Trigger Modal is intended for use in only one location: inside the
+     * object-header to allow views in a layout to be popped out in a modal.
+     * Users can close the modal and go back to normal, and everything generally
+     * just works fine.
+     *
+     * This code is sensitive to how our html is constructed-- particularly with
+     * how it locates the the container of an element in a layout. However, it
+     * should be able to handle slight relocations so long as it is always a
+     * descendent of a `.frame` element.
+     */
+    function MCTTriggerModal() {
+
+        function link($scope, $element) {
+            var frame = $element.parent();
+
+            for (var i = 0; i < 10; i++) {
+                if (frame.hasClass('frame')) {
+                    break;
+                }
+                frame = frame.parent();
+            }
+            if (!frame.hasClass('frame')) {
+                $element.remove();
+                return;
+            }
+
+            frame = frame[0];
+            var layoutContainer = frame.parentElement,
+                isOpen = false,
+                overlay,
+                closeButton,
+                blocker,
+                overlayContainer;
+
+            function openOverlay() {
+                // Remove frame classes from being applied in a non-frame context
+                $(frame).removeClass('frame frame-template');
+                overlayContainer = overlay.querySelector('.abs.contents');
+                closeButton = overlay.querySelector('a.close');
+                closeButton.addEventListener('click', toggleOverlay);
+                blocker = overlay.querySelector('.abs.blocker');
+                blocker.addEventListener('click', toggleOverlay);
+                document.body.appendChild(overlay);
+                layoutContainer.removeChild(frame);
+                overlayContainer.appendChild(frame);
+            }
+
+            function closeOverlay() {
+                $(frame).addClass('frame frame-template');
+                overlayContainer.removeChild(frame);
+                layoutContainer.appendChild(frame);
+                document.body.removeChild(overlay);
+                closeButton.removeEventListener('click', toggleOverlay);
+                closeButton = undefined;
+                blocker.removeEventListener('click', toggleOverlay);
+                blocker = undefined;
+                overlayContainer = undefined;
+                overlay = undefined;
+            }
+
+            function initOpenOverlay() {
+                overlay = document.createElement('span');
+                overlay.innerHTML = OVERLAY_TEMPLATE;
+                // Give expand anim time to run before populating
+                setTimeout(openOverlay(), 5000);
+            }
+
+            function toggleOverlay() {
+                if (!isOpen) {
+                    initOpenOverlay();
+                    isOpen = true;
+                } else {
+                    closeOverlay();
+                    isOpen = false;
+                }
+            }
+
+            $element.on('click', toggleOverlay);
+            $scope.$on('$destroy', function () {
+                $element.off('click');
+            });
+        }
+
+        return {
+            restrict: 'A',
+            link: link
+        };
+    }
+
+    return MCTTriggerModal;
+
+});
Author	SHA1	Message	Date
Charles Hacskaylo	e3f1938bc7	[Frontend] WIP overlay expansion Fixes #1437 WIP on expansion animation, not working properly yet	2017-02-16 16:12:42 -08:00
Charles Hacskaylo	b4cc0482f9	[Frontend] WIP Style Guide Fixes #1437 Fixed min-width issue incorrectly targeting .object-browse-bar in frame context;	2017-02-16 15:20:50 -08:00
Charles Hacskaylo	688191e3b2	[Frontend] WIP / significant changes for large view Fixes #1437 Fixes #1423 New overlay > l-dialog and l-large-view classes; Fix context-menu z-index to allow context menu to appear in the overlay; .object-top-bar refactored and replaced with .object-browse-bar; frame > hover now only displays local controls for proper level, handles nested layout situation; Fixed font-weight display issues; MCTTriggerModal.js modified to do the following: - Remove .frame classes when displaying object in overlay - Allow click on this overlay .blocker to dismiss overlay	2017-02-15 18:38:39 -08:00
Charles Hacskaylo	adfbfc47de	[Frontend] WIP styling of View Large elements Fixes #1437 Added new "icon-expand" glyph and class;	2017-02-15 14:45:47 -08:00
Charles Hacskaylo	999f0fc3e1	[Frontend] WIP styling of View Large elements Fixes #1437 Markup and CSS for `view large` button in frame context; Sass formatting cleanups; removed unused styles from _layout.scss; mods to MCTTriggerModal.js to remove button label functionality; TODO: styling of object-header sizing; add 'Done' button to overlay;	2017-02-14 17:30:24 -08:00
Pete Richards	a11496078b	[Layout] Add view large button for zooming	2017-02-14 15:23:17 -08:00