diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index fcef2b7ff7..c3c1197bc8 100644 --- 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. -->
-
+
- - - - - + + + + + + +
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index fe5a837d99..92e3dd43d6 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -29,3 +29,7 @@ mct-object='domainObject' class="flex-elem context-available-w"> + + diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index a674e7bd05..acf320caa4 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -16,7 +16,7 @@
{{dialogOption.label}} diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html index b34f7e791c..81f66133e7 100644 --- a/platform/commonUI/dialog/res/templates/overlay.html +++ b/platform/commonUI/dialog/res/templates/overlay.html @@ -19,12 +19,12 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
+
-
+
-
+ class="close icon-x-in-circle"> +
diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index e680130e86..24d2052f0a 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -1,10 +1,17 @@ -@mixin glyph($unicode, $family: 'symbolsfont') { +@mixin glyphBefore($unicode, $family: 'symbolsfont') { &:before { content: $unicode; font-family: $family; } } +@mixin glyphAfter($unicode, $family: 'symbolsfont') { + &:after { + content: $unicode; + font-family: $family; + } +} + /************************** CHAR UNICODES */ $glyph-icon-alert-rect: '\e900'; @@ -111,111 +118,111 @@ $glyph-icon-box-with-dashed-lines: '\e1129'; /************************** 16 PX CLASSES */ -.icon-alert-rect { @include glyph($glyph-icon-alert-rect); } -.icon-alert-triangle { @include glyph($glyph-icon-alert-triangle); } -.icon-arrow-down { @include glyph($glyph-icon-arrow-down); } -.icon-arrow-left { @include glyph($glyph-icon-arrow-left); } -.icon-arrow-right { @include glyph($glyph-icon-arrow-right); } -.icon-arrow-double-up { @include glyph($glyph-icon-arrow-double-up); } -.icon-arrow-tall-up { @include glyph($glyph-icon-arrow-tall-up); } -.icon-arrow-tall-down { @include glyph($glyph-icon-arrow-tall-down); } -.icon-arrow-double-down { @include glyph($glyph-icon-arrow-double-down); } -.icon-arrow-up { @include glyph($glyph-icon-arrow-up); } -.icon-asterisk { @include glyph($glyph-icon-asterisk); } -.icon-bell { @include glyph($glyph-icon-bell); } -.icon-box { @include glyph($glyph-icon-box); } -.icon-box-with-arrow { @include glyph($glyph-icon-box-with-arrow); } -.icon-check { @include glyph($glyph-icon-check); } -.icon-connectivity { @include glyph($glyph-icon-connectivity); } -.icon-database-in-brackets { @include glyph($glyph-icon-database-in-brackets); } -.icon-eye-open { @include glyph($glyph-icon-eye-open); } -.icon-gear { @include glyph($glyph-icon-gear); } -.icon-hourglass { @include glyph($glyph-icon-hourglass); } -.icon-info { @include glyph($glyph-icon-info); } -.icon-link { @include glyph($glyph-icon-link); } -.icon-lock { @include glyph($glyph-icon-lock); } -.icon-minus { @include glyph($glyph-icon-minus); } -.icon-people { @include glyph($glyph-icon-people); } -.icon-person { @include glyph($glyph-icon-person); } -.icon-plus { @include glyph($glyph-icon-plus); } -.icon-trash { @include glyph($glyph-icon-trash); } -.icon-x { @include glyph($glyph-icon-x); } -.icon-brackets { @include glyph($glyph-icon-brackets); } -.icon-arrows-out { @include glyph($glyph-icon-arrows-out); } -.icon-arrows-right-left { @include glyph($glyph-icon-arrows-right-left); } -.icon-arrows-up-down { @include glyph($glyph-icon-arrows-up-down); } -.icon-bullet { @include glyph($glyph-icon-bullet); } -.icon-calendar { @include glyph($glyph-icon-calendar); } -.icon-chain-links { @include glyph($glyph-icon-chain-links); } -.icon-collapse-pane-left { @include glyph($glyph-icon-collapse-pane-left); } -.icon-collapse-pane-right { @include glyph($glyph-icon-collapse-pane-right); } -.icon-download { @include glyph($glyph-icon-download); } -.icon-duplicate { @include glyph($glyph-icon-duplicate); } -.icon-folder-new { @include glyph($glyph-icon-folder-new); } -.icon-fullscreen-collapse { @include glyph($glyph-icon-fullscreen-collapse); } -.icon-fullscreen-expand { @include glyph($glyph-icon-fullscreen-expand); } -.icon-layers { @include glyph($glyph-icon-layers); } -.icon-line-horz { @include glyph($glyph-icon-line-horz); } -.icon-magnify { @include glyph($glyph-icon-magnify); } -.icon-magnify-in { @include glyph($glyph-icon-magnify-in); } -.icon-magnify-out { @include glyph($glyph-icon-magnify-out); } -.icon-menu-hamburger { @include glyph($glyph-icon-menu-hamburger); } -.icon-move { @include glyph($glyph-icon-move); } -.icon-new-window { @include glyph($glyph-icon-new-window); } -.icon-paint-bucket { @include glyph($glyph-icon-paint-bucket); } -.icon-pause { @include glyph($glyph-icon-pause); } -.icon-pencil { @include glyph($glyph-icon-pencil); } -.icon-play { @include glyph($glyph-icon-play); } -.icon-plot-resource { @include glyph($glyph-icon-plot-resource); } -.icon-pointer-left { @include glyph($glyph-icon-pointer-left); } -.icon-pointer-right { @include glyph($glyph-icon-pointer-right); } -.icon-refresh { @include glyph($glyph-icon-refresh); } -.icon-save { @include glyph($glyph-icon-save); } -.icon-sine { @include glyph($glyph-icon-sine); } -.icon-T { @include glyph($glyph-icon-T); } -.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-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); } -.icon-clock { @include glyph($glyph-icon-clock); } -.icon-database { @include glyph($glyph-icon-database); } -.icon-database-query { @include glyph($glyph-icon-database-query); } -.icon-dataset { @include glyph($glyph-icon-dataset); } -.icon-datatable { @include glyph($glyph-icon-datatable); } -.icon-dictionary { @include glyph($glyph-icon-dictionary); } -.icon-folder { @include glyph($glyph-icon-folder); } -.icon-image { @include glyph($glyph-icon-image); } -.icon-layout { @include glyph($glyph-icon-layout); } -.icon-object { @include glyph($glyph-icon-object); } -.icon-object-unknown { @include glyph($glyph-icon-object-unknown); } -.icon-packet { @include glyph($glyph-icon-packet); } -.icon-page { @include glyph($glyph-icon-page); } -.icon-plot-overlay { @include glyph($glyph-icon-plot-overlay); } -.icon-plot-stacked { @include glyph($glyph-icon-plot-stacked); } -.icon-session { @include glyph($glyph-icon-session); } -.icon-tabular { @include glyph($glyph-icon-tabular); } -.icon-tabular-lad { @include glyph($glyph-icon-tabular-lad); } -.icon-tabular-lad-set { @include glyph($glyph-icon-tabular-lad-set); } -.icon-tabular-realtime { @include glyph($glyph-icon-tabular-realtime); } -.icon-tabular-scrolling { @include glyph($glyph-icon-tabular-scrolling); } -.icon-telemetry { @include glyph($glyph-icon-telemetry); } -.icon-telemetry-panel { @include glyph($glyph-icon-telemetry-panel); } -.icon-timeline { @include glyph($glyph-icon-timeline); } -.icon-timer { @include glyph($glyph-icon-timer); } -.icon-topic { @include glyph($glyph-icon-topic); } -.icon-box-with-dashed-lines { @include glyph($glyph-icon-box-with-dashed-lines); } +.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); } +.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); } +.icon-arrow-down { @include glyphBefore($glyph-icon-arrow-down); } +.icon-arrow-left { @include glyphBefore($glyph-icon-arrow-left); } +.icon-arrow-right { @include glyphBefore($glyph-icon-arrow-right); } +.icon-arrow-double-up { @include glyphBefore($glyph-icon-arrow-double-up); } +.icon-arrow-tall-up { @include glyphBefore($glyph-icon-arrow-tall-up); } +.icon-arrow-tall-down { @include glyphBefore($glyph-icon-arrow-tall-down); } +.icon-arrow-double-down { @include glyphBefore($glyph-icon-arrow-double-down); } +.icon-arrow-up { @include glyphBefore($glyph-icon-arrow-up); } +.icon-asterisk { @include glyphBefore($glyph-icon-asterisk); } +.icon-bell { @include glyphBefore($glyph-icon-bell); } +.icon-box { @include glyphBefore($glyph-icon-box); } +.icon-box-with-arrow { @include glyphBefore($glyph-icon-box-with-arrow); } +.icon-check { @include glyphBefore($glyph-icon-check); } +.icon-connectivity { @include glyphBefore($glyph-icon-connectivity); } +.icon-database-in-brackets { @include glyphBefore($glyph-icon-database-in-brackets); } +.icon-eye-open { @include glyphBefore($glyph-icon-eye-open); } +.icon-gear { @include glyphBefore($glyph-icon-gear); } +.icon-hourglass { @include glyphBefore($glyph-icon-hourglass); } +.icon-info { @include glyphBefore($glyph-icon-info); } +.icon-link { @include glyphBefore($glyph-icon-link); } +.icon-lock { @include glyphBefore($glyph-icon-lock); } +.icon-minus { @include glyphBefore($glyph-icon-minus); } +.icon-people { @include glyphBefore($glyph-icon-people); } +.icon-person { @include glyphBefore($glyph-icon-person); } +.icon-plus { @include glyphBefore($glyph-icon-plus); } +.icon-trash { @include glyphBefore($glyph-icon-trash); } +.icon-x { @include glyphBefore($glyph-icon-x); } +.icon-brackets { @include glyphBefore($glyph-icon-brackets); } +.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); } +.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); } +.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); } +.icon-bullet { @include glyphBefore($glyph-icon-bullet); } +.icon-calendar { @include glyphBefore($glyph-icon-calendar); } +.icon-chain-links { @include glyphBefore($glyph-icon-chain-links); } +.icon-collapse-pane-left { @include glyphBefore($glyph-icon-collapse-pane-left); } +.icon-collapse-pane-right { @include glyphBefore($glyph-icon-collapse-pane-right); } +.icon-download { @include glyphBefore($glyph-icon-download); } +.icon-duplicate { @include glyphBefore($glyph-icon-duplicate); } +.icon-folder-new { @include glyphBefore($glyph-icon-folder-new); } +.icon-fullscreen-collapse { @include glyphBefore($glyph-icon-fullscreen-collapse); } +.icon-fullscreen-expand { @include glyphBefore($glyph-icon-fullscreen-expand); } +.icon-layers { @include glyphBefore($glyph-icon-layers); } +.icon-line-horz { @include glyphBefore($glyph-icon-line-horz); } +.icon-magnify { @include glyphBefore($glyph-icon-magnify); } +.icon-magnify-in { @include glyphBefore($glyph-icon-magnify-in); } +.icon-magnify-out { @include glyphBefore($glyph-icon-magnify-out); } +.icon-menu-hamburger { @include glyphBefore($glyph-icon-menu-hamburger); } +.icon-move { @include glyphBefore($glyph-icon-move); } +.icon-new-window { @include glyphBefore($glyph-icon-new-window); } +.icon-paint-bucket { @include glyphBefore($glyph-icon-paint-bucket); } +.icon-pause { @include glyphBefore($glyph-icon-pause); } +.icon-pencil { @include glyphBefore($glyph-icon-pencil); } +.icon-play { @include glyphBefore($glyph-icon-play); } +.icon-plot-resource { @include glyphBefore($glyph-icon-plot-resource); } +.icon-pointer-left { @include glyphBefore($glyph-icon-pointer-left); } +.icon-pointer-right { @include glyphBefore($glyph-icon-pointer-right); } +.icon-refresh { @include glyphBefore($glyph-icon-refresh); } +.icon-save { @include glyphBefore($glyph-icon-save); } +.icon-sine { @include glyphBefore($glyph-icon-sine); } +.icon-T { @include glyphBefore($glyph-icon-T); } +.icon-thumbs-strip { @include glyphBefore($glyph-icon-thumbs-strip); } +.icon-two-parts-both { @include glyphBefore($glyph-icon-two-parts-both); } +.icon-two-parts-one-only { @include glyphBefore($glyph-icon-two-parts-one-only); } +.icon-resync { @include glyphBefore($glyph-icon-resync); } +.icon-reset { @include glyphBefore($glyph-icon-reset); } +.icon-x-in-circle { @include glyphBefore($glyph-icon-x-in-circle); } +.icon-brightness { @include glyphBefore($glyph-icon-brightness); } +.icon-contrast { @include glyphBefore($glyph-icon-contrast); } +.icon-expand { @include glyphBefore($glyph-icon-expand); } +.icon-activity { @include glyphBefore($glyph-icon-activity); } +.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); } +.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); } +.icon-clock { @include glyphBefore($glyph-icon-clock); } +.icon-database { @include glyphBefore($glyph-icon-database); } +.icon-database-query { @include glyphBefore($glyph-icon-database-query); } +.icon-dataset { @include glyphBefore($glyph-icon-dataset); } +.icon-datatable { @include glyphBefore($glyph-icon-datatable); } +.icon-dictionary { @include glyphBefore($glyph-icon-dictionary); } +.icon-folder { @include glyphBefore($glyph-icon-folder); } +.icon-image { @include glyphBefore($glyph-icon-image); } +.icon-layout { @include glyphBefore($glyph-icon-layout); } +.icon-object { @include glyphBefore($glyph-icon-object); } +.icon-object-unknown { @include glyphBefore($glyph-icon-object-unknown); } +.icon-packet { @include glyphBefore($glyph-icon-packet); } +.icon-page { @include glyphBefore($glyph-icon-page); } +.icon-plot-overlay { @include glyphBefore($glyph-icon-plot-overlay); } +.icon-plot-stacked { @include glyphBefore($glyph-icon-plot-stacked); } +.icon-session { @include glyphBefore($glyph-icon-session); } +.icon-tabular { @include glyphBefore($glyph-icon-tabular); } +.icon-tabular-lad { @include glyphBefore($glyph-icon-tabular-lad); } +.icon-tabular-lad-set { @include glyphBefore($glyph-icon-tabular-lad-set); } +.icon-tabular-realtime { @include glyphBefore($glyph-icon-tabular-realtime); } +.icon-tabular-scrolling { @include glyphBefore($glyph-icon-tabular-scrolling); } +.icon-telemetry { @include glyphBefore($glyph-icon-telemetry); } +.icon-telemetry-panel { @include glyphBefore($glyph-icon-telemetry-panel); } +.icon-timeline { @include glyphBefore($glyph-icon-timeline); } +.icon-timer { @include glyphBefore($glyph-icon-timer); } +.icon-topic { @include glyphBefore($glyph-icon-topic); } +.icon-box-with-dashed-lines { @include glyphBefore($glyph-icon-box-with-dashed-lines); } /************************** 12 PX CLASSES */ -.icon-eye-open-12px { @include glyph($glyph-icon-eye-open,'symbolsfont-12px'); } -.icon-collapse-pane-left-12px { @include glyph($glyph-icon-collapse-pane-left,'symbolsfont-12px'); } -.icon-collapse-pane-right-12px { @include glyph($glyph-icon-collapse-pane-right,'symbolsfont-12px'); } -.icon-folder-12px { @include glyph($glyph-icon-folder,'symbolsfont-12px'); } +.icon-eye-open-12px { @include glyphBefore($glyph-icon-eye-open,'symbolsfont-12px'); } +.icon-collapse-pane-left-12px { @include glyphBefore($glyph-icon-collapse-pane-left,'symbolsfont-12px'); } +.icon-collapse-pane-right-12px { @include glyphBefore($glyph-icon-collapse-pane-right,'symbolsfont-12px'); } +.icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); } diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index f7d38b625d..0260524e86 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -58,7 +58,6 @@ @import "search/search"; @import "mobile/search/search"; @import "overlay/overlay"; -@import "mobile/overlay/overlay"; @import "tree/tree"; @import "object-label"; @import "mobile/tree"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 799b774c4f..4c2687e227 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -285,13 +285,14 @@ @mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) { background-color: $bg; - border-radius: $controlCr; + //border-radius: $controlCr; box-sizing: border-box; color: $fg; } @mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) { @include user-select(none); + border-radius: $controlCr; color: $fg; .icon, &:before { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 5c9f5507e1..f286f362e9 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -651,7 +651,8 @@ textarea { } } -.view-switcher { +.view-switcher, +.t-btn-view-large { @include trans-prop-nice-fade($controlFadeMs); } diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index bb58d62d3a..ff056042e8 100644 --- 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; diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 24711819f0..9d23c96d57 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -311,6 +311,24 @@ body.desktop .t-message-single { } } +@include phonePortrait { + .t-message-single { + .l-message { + @include flex-direction(column); + .message-contents { margin-left: 0; } + } + .type-icon.message-type { + margin-bottom: $interiorMarginLg; + width: 100%; + text-align: center; + } + + .bottom-bar { + text-align: center !important; + } + } +} + // Messages in list .t-message-list { @include messageBlock(32px); diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss index ef07a0b534..44cfee5dbd 100644 --- a/platform/commonUI/general/res/sass/forms/_validation.scss +++ b/platform/commonUI/general/res/sass/forms/_validation.scss @@ -19,44 +19,40 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +@mixin labelValidate($sym, $c) { + > .label { + @include glyphAfter($sym); + &:after { + color: $c; + margin-left: $interiorMargin; + } + } +} + + mct-form.validates { .form-row.validates { > .label { padding-right: $reqSymbolM; // Keep room for validation element - &:before { - position: absolute; - right: $interiorMargin; + &:after { font-size: $reqSymbolFontSize; - height: 100%; - line-height: 200%; - } } &.invalid, - &.invalid.req { - > .label { - @extend .icon-x; - &:before { - color: $colorFormInvalid; - } - } - } + &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); } + &.valid, - &.valid.req { - > .label { - @extend .icon-check; - &:before { - color: $colorFormValid; - } - } - } - &.req { - > .label { - @extend .icon-asterisk; - &:before { - color: $colorFormRequired; - } - } - } + &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); } + + &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); } + } +} + +body.desktop .form-row.validates > .label { + &:after { + position: absolute; + right: $interiorMargin; + height: 100%; + line-height: 200%; } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 162a8b60eb..fef5672ebc 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -92,7 +92,7 @@ body.mobile { } .object-browse-bar { - margin-left: 45px; + &.t-primary { margin-left: 45px; } .context-available { opacity: 1 !important; } diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss deleted file mode 100644 index 7b7daac67f..0000000000 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ /dev/null @@ -1,74 +0,0 @@ -@include phoneandtablet { - .overlay { - .clk-icon.close { - top: $mobileOverlayMargin; right: $mobileOverlayMargin; - } - - > .holder { - height: 90%; width: 90%; - - > .contents { - top: $mobileOverlayMargin; - right: $mobileOverlayMargin; - bottom: $mobileOverlayMargin; - left: $mobileOverlayMargin; - - .top-bar { - > .title { - margin-right: 1.2em; - } - } - } - } - } -} - -@include phone { - .overlay > .holder { - $m: 0; - border-radius: $m; - top: $m; - right: $m; - bottom: $m; - left: $m; - height: auto; width: auto; - min-width: 200px; min-height: 200px; - max-height: 100%; max-width: 100%; - overflow: auto; - @include transform(none); - - .editor .form .form-row.l-flex-row { - // Display elements in a columnar view - @include flex-direction(column); - > .flex-elem { - &:not(:first-child) { - margin-top: $interiorMargin; - } - &.label { - width: 100%; - } - &.controls { - overflow: auto; - } - } - - &.validates > .label:before { - position: relative; - right: auto; - line-height: inherit; - margin-right: $interiorMargin; - } - } - } - .t-dialog-sm .overlay > .holder { - height: auto; max-height: 100%; - } -} - -@include phonePortrait { - .overlay > .holder { - .contents .bottom-bar { - text-align: center; - } - } -} diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index d8deb08430..20ddf8efb6 100644 --- 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); @@ -35,29 +40,21 @@ z-index: 100; } .close { - font-size: 0.8rem; + $d: $interiorMargin; + opacity: 0.3; position: absolute; - top: $interiorMarginLg; - right: $interiorMarginLg; + top: $d; + right: $d; bottom: auto; left: auto; - z-index: 100; + &:hover { + opacity: 0.6; + } } - > .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; - > .contents { + + > .abs.outer-holder { + z-index: 102; + > .abs.inner-holder { $m: $overlayMargin; top: $m; right: $m; @@ -65,78 +62,176 @@ 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; .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; + margin-bottom: $interiorMarginSm; padding: 0 $interiorMargin * 3; - &:first-child { - margin-left: 0; + &:not(:last-child) { + margin-right: $interiorMargin; + } + } + } + + // Dialog boxes, size constrained and centered in desktop/tablet + &.l-dialog { + .s-button { + &:not(.major) { + @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg); } } + > .abs.outer-holder { + @include desktopandtablet { + $max: 1280px; + @include transform(translateX(-50%) translateY(-50%)); + border-radius: $overlayCr; + top: 50%; right: auto; bottom: auto; left: 50%; + width: 70%; height: 70%; + min-width: 520px; + max-width: $max; max-height: $max; + } + @include phone { + overflow: auto; + + .editor .form .form-row.l-flex-row { + // Display elements in a columnar view + @include flex-direction(column); + > .flex-elem { + &:not(:first-child) { + margin-top: $interiorMargin; + } + &.label { + width: 100%; + } + &.controls { + overflow: auto; + } + } + + &.validates > .label:before { + position: relative; + right: auto; + line-height: inherit; + margin-right: $interiorMargin; + } + } + } + + @include containerSubtle($colorOvrBg, $colorOvrFg); + } + + .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%; + } + } + } + + .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; + // Large view overlays for mobile and desktop + &.l-large-view { + > .abs.outer-holder { + @include keyframes(overlayIn) { + from { + opacity: 0; + transform: scale(0, 0); + } + to { + opacity: 1; + transform: scale(1.0, 1.0); + } + } + + @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0); + background: $colorBodyBg; + + .abs.inner-holder { + opacity: 0; + @include keyframes(contentsIn) { + from { opacity: 0; } + to { opacity: 1; } + } + @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25); + } + + .t-btn-view-large { + display: none; + } + z-index: 101; + } + } +} + +body.desktop { + .overlay { + > .abs.outer-holder { + border-radius: $overlayCr; + } + + &.l-large-view { + > .abs.outer-holder { + width: 90%; + height: 90%; + top: 5%; + left: 5%; + @include boxShdwLarge(); + } + } } - .l-progress-bar { - $h: $progressBarHOverlay; - display: block; + .t-dialog-sm .overlay > .outer-holder { + // Used for blocker and in-progress dialogs, modal alerts, etc. + $h: 225px; + max-height: $h; height: $h; - line-height: $h; - margin: .5em 0; - width: 100%; - } - - .select { - box-shadow: $shdwBtnsOverlay; } } - -.t-dialog-sm .overlay > .holder { - // Used for blocker and in-progress dialogs, modal alerts, etc. - $h: 225px; - min-height: $h; - height: $h; -} diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index a0a8201fb5..1dcc8e35b6 100644 --- 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 { + // 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; + } + } } - 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; - } - } diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 9cb0b5d1f0..55ac9887a2 100644 --- 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 } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index ae16475da0..1a269a22c7 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -17,6 +17,7 @@ $hoverRatioPercent: 10%; $basicCr: 3px; $controlCr: 2px; $smallCr: 2px; +$overlayCr: 11px; // Buttons and Controls $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); @@ -146,6 +147,7 @@ $colorOvrFg: pullForward($colorBodyFg, 30%); $colorOvrBtnBg: pullForward($colorOvrBg, 20%); $colorOvrBtnFg: #fff; $colorFieldHintOverlay: pullForward($colorOvrBg, 30%); +$durLargeViewExpand: 250ms; // Items $colorItemBg: lighten($colorBodyBg, 5%); diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 8a2a2f18b7..99e09048a3 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -17,6 +17,7 @@ $hoverRatioPercent: 10%; $basicCr: 4px; $controlCr: $basicCr; $smallCr: 3px; +$overlayCr: 11px; // Buttons and Controls $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); @@ -146,6 +147,7 @@ $colorOvrFg: $colorBodyFg; $colorOvrBtnBg: pullForward($colorOvrBg, 40%); $colorOvrBtnFg: #fff; $colorFieldHintOverlay: pullForward($colorOvrBg, 40%); +$durLargeViewExpand: 250ms; // Items $colorItemBg: #ddd; diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 70e7314b11..a38c447fb2 100644 --- 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", diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html index 7f678df325..a516aa9363 100644 --- 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. -->
-
+
' + +'
' + +'
' + +' ' + +'
' + +'
' + +'
' + +' Done' + +'
' + +'
' + +'
' + +'
'; + + /** + * 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($document) { + var document = $document[0]; + + 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, + toggleOverlay, + overlay, + closeButton, + doneButton, + blocker, + overlayContainer; + + function openOverlay() { + // Remove frame classes from being applied in a non-frame context + $(frame).removeClass('frame frame-template'); + overlay = document.createElement('span'); + overlay.innerHTML = OVERLAY_TEMPLATE; + overlayContainer = overlay.querySelector('.t-contents'); + closeButton = overlay.querySelector('a.close'); + closeButton.addEventListener('click', toggleOverlay); + doneButton = overlay.querySelector('a.t-done'); + doneButton.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; + doneButton.removeEventListener('click', toggleOverlay); + doneButton = undefined; + blocker.removeEventListener('click', toggleOverlay); + blocker = undefined; + overlayContainer = undefined; + overlay = undefined; + } + + toggleOverlay = function () { + if (!isOpen) { + openOverlay(); + isOpen = true; + } else { + closeOverlay(); + isOpen = false; + } + }; + + $element.on('click', toggleOverlay); + $scope.$on('$destroy', function () { + $element.off('click', toggleOverlay); + }); + } + + return { + restrict: 'A', + link: link + }; + } + + return MCTTriggerModal; + +}); diff --git a/platform/features/layout/test/MCTTriggerModalSpec.js b/platform/features/layout/test/MCTTriggerModalSpec.js new file mode 100644 index 0000000000..a466778536 --- /dev/null +++ b/platform/features/layout/test/MCTTriggerModalSpec.js @@ -0,0 +1,122 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2016, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +define([ + '../src/MCTTriggerModal' +], function ( + MCTTriggerModal +) { + describe('MCTTriggerModal', function () { + var $scope, + $element, + frame, + layoutContainer, + $document, + mctTriggerModal; + + function makeElement(classes, parentEl) { + var elem = jasmine.createSpyObj('element.' + classes.join('.'), [ + 'hasClass', + 'parent' + ]); + elem.hasClass.andCallFake(function (className) { + return classes.indexOf(className) !== -1; + }); + elem.parent.andReturn(parentEl); + var div = document.createElement('div'); + div.className = classes.join(' '); + parentEl[0].appendChild(div); + elem[0] = div; + return elem; + } + + + beforeEach(function () { + $scope = jasmine.createSpyObj('$scope', ['$on']); + $element = jasmine.createSpyObj('$element', [ + 'parent', + 'remove', + 'on', + 'off' + ]); + layoutContainer = document.createElement('div'); + frame = makeElement(['frame'], [layoutContainer]); + var child = makeElement([], frame); + for (var i = 0; i < 5; i++) { + child = makeElement([], child); + } + $element.parent.andReturn(child); + $document = [jasmine.createSpyObj('document', ['createElement'])]; + $document[0].body = document.createElement('div'); + $document[0].createElement.andCallFake(function (tag) { + return document.createElement(tag); + }); + + mctTriggerModal = new MCTTriggerModal($document); + }); + + it('is a directive definition', function () { + expect(mctTriggerModal.restrict).toBe('A'); + expect(mctTriggerModal.link).toEqual(jasmine.any(Function)); + }); + + describe('link', function () { + beforeEach(function () { + mctTriggerModal.link($scope, $element); + }); + + it('attaches handlers to $element', function () { + expect($element.on).toHaveBeenCalledWith( + 'click', + jasmine.any(Function) + ); + }); + + it('cleans up on $scope $destroy', function () { + expect($scope.$on).toHaveBeenCalledWith( + '$destroy', + jasmine.any(Function) + ); + $scope.$on.mostRecentCall.args[1](); + expect($element.off).toHaveBeenCalledWith( + 'click', + jasmine.any(Function) + ); + }); + + it('opens and closes overlays', function () { + [ + 'a.close', 'a.t-done', '.abs.blocker' + ].forEach(function (selector) { + $element.on.mostRecentCall.args[1](); + var container = $document[0].body.querySelector('.t-contents'); + expect(container.children[0]).toBe(frame[0]); + expect(layoutContainer.children[0]).not.toBe(frame[0]); + $document[0].body.querySelector(selector) + .dispatchEvent(new Event('click')); + expect(container.children[0]).not.toBe(frame[0]); + expect(layoutContainer.children[0]).toBe(frame[0]); + }); + }); + }); + }); +}); diff --git a/src/api/ui/dialog.html b/src/api/ui/dialog.html index 83181c5c78..22ae42b4b4 100644 --- a/src/api/ui/dialog.html +++ b/src/api/ui/dialog.html @@ -1,8 +1,8 @@ -
+
-
- x -
+
+ +
@@ -10,12 +10,9 @@
- OK - Cancel + OK + Cancel
- - -