mirror of
https://github.com/nasa/openmct.git
synced 2025-06-11 03:41:37 +00:00
[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;
This commit is contained in:
Charles Hacskaylo
parent
e9cb5cd639
commit
138cb199bb
@ -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>
|
||||||
|
|||||||
@ -33,11 +33,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col 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>
|
||||||
|
|||||||
@ -21,55 +21,56 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
/******************************************************** 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
@ -78,29 +79,29 @@
|
|||||||
@include boxShdw($shdwMenu);
|
@include boxShdw($shdwMenu);
|
||||||
@include txtShdw($shdwMenuText);
|
@include txtShdw($shdwMenuText);
|
||||||
padding: $interiorMarginSm 0;
|
padding: $interiorMarginSm 0;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
ul {
|
ul {
|
||||||
@include menuUlReset();
|
@include menuUlReset();
|
||||||
li {
|
li {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||||
color: $colorMenuFg;
|
color: $colorMenuFg;
|
||||||
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;
|
||||||
@ -108,8 +109,8 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
left: $interiorMargin * 2;
|
left: $interiorMargin * 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu,
|
.menu,
|
||||||
@ -117,46 +118,46 @@
|
|||||||
.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,
|
||||||
@ -168,50 +169,46 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.super-menu {
|
.super-menu {
|
||||||
$plw: 50%;
|
$plw: 50%;
|
||||||
$prw: 100% - $plw;
|
$prw: 100% - $plw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500px;
|
.w-menu {
|
||||||
.w-menu {
|
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: $interiorMarginLg;
|
margin: $interiorMarginLg;
|
||||||
}
|
}
|
||||||
.col {
|
.col {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
max-height: 70vh;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
&.menu-items {
|
&.menu-items {
|
||||||
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: $interiorMargin;
|
padding-right: $interiorMargin;
|
||||||
width: $plw;
|
width: $plw;
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
border-radius: $controlCr;
|
border-radius: $controlCr;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.menu-item-description {
|
&.menu-item-description {
|
||||||
|
$p: $interiorMargin * 3;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding: $interiorMargin * 5;
|
padding: $p $p 0 $p;
|
||||||
width: $prw;
|
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%);
|
||||||
@ -219,68 +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;
|
||||||
.col {
|
.col {
|
||||||
height: 320px;
|
|
||||||
max-height: 50vh;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,11 +34,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col 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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user