ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-05 17:01:41 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1733 from nasa/create-menu-1729

Browse Source 
Review and integrate super-menu fixes and enhancements
This commit is contained in:
Victor Woeltjen 2017-09-25 16:29:54 -07:00 committed by GitHub
commit 2baf3f8bb0
11 changed files with 237 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/edit/res/templates/create/create-button.html
View File

@ -23,7 +23,7 @@
<div class="s-menu-button major create-button" ng-click="createController.toggle()"> <div class="s-menu-button major create-button" ng-click="createController.toggle()">
<span class="title-label">Create</span> <span class="title-label">Create</span>
</div> </div>
<div class="menu super-menu" ng-show="createController.isActive()"> <div class="menu super-menu l-create-menu" ng-show="createController.isActive()">
<mct-representation mct-object="domainObject" key="'create-menu'"> <mct-representation mct-object="domainObject" key="'create-menu'">
</mct-representation> </mct-representation>
</div> </div>

18
platform/commonUI/edit/res/templates/create/create-menu.html
View File

@ -19,8 +19,8 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="contents" ng-controller="CreateMenuController"> <div class="w-menu" ng-controller="CreateMenuController">
<div class="pane left menu-items"> <div class="col menu-items">
<ul> <ul>
<li ng-repeat="createAction in createActions" ng-click="createAction.perform()"> <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
<a ng-mouseover="representation.activeMetadata = createAction.getMetadata()" <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
@ -31,13 +31,15 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="pane right menu-item-description"> <div class="col menu-item-description">
<div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div> <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
<div class="desc-area title"> <div class="w-title-desc">
{{representation.activeMetadata.name}} <div class="desc-area title">
</div> {{representation.activeMetadata.name}}
<div class="desc-area description"> </div>
{{representation.activeMetadata.description}} <div class="desc-area description">
{{representation.activeMetadata.description}}
</div>
</div> </div>
</div> </div>
</div> </div>

6
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -753,11 +753,15 @@ body.desktop {
} }
.overlay ::-webkit-scrollbar-thumb { .overlay ::-webkit-scrollbar-thumb {
$lr: 15%;
background: $scrollbarThumbColorOverlay; background: $scrollbarThumbColorOverlay;
&:hover { background: $scrollbarThumbColorOverlayHov; } &:hover { background: $scrollbarThumbColorOverlayHov; }
} }
.menu ::-webkit-scrollbar-thumb {
background: $scrollbarThumbColorMenu;
&:hover { background: $scrollbarThumbColorMenuHov; }
}
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: $scrollbarTrackColorBg; background: $scrollbarTrackColorBg;
} }

361
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -21,92 +21,87 @@
*****************************************************************************/ *****************************************************************************/
/******************************************************** MENU BUTTONS */ /******************************************************** MENU BUTTONS */
.s-menu-button { .s-menu-button {
// Formerly .btn-menu // Formerly .btn-menu
@extend .s-button; @extend .s-button;
span.l-click-area { span.l-click-area {
// In markup, this element should not enclose anything. // In markup, this element should not enclose anything.
@extend .abs; @extend .abs;
} }
.icon { .icon {
font-size: 16px; //120%; font-size: 16px; //120%;
} }
.title-label { .title-label {
margin-left: $interiorMarginSm; margin-left: $interiorMarginSm;
} }
.color-swatch { .color-swatch {
// Used in color menu buttons in toolbar // Used in color menu buttons in toolbar
$d: 10px; $d: 10px;
display: inline-block; display: inline-block;
border: 1px solid rgba($colorBtnFg, 0.2); border: 1px solid rgba($colorBtnFg, 0.2);
height: $d; width: $d; height: $d;
width: $d;
vertical-align: middle; vertical-align: middle;
margin-left: $interiorMarginSm; margin-left: $interiorMarginSm;
margin-top: -2px; margin-top: -2px;
} }
&:after { &:after {
// Adds the downward facing 'context available / invoke menu' arrow element // Adds the downward facing 'context available / invoke menu' arrow element
@include contextArrow(); @include contextArrow();
color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
} }
&.create-button { &.create-button {
@extend .icon-plus; @extend .icon-plus;
.title-label { .title-label {
font-size: 1rem; font-size: 1rem;
} }
} }
.menu { .menu {
left: 0; left: 0;
text-align: left; text-align: left;
} }
} }
/******************************************************** MENUS THEMSELVES */ /******************************************************** MENUS THEMSELVES */
.menu-element { .menu-element {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
}
.s-menu {
border-radius: $basicCr;
@include containerSubtle($colorMenuBg, $colorMenuFg);
@include boxShdw($shdwMenu);
@include txtShdw($shdwMenuText);
padding: $interiorMarginSm 0;
} }
.menu { .menu {
// TODO: reduce size of icons border-radius: $basicCr;
@extend .s-menu; @include containerSubtle($colorMenuBg, $colorMenuFg);
display: block; @include boxShdw($shdwMenu);
position: absolute; @include txtShdw($shdwMenuText);
z-index: 10; padding: $interiorMarginSm 0;
ul { display: block;
@include menuUlReset(); position: absolute;
li { z-index: 10;
box-sizing: border-box; ul {
border-top: 1px solid pullForward($colorMenuBg, 10%); @include menuUlReset();
li {
box-sizing: border-box;
border-top: 1px solid pullForward($colorMenuBg, 10%);
color: $colorMenuFg; color: $colorMenuFg;
//color: pullForward($colorMenuBg, 60%); line-height: $menuLineH;
line-height: $menuLineH; padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW; position: relative;
position: relative; white-space: nowrap;
white-space: nowrap; &:first-child {
&:first-child { border: none;
border: none; }
} &:hover {
&:hover { background: $colorMenuHovBg;
background: $colorMenuHovBg; color: $colorMenuHovFg;
color: $colorMenuHovFg;
&:before { &:before {
color: $colorMenuHovIc; color: $colorMenuHovIc;
} }
} }
&:before { &:before {
@extend .ui-symbol; @extend .ui-symbol;
@extend .type-icon; @extend .type-icon;
@ -114,8 +109,8 @@
display: inline-block; display: inline-block;
left: $interiorMargin * 2; left: $interiorMargin * 2;
} }
} }
} }
} }
.menu, .menu,
@ -123,94 +118,97 @@
.context-menu, .context-menu,
.super-menu, .super-menu,
.s-menu-button .menu { .s-menu-button .menu {
pointer-events: auto; pointer-events: auto;
ul li { ul li {
a.menu-item-a { a.menu-item-a {
color: $colorMenuFg; color: $colorMenuFg;
display: block; display: block;
} }
&:before, &:before,
a.menu-item-a:before { a.menu-item-a:before {
color: $colorMenuIc; color: $colorMenuIc;
left: $interiorMargin; left: $interiorMargin;
} }
} }
} }
.checkbox-menu { .checkbox-menu {
// Used in search dropdown in tree // Used in search dropdown in tree
@extend .context-menu; @extend .context-menu;
ul li { ul li {
padding-left: 50px; padding-left: 50px;
.checkbox { .checkbox {
$d: 0.7rem; $d: 0.7rem;
position: absolute; position: absolute;
left: $interiorMargin; left: $interiorMargin;
top: ($menuLineH - $d) / 1.5; top: ($menuLineH - $d) / 1.5;
em { em {
height: $d; height: $d;
width: $d; width: $d;
&:before { &:before {
font-size: 7px !important; font-size: 7px !important;
height: $d; height: $d;
width: $d; width: $d;
line-height: $d; line-height: $d;
} }
} }
} }
&:before { &:before {
// Type icon // Type icon
left: 25px; left: 25px;
} }
} }
}
.super-menu,
.super-menu > mct-representation,
.super-menu > .contents {
box-sizing: border-box;
display: block;
position: relative;
} }
.super-menu { .super-menu {
$w: 500px; $plw: 50%;
$h: $w - 20; $prw: 100% - $plw;
$plw: 50%; position: absolute;
$prw: 50%; .w-menu {
display: block; align-items: stretch;
width: $w; display: flex;
height: $h; flex-direction: row;
.contents { margin: $interiorMarginLg;
@include absPosDefault($interiorMargin); }
} .col {
.pane { box-sizing: border-box;
box-sizing: border-box; flex: 1 1 auto;
&.menu-items { overflow-x: hidden;
border-right: 1px solid pullForward($colorMenuBg, 10%); &.menu-items {
left: 0; border-right: 1px solid pullForward($colorMenuBg, 10%);
padding-right: $interiorMargin; overflow-y: auto;
right: auto; padding-right: $interiorMargin;
width: $plw; width: $plw;
overflow-x: hidden; ul {
overflow-y: auto; li {
ul { border-radius: $controlCr;
li { padding-left: 30px;
border-radius: $controlCr; border-top: none;
padding-left: 30px; }
border-top: none; }
} }
} &.menu-item-description {
} $p: $interiorMargin * 3;
&.menu-item-description { overflow-y: hidden;
left: auto; padding: $p $p 0 $p;
right: 0; width: $prw;
padding: $interiorMargin * 5;
width: $prw;
.desc-area { .desc-area {
&.icon { &.icon {
color: $colorCreateMenuLgIcon; color: $colorCreateMenuLgIcon;
font-size: 8em;
margin-bottom: $interiorMargin * 3;
position: relative; position: relative;
text-align: center; text-align: center;
} }
&.title { &.title {
color: $colorCreateMenuText; color: $colorCreateMenuText;
font-size: 1.2em;
margin-bottom: $interiorMargin * 2;
} }
&.description { &.description {
color: pushBack($colorCreateMenuText, 20%); color: pushBack($colorCreateMenuText, 20%);
@ -218,67 +216,104 @@
line-height: 1.5em; 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 { &.mini {
width: 400px; width: 400px;
height: 300px; .col {
.pane { max-height: 50vh;
&.menu-items { &.menu-items {
font-size: 0.8em; font-size: 0.8em;
} }
&.menu-item-description { &.menu-item-description {
padding: $interiorMargin * 3; $p: $interiorMargin * 2;
.desc-area { padding: $p $p 0 $p;
&.icon { }
font-size: 4em; }
} .w-title-desc {
&.title { height: 180px;
font-size: 1em; }
} .desc-area {
} &.icon {
font-size: 4em;
height: 70px;
margin-bottom: $interiorMargin * 3;
}
&.title {
font-size: 1em;
margin-bottom: $interiorMargin * 2;
} }
} }
} }
} }
.context-menu { .context-menu {
font-size: 0.80rem; font-size: 0.80rem;
} }
.context-menu-holder, .context-menu-holder,
.menu-holder { .menu-holder {
position: absolute; position: absolute;
z-index: 120; z-index: 120;
.context-menu-wrapper { .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
&.go-left .context-menu, &.go-left .context-menu,
&.go-left .menu { &.go-left .menu {
right: 0; right: 0;
} }
&.go-up .context-menu, &.go-up .context-menu,
&.go-up .menu { &.go-up .menu {
bottom: 0; bottom: 0;
} }
} }
.context-menu-holder { .context-menu-holder {
pointer-events: none; pointer-events: none;
height: 200px; height: 200px;
width: 170px; width: 170px;
} }
.btn-bar.right .menu, .btn-bar.right .menu,
.menus-to-left .menu { .menus-to-left .menu {
z-index: 79; z-index: 79;
left: auto; left: auto;
right: 0; right: 0;
width: auto; width: auto;
} }
.menus-up .menu { .menus-up .menu {
bottom: $btnStdH; top: auto; bottom: $btnStdH;
top: auto;
} }

2
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -156,6 +156,8 @@
left: 0; left: 0;
right: 0; right: 0;
overflow: auto; overflow: auto;
padding-right: $interiorMargin;
padding-bottom: $interiorMargin;
.field.l-input-med { .field.l-input-med {
input[type='text'] { input[type='text'] {
width: 100%; width: 100%;

8
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -201,13 +201,15 @@ $shdwItemTreeIcon: 0.6;
$colorThumbHoverBg: $colorItemTreeHoverBg; $colorThumbHoverBg: $colorItemTreeHoverBg;
// Scrollbar // Scrollbar
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; $scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
$scrollbarThumbColor: pullForward($colorBodyBg, 10%); $scrollbarThumbColor: pullForward($colorBodyBg, 10%);
$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%); $scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%); $scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%); $scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
// All splitterD* values MUST both be either odd or even numbers // All splitterD* values MUST both be either odd or even numbers

4
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -201,13 +201,15 @@ $shdwItemTreeIcon: none;
$colorThumbHoverBg: $colorItemTreeHoverBg; $colorThumbHoverBg: $colorItemTreeHoverBg;
// Scrollbar // Scrollbar
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
$scrollbarTrackColorBg: rgba(#000, 0.2); $scrollbarTrackColorBg: rgba(#000, 0.2);
$scrollbarThumbColor: darken($colorBodyBg, 50%); $scrollbarThumbColor: darken($colorBodyBg, 50%);
$scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorHov: $colorKey;
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%); $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov; $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
// All splitterD* values MUST both be either odd or even numbers // All splitterD* values MUST both be either odd or even numbers

18
platform/features/conductor/core/res/templates/mode-selector/mode-menu.html
View File

@ -19,8 +19,8 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="contents"> <div class="w-menu">
<div class="pane left menu-items"> <div class="col menu-items">
<ul> <ul>
<li ng-repeat="metadata in ngModel.options" <li ng-repeat="metadata in ngModel.options"
ng-click="ngModel.select(metadata)"> ng-click="ngModel.select(metadata)">
@ -32,13 +32,15 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="pane right menu-item-description"> <div class="col menu-item-description">
<div class="desc-area ui-symbol icon type-icon {{ngModel.activeMetadata.cssClass}}"></div> <div class="desc-area ui-symbol icon type-icon {{ngModel.activeMetadata.cssClass}}"></div>
<div class="desc-area title"> <div class="w-title-desc">
{{ngModel.activeMetadata.name}} <div class="desc-area title">
</div> {{ngModel.activeMetadata.name}}
<div class="desc-area description"> </div>
{{ngModel.activeMetadata.description}} <div class="desc-area description">
{{ngModel.activeMetadata.description}}
</div>
</div> </div>
</div> </div>
</div> </div>

2
platform/features/conductor/core/res/templates/mode-selector/mode-selector.html
View File

@ -24,7 +24,7 @@
ng-click="modeController.toggle()"> ng-click="modeController.toggle()">
<span class="title-label">{{ngModel.selected.name}}</span> <span class="title-label">{{ngModel.selected.name}}</span>
</div> </div>
<div class="menu super-menu mini mode-selector-menu" <div class="menu super-menu mini l-mode-selector-menu"
ng-show="modeController.isActive()"> ng-show="modeController.isActive()">
<mct-include key="'mode-menu'" <mct-include key="'mode-menu'"
ng-model="ngModel"> ng-model="ngModel">

2
platform/features/conductor/core/src/ui/TimeConductorController.js
View File

@ -201,7 +201,7 @@ define(
var options = [{ var options = [{
key: 'fixed', key: 'fixed',
name: 'Fixed Timespan Mode', 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' cssClass: 'icon-calendar'
}]; }];
var clocks = {}; var clocks = {};

3
src/plugins/utcTimeSystem/LocalClock.js
View File

@ -37,8 +37,7 @@ define(['EventEmitter'], function (EventEmitter) {
this.key = 'local'; this.key = 'local';
this.cssClass = 'icon-clock'; this.cssClass = 'icon-clock';
this.name = 'Local Clock'; this.name = 'Local Clock';
this.description = "Updates every second, providing UTC timestamps from " + this.description = "Provides UTC timestamps every second from the local system clock.";
"user's local computer.";
this.period = period; this.period = period;
this.timeoutHandle = undefined; this.timeoutHandle = undefined;