[Frontend] WIP overlay expansion

Fixes #1437 WIP on expansion animation, not working properly yet
[Frontend] WIP Style Guide
2025-06-27 11:32:13 +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'"
+            <span class="l-object-action-buttons">
-                                mct-object="domainObject"
+                <mct-representation key="'switcher'"
-                                ng-model="representation">
+                                    mct-object="domainObject"
-            </mct-representation>
+                                    ng-model="representation">
-            <!-- Temporarily, on mobile, the action buttons are hidden-->
+                </mct-representation>
-            <mct-representation key="'action-group'"
+                <!-- Temporarily, on mobile, the action buttons are hidden-->
-                                mct-object="domainObject"
+                <mct-representation key="'action-group'"
-                                parameters="{ category: 'view-control' }"
+                                    mct-object="domainObject"
-                                class="mobile-hide">
+                                    parameters="{ category: 'view-control' }"
-            </mct-representation>
+                                    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,
+    "lastOpened": 1487197651675,
-    "created": 1481575255265
+    "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,
+          "order": 122,
-          "id": 105,
+          "id": 106,
-          "name": "icon-reset",
+          "name": "icon-expand",
          "prevSize": 24,
-          "code": 921655,
+          "code": 921665,
-          "tempChar": ""
+          "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-expand {  @include glyph($glyph-icon-expand); }
 .icon-resync {  @include glyph($glyph-icon-resync); }
 .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; }
+            0% {
-            100% { display: block; opacity: 1; }
+                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;  }
+.overlay {
-
+    &.l-dialog {
    .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;
        .s-button {
            $bg: $colorOvrBtnBg;
            &:not(.major) {
-                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
            }
            font-size: 95%;
            height: $ovrFooterH;
            line-height: $ovrFooterH;
            margin-left: $interiorMargin;
            padding: 0 $interiorMargin * 3;
            &:first-child {
                margin-left: 0;
            }
        }
        > .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 {
+    &.l-large-view {
-        top: auto;
+        > .holder {
-        right: 0;
+            @include keyframes(overlayIn) {
-        bottom: 0;
+                from { opacity: 0; width: 1%; height: 1%; }
-        left: 0;
+                to { opacity: 1; width: 90%; height: 90%; }
-        overflow: visible;
+            }
-        height: $ovrFooterH;
+            @include animToParams(overlayIn, $dur: 1s, $delay: 0);
-    }
+            background: $colorBodyBg;
            border-radius: $basicCr * 2;
            //height: 90%;
            //width: 90%;
-    .l-progress-bar {
+            .t-btn-view-large {
-        $h: $progressBarHOverlay;
+                display: none;
-        display: block;
+            }
-        height: $h;
+        }
        line-height: $h;
        margin: .5em 0;
        width: 100%;
    }
    .select {
        box-shadow: $shdwBtnsOverlay;
    }
 }
--- 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;
+    $ohH: $btnFrameH;
-	$bc: $colorInteriorBorder;
+    $bc: $colorInteriorBorder;
-	&.child-frame.panel {
+    &.child-frame.panel {
-		background: $colorBodyBg;
+        background: $colorBodyBg;
-		border: 1px solid $bc;
+        border: 1px solid $bc;
        z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-		&:hover {
+        &:hover {
-			border-color: lighten($bc, 10%);
+            border-color: lighten($bc, 10%);
 		}
 	}
 	.object-top-bar {
 		font-size: 0.75em;
 		height: $ohH;
 		line-height: $ohH;
        .left {
            padding-right: $interiorMarginLg;
        }
-	}
+    }
-	>.object-holder.abs {
+    .object-browse-bar {
-		top: $ohH + $interiorMargin;
+        font-size: 0.75em;
-	}
+        height: $ohH;
-	.contents {
+        line-height: $ohH;
-		$myM: $interiorMargin;
+    }
-		top: $myM;
+
-		right: $myM;
+    > .object-holder.abs {
-		bottom: $myM;
+        top: $ohH + $interiorMargin;
-		left: $myM;
+    }
-	}
+    .contents {
-	&.frame-template {
+        $myM: $interiorMargin;
-		.s-button,
+        top: $myM;
-		.s-menu-button {
+        right: $myM;
-			height: $ohH;
+        bottom: $myM;
-			line-height: $ohH;
+        left: $myM;
-			padding: 0 $interiorMargin;
+    }
-			> span,
+    &.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 {
+        .s-menu-button:after {
-			font-size: 8px;
+            font-size: 8px;
-		}
+        }
-		.view-switcher {
+        .view-switcher {
-			z-index: 10;
+            z-index: 10;
-		}
+        }
-	}
+    }
-	.view-switcher {
+    .view-switcher {
-		// Hide the name when the view switcher is in a frame context
+        margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
-		.title-label {
+        // Hide the name when the view switcher is in a frame context
-			display: none;
+        .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
+body.desktop .frame {
-     // Frame template is used because we need to target the lowest nested frame
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
-     .view-switcher {
+    // Frame template is used because we need to target the lowest nested frame
-         opacity: 0;
+    .view-switcher,
-     }
+    .t-btn-view-large {
-     &:hover .view-switcher {
+        opacity: 0;
-         // Show the view switcher on frame hover
+        pointer-events: none;
-         opacity: 1;
+    }
-     }
+
- }
+    // 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,
+.object-browse-bar {
-.top-bar {
+    .l-object-action-buttons {
-    .view-switcher {
+        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
        margin-right: $interiorMarginLg * 2;
    }
 }
@ -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