From 78f49784a07d939ce9737882e54621278a71828e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 25 Sep 2017 11:10:58 -0700 Subject: [PATCH 1/4] [Front-end] Tweaks Fixes #1729 CSS and markup mods to convert to flex from abs pos; --- .../res/templates/create/create-menu.html | 6 +-- .../general/res/sass/controls/_menus.scss | 45 +++++++++++-------- .../templates/mode-selector/mode-menu.html | 6 +-- 3 files changed, 33 insertions(+), 24 deletions(-) diff --git a/platform/commonUI/edit/res/templates/create/create-menu.html b/platform/commonUI/edit/res/templates/create/create-menu.html index 3aad023db7..d0ac4c3e75 100644 --- a/platform/commonUI/edit/res/templates/create/create-menu.html +++ b/platform/commonUI/edit/res/templates/create/create-menu.html @@ -19,8 +19,8 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
+
+
-
+
{{representation.activeMetadata.name}} diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index ff056042e8..67520aa7bf 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -165,27 +165,35 @@ } } +.super-menu, +.super-menu > mct-representation, +.super-menu > .contents { + box-sizing: border-box; + display: block; + position: relative; +} + .super-menu { - $w: 500px; - $h: $w - 20; $plw: 50%; - $prw: 50%; - display: block; - width: $w; - height: $h; - .contents { - @include absPosDefault($interiorMargin); + $prw: 100% - $plw; + position: absolute; + width: 500px; + .w-menu { + align-items: stretch; + display: flex; + flex-direction: row; + margin: $interiorMarginLg; } - .pane { - box-sizing: border-box; + .col { + box-sizing: border-box; + flex: 1 1 auto; + max-height: 70vh; + overflow-x: hidden; &.menu-items { border-right: 1px solid pullForward($colorMenuBg, 10%); - left: 0; + overflow-y: auto; padding-right: $interiorMargin; - right: auto; width: $plw; - overflow-x: hidden; - overflow-y: auto; ul { li { border-radius: $controlCr; @@ -195,8 +203,8 @@ } } &.menu-item-description { - left: auto; - right: 0; + @include test(blue); + overflow-y: hidden; padding: $interiorMargin * 5; width: $prw; .desc-area { @@ -223,8 +231,9 @@ &.mini { width: 400px; - height: 300px; - .pane { + .col { + height: 350px; + max-height: 50vh; &.menu-items { font-size: 0.8em; } diff --git a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html index b0689ea4c9..fdd25d1e93 100644 --- a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html +++ b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html @@ -19,8 +19,8 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
+
+
  • @@ -32,7 +32,7 @@
-
+
{{ngModel.activeMetadata.name}} From bc7d92ee0d64aa63769d7bb534f251c14d253c88 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 25 Sep 2017 12:08:04 -0700 Subject: [PATCH 2/4] [Front-end] Menu tweaks Fixes #1729 Mini super-menu and related description text --- .../general/res/sass/controls/_menus.scss | 19 ++++++------------- .../core/src/ui/TimeConductorController.js | 2 +- src/plugins/utcTimeSystem/LocalClock.js | 3 +-- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 67520aa7bf..679ce9a1f6 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -72,17 +72,12 @@ position: relative; } -.s-menu { - border-radius: $basicCr; - @include containerSubtle($colorMenuBg, $colorMenuFg); - @include boxShdw($shdwMenu); - @include txtShdw($shdwMenuText); - padding: $interiorMarginSm 0; -} - .menu { - // TODO: reduce size of icons - @extend .s-menu; + border-radius: $basicCr; + @include containerSubtle($colorMenuBg, $colorMenuFg); + @include boxShdw($shdwMenu); + @include txtShdw($shdwMenuText); + padding: $interiorMarginSm 0; display: block; position: absolute; z-index: 10; @@ -92,7 +87,6 @@ box-sizing: border-box; border-top: 1px solid pullForward($colorMenuBg, 10%); color: $colorMenuFg; - //color: pullForward($colorMenuBg, 60%); line-height: $menuLineH; padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW; position: relative; @@ -203,7 +197,6 @@ } } &.menu-item-description { - @include test(blue); overflow-y: hidden; padding: $interiorMargin * 5; width: $prw; @@ -232,7 +225,7 @@ &.mini { width: 400px; .col { - height: 350px; + height: 320px; max-height: 50vh; &.menu-items { font-size: 0.8em; diff --git a/platform/features/conductor/core/src/ui/TimeConductorController.js b/platform/features/conductor/core/src/ui/TimeConductorController.js index 76ea01efb6..7c53f23992 100644 --- a/platform/features/conductor/core/src/ui/TimeConductorController.js +++ b/platform/features/conductor/core/src/ui/TimeConductorController.js @@ -201,7 +201,7 @@ define( var options = [{ key: 'fixed', name: 'Fixed Timespan Mode', - description: 'Query and explore data that falls between two fixed datetimes', + description: 'Query and explore data that falls between two fixed datetimes.', cssClass: 'icon-calendar' }]; var clocks = {}; diff --git a/src/plugins/utcTimeSystem/LocalClock.js b/src/plugins/utcTimeSystem/LocalClock.js index 5fc3cc2752..76b6815178 100644 --- a/src/plugins/utcTimeSystem/LocalClock.js +++ b/src/plugins/utcTimeSystem/LocalClock.js @@ -37,8 +37,7 @@ define(['EventEmitter'], function (EventEmitter) { this.key = 'local'; this.cssClass = 'icon-clock'; this.name = 'Local Clock'; - this.description = "Updates every second, providing UTC timestamps from " + - "user's local computer."; + this.description = "Provides UTC timestamps every second from the local system clock."; this.period = period; this.timeoutHandle = undefined; From e9cb5cd63969d7004dc125a6e913b3d1e2bb2e64 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 25 Sep 2017 12:08:59 -0700 Subject: [PATCH 3/4] [Front-end] Scrollbar-related color and padding Fixes #1729 --- .../commonUI/general/res/sass/controls/_controls.scss | 6 +++++- platform/commonUI/general/res/sass/overlay/_overlay.scss | 2 ++ .../commonUI/themes/espresso/res/sass/_constants.scss | 8 +++++--- platform/commonUI/themes/snow/res/sass/_constants.scss | 4 +++- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 83af1dccbb..da97e3b3fe 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -753,11 +753,15 @@ body.desktop { } .overlay ::-webkit-scrollbar-thumb { - $lr: 15%; background: $scrollbarThumbColorOverlay; &:hover { background: $scrollbarThumbColorOverlayHov; } } + .menu ::-webkit-scrollbar-thumb { + background: $scrollbarThumbColorMenu; + &:hover { background: $scrollbarThumbColorMenuHov; } + } + ::-webkit-scrollbar-corner { background: $scrollbarTrackColorBg; } diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 64a814538e..371d9d5b0c 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -156,6 +156,8 @@ left: 0; right: 0; overflow: auto; + padding-right: $interiorMargin; + padding-bottom: $interiorMargin; .field.l-input-med { input[type='text'] { width: 100%; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index e89ff67ac4..773ac83484 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -201,13 +201,15 @@ $shdwItemTreeIcon: 0.6; $colorThumbHoverBg: $colorItemTreeHoverBg; // Scrollbar -$scrollbarTrackSize: 10px; -$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; -$scrollbarTrackColorBg: rgba(#000, 0.4); +$scrollbarTrackSize: 7px; +$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px; +$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4); $scrollbarThumbColor: pullForward($colorBodyBg, 10%); $scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%); $scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%); $scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%); +$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%); +$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%); // Splitter // All splitterD* values MUST both be either odd or even numbers diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index d6c0195555..9ae7bb00b2 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -201,13 +201,15 @@ $shdwItemTreeIcon: none; $colorThumbHoverBg: $colorItemTreeHoverBg; // Scrollbar -$scrollbarTrackSize: 10px; +$scrollbarTrackSize: 7px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; $scrollbarTrackColorBg: rgba(#000, 0.2); $scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%); $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov; +$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%); +$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%); // Splitter // All splitterD* values MUST both be either odd or even numbers From 138cb199bb91fa9e942c62aa1fdf3138405be650 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 25 Sep 2017 14:59:12 -0700 Subject: [PATCH 4/4] [Front-end] Markup and CSS refinements Fixes #1729 Internal markup and CSS now sets heights internally - menu height will now not be smaller than the list of menu items OR the description area; --- .../res/templates/create/create-button.html | 2 +- .../res/templates/create/create-menu.html | 12 +- .../general/res/sass/controls/_menus.scss | 313 ++++++++++-------- .../templates/mode-selector/mode-menu.html | 12 +- .../mode-selector/mode-selector.html | 2 +- 5 files changed, 189 insertions(+), 152 deletions(-) diff --git a/platform/commonUI/edit/res/templates/create/create-button.html b/platform/commonUI/edit/res/templates/create/create-button.html index f602b77fe7..e39e9cde57 100644 --- a/platform/commonUI/edit/res/templates/create/create-button.html +++ b/platform/commonUI/edit/res/templates/create/create-button.html @@ -23,7 +23,7 @@
Create
-
+
diff --git a/platform/commonUI/edit/res/templates/create/create-menu.html b/platform/commonUI/edit/res/templates/create/create-menu.html index d0ac4c3e75..264b7a6df8 100644 --- a/platform/commonUI/edit/res/templates/create/create-menu.html +++ b/platform/commonUI/edit/res/templates/create/create-menu.html @@ -33,11 +33,13 @@
-
- {{representation.activeMetadata.name}} -
-
- {{representation.activeMetadata.description}} +
+
+ {{representation.activeMetadata.name}} +
+
+ {{representation.activeMetadata.description}} +
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 679ce9a1f6..45cfea27aa 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -21,55 +21,56 @@ *****************************************************************************/ /******************************************************** MENU BUTTONS */ .s-menu-button { - // Formerly .btn-menu - @extend .s-button; - span.l-click-area { - // In markup, this element should not enclose anything. - @extend .abs; - } + // Formerly .btn-menu + @extend .s-button; + span.l-click-area { + // In markup, this element should not enclose anything. + @extend .abs; + } - .icon { - font-size: 16px; //120%; - } + .icon { + font-size: 16px; //120%; + } - .title-label { - margin-left: $interiorMarginSm; - } + .title-label { + margin-left: $interiorMarginSm; + } .color-swatch { // Used in color menu buttons in toolbar $d: 10px; display: inline-block; border: 1px solid rgba($colorBtnFg, 0.2); - height: $d; width: $d; + height: $d; + width: $d; vertical-align: middle; margin-left: $interiorMarginSm; margin-top: -2px; } - &:after { - // Adds the downward facing 'context available / invoke menu' arrow element - @include contextArrow(); - color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); - } + &:after { + // Adds the downward facing 'context available / invoke menu' arrow element + @include contextArrow(); + color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); + } - &.create-button { + &.create-button { @extend .icon-plus; - .title-label { - font-size: 1rem; - } - } + .title-label { + font-size: 1rem; + } + } - .menu { - left: 0; - text-align: left; - } + .menu { + left: 0; + text-align: left; + } } /******************************************************** MENUS THEMSELVES */ .menu-element { - cursor: pointer; - position: relative; + cursor: pointer; + position: relative; } .menu { @@ -78,29 +79,29 @@ @include boxShdw($shdwMenu); @include txtShdw($shdwMenuText); padding: $interiorMarginSm 0; - display: block; - position: absolute; - z-index: 10; - ul { - @include menuUlReset(); - li { - box-sizing: border-box; - border-top: 1px solid pullForward($colorMenuBg, 10%); + display: block; + position: absolute; + z-index: 10; + ul { + @include menuUlReset(); + li { + box-sizing: border-box; + border-top: 1px solid pullForward($colorMenuBg, 10%); color: $colorMenuFg; - line-height: $menuLineH; - padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW; - position: relative; - white-space: nowrap; - &:first-child { - border: none; - } - &:hover { - background: $colorMenuHovBg; - color: $colorMenuHovFg; + line-height: $menuLineH; + padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW; + position: relative; + white-space: nowrap; + &:first-child { + border: none; + } + &:hover { + background: $colorMenuHovBg; + color: $colorMenuHovFg; &:before { color: $colorMenuHovIc; } - } + } &:before { @extend .ui-symbol; @extend .type-icon; @@ -108,8 +109,8 @@ display: inline-block; left: $interiorMargin * 2; } - } - } + } + } } .menu, @@ -117,46 +118,46 @@ .context-menu, .super-menu, .s-menu-button .menu { - pointer-events: auto; - ul li { - a.menu-item-a { + pointer-events: auto; + ul li { + a.menu-item-a { color: $colorMenuFg; display: block; - } + } &:before, a.menu-item-a:before { color: $colorMenuIc; left: $interiorMargin; } - } + } } .checkbox-menu { - // Used in search dropdown in tree - @extend .context-menu; - ul li { - padding-left: 50px; - .checkbox { - $d: 0.7rem; - position: absolute; - left: $interiorMargin; - top: ($menuLineH - $d) / 1.5; - em { - height: $d; - width: $d; - &:before { - font-size: 7px !important; - height: $d; - width: $d; - line-height: $d; - } - } - } - &:before { + // Used in search dropdown in tree + @extend .context-menu; + ul li { + padding-left: 50px; + .checkbox { + $d: 0.7rem; + position: absolute; + left: $interiorMargin; + top: ($menuLineH - $d) / 1.5; + em { + height: $d; + width: $d; + &:before { + font-size: 7px !important; + height: $d; + width: $d; + line-height: $d; + } + } + } + &:before { // Type icon - left: 25px; - } - } + left: 25px; + } + } } .super-menu, @@ -168,50 +169,46 @@ } .super-menu { - $plw: 50%; - $prw: 100% - $plw; + $plw: 50%; + $prw: 100% - $plw; position: absolute; - width: 500px; - .w-menu { + .w-menu { align-items: stretch; display: flex; flex-direction: row; margin: $interiorMarginLg; - } - .col { + } + .col { box-sizing: border-box; flex: 1 1 auto; - max-height: 70vh; overflow-x: hidden; - &.menu-items { - border-right: 1px solid pullForward($colorMenuBg, 10%); + &.menu-items { + border-right: 1px solid pullForward($colorMenuBg, 10%); overflow-y: auto; - padding-right: $interiorMargin; - width: $plw; - ul { - li { - border-radius: $controlCr; - padding-left: 30px; - border-top: none; - } - } - } - &.menu-item-description { + padding-right: $interiorMargin; + width: $plw; + ul { + li { + border-radius: $controlCr; + padding-left: 30px; + border-top: none; + } + } + } + &.menu-item-description { + $p: $interiorMargin * 3; overflow-y: hidden; - padding: $interiorMargin * 5; - width: $prw; + padding: $p $p 0 $p; + width: $prw; + .desc-area { &.icon { color: $colorCreateMenuLgIcon; - font-size: 8em; - margin-bottom: $interiorMargin * 3; position: relative; text-align: center; } &.title { color: $colorCreateMenuText; - font-size: 1.2em; - margin-bottom: $interiorMargin * 2; } &.description { color: pushBack($colorCreateMenuText, 20%); @@ -219,68 +216,104 @@ line-height: 1.5em; } } - } - } + } + } + + .w-title-desc { + display: flex; + flex-direction: column; + overflow: hidden; // Height set in specific menu instances + } + + // Specific menu instances + &.l-create-menu { + width: 500px; + .col { + max-height: 70vh; + } + .w-title-desc { + height: 190px; + } + .desc-area { + &.icon { + font-size: 8em; + height: 135px; + margin-bottom: $interiorMargin * 3; + } + &.title { + font-size: 1.2em; + margin-bottom: $interiorMargin * 2; + } + } + } &.mini { width: 400px; .col { - height: 320px; max-height: 50vh; &.menu-items { font-size: 0.8em; } &.menu-item-description { - padding: $interiorMargin * 3; - .desc-area { - &.icon { - font-size: 4em; - } - &.title { - font-size: 1em; - } - } + $p: $interiorMargin * 2; + padding: $p $p 0 $p; + } + } + .w-title-desc { + height: 180px; + } + .desc-area { + &.icon { + font-size: 4em; + height: 70px; + margin-bottom: $interiorMargin * 3; + } + &.title { + font-size: 1em; + margin-bottom: $interiorMargin * 2; } } } } + .context-menu { - font-size: 0.80rem; + font-size: 0.80rem; } .context-menu-holder, .menu-holder { - position: absolute; - z-index: 120; - .context-menu-wrapper { - position: absolute; - height: 100%; - width: 100%; - } - &.go-left .context-menu, - &.go-left .menu { - right: 0; - } - &.go-up .context-menu, - &.go-up .menu { - bottom: 0; - } + position: absolute; + z-index: 120; + .context-menu-wrapper { + position: absolute; + height: 100%; + width: 100%; + } + &.go-left .context-menu, + &.go-left .menu { + right: 0; + } + &.go-up .context-menu, + &.go-up .menu { + bottom: 0; + } } .context-menu-holder { - pointer-events: none; - height: 200px; - width: 170px; + pointer-events: none; + height: 200px; + width: 170px; } .btn-bar.right .menu, .menus-to-left .menu { z-index: 79; - left: auto; - right: 0; - width: auto; + left: auto; + right: 0; + width: auto; } .menus-up .menu { - bottom: $btnStdH; top: auto; + bottom: $btnStdH; + top: auto; } diff --git a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html index fdd25d1e93..1609a07858 100644 --- a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html +++ b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html @@ -34,11 +34,13 @@
-
- {{ngModel.activeMetadata.name}} -
-
- {{ngModel.activeMetadata.description}} +
+
+ {{ngModel.activeMetadata.name}} +
+
+ {{ngModel.activeMetadata.description}} +
diff --git a/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html b/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html index af6b9c2b7d..9c698300c2 100644 --- a/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html +++ b/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html @@ -24,7 +24,7 @@ ng-click="modeController.toggle()"> {{ngModel.selected.name}}
-