ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 23:28:14 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Frontend] Fixes for dropdown menu click issues

Browse Source 
WTD-1404
WTD-1379
Context menu and view switcher menu fixed;
Removed <a> with <li> and put ng-click on <li>
This commit is contained in:
Charles Hacskaylo
2015-06-30 14:12:24 -07:00
parent 06cf199872
commit 9b26a896d3
4 changed files with 50 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -2532,29 +2532,24 @@ label.checkbox.custom {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #737373; border-top: 1px solid #737373;
color: #d9d9d9;
line-height: 1.4rem; line-height: 1.4rem;
padding: 3px 10px 3px 30px; padding: 3px 10px 3px 30px;
white-space: nowrap; } white-space: nowrap; }
/* line 45, ../sass/controls/_menus.scss */ /* line 46, ../sass/controls/_menus.scss */
.menu-element .menu ul li:first-child { .menu-element .menu ul li:first-child {
border: none; } border: none; }
/* line 48, ../sass/controls/_menus.scss */ /* line 49, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover { .menu-element .menu ul li:hover {
background: #737373; } background: #737373;
/* line 50, ../sass/controls/_menus.scss */ color: #fff; }
.menu-element .menu ul li:hover a { /* line 55, ../sass/controls/_menus.scss */
color: #fff; }
/* line 53, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover .icon { .menu-element .menu ul li:hover .icon {
color: #33ccff; } color: #33ccff; }
/* line 57, ../sass/controls/_menus.scss */ /* line 63, ../sass/controls/_menus.scss */
.menu-element .menu ul li a {
color: #d9d9d9;
display: block; }
/* line 61, ../sass/controls/_menus.scss */
.menu-element .menu ul li .type-icon { .menu-element .menu ul li .type-icon {
left: 10px; } left: 10px; }
/* line 68, ../sass/controls/_menus.scss */ /* line 70, ../sass/controls/_menus.scss */
.menu-element .context-menu, .menu-element .context-menu,
.menu-element .super-menu { .menu-element .super-menu {
pointer-events: auto; pointer-events: auto;
@ -2581,32 +2576,32 @@ label.checkbox.custom {
.menu-element .context-menu.btn-menu .invoke-menu, .menu-element .context-menu.btn-menu .invoke-menu,
.menu-element .super-menu.btn-menu .invoke-menu { .menu-element .super-menu.btn-menu .invoke-menu {
color: #b0b0b0; } color: #b0b0b0; }
/* line 76, ../sass/controls/_menus.scss */ /* line 78, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li, .menu-element .context-menu ul li,
.menu-element .super-menu ul li { .menu-element .super-menu ul li {
padding-left: 25px; } padding-left: 25px; }
/* line 78, ../sass/controls/_menus.scss */ /* line 80, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li a, .menu-element .context-menu ul li a,
.menu-element .super-menu ul li a { .menu-element .super-menu ul li a {
color: white; } color: white; }
/* line 79, ../sass/controls/_menus.scss */ /* line 81, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .icon, .menu-element .context-menu ul li .icon,
.menu-element .super-menu ul li .icon { .menu-element .super-menu ul li .icon {
color: #24c8ff; } color: #24c8ff; }
/* line 82, ../sass/controls/_menus.scss */ /* line 84, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li .type-icon, .menu-element .context-menu ul li .type-icon,
.menu-element .super-menu ul li .type-icon { .menu-element .super-menu ul li .type-icon {
left: 5px; } left: 5px; }
/* line 85, ../sass/controls/_menus.scss */ /* line 87, ../sass/controls/_menus.scss */
.menu-element .context-menu ul li:hover .icon, .menu-element .context-menu ul li:hover .icon,
.menu-element .super-menu ul li:hover .icon { .menu-element .super-menu ul li:hover .icon {
color: #3dcfff; } color: #3dcfff; }
/* line 92, ../sass/controls/_menus.scss */ /* line 94, ../sass/controls/_menus.scss */
.menu-element .super-menu { .menu-element .super-menu {
display: block; display: block;
width: 500px; width: 500px;
height: 480px; } height: 480px; }
/* line 102, ../sass/controls/_menus.scss */ /* line 104, ../sass/controls/_menus.scss */
.menu-element .super-menu .contents { .menu-element .super-menu .contents {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -2616,12 +2611,12 @@ label.checkbox.custom {
left: 5px; left: 5px;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 105, ../sass/controls/_menus.scss */ /* line 107, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane { .menu-element .super-menu .pane {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
/* line 107, ../sass/controls/_menus.scss */ /* line 109, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.left { .menu-element .super-menu .pane.left {
border-right: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);
left: 0; left: 0;
@ -2630,23 +2625,23 @@ label.checkbox.custom {
width: 50%; width: 50%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
/* line 117, ../sass/controls/_menus.scss */ /* line 119, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.left ul li { .menu-element .super-menu .pane.left ul li {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
padding-left: 30px; padding-left: 30px;
border-top: none; } border-top: none; }
/* line 124, ../sass/controls/_menus.scss */ /* line 126, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.right { .menu-element .super-menu .pane.right {
left: auto; left: auto;
right: 0; right: 0;
padding: 25px; padding: 25px;
width: 50%; } width: 50%; }
/* line 130, ../sass/controls/_menus.scss */ /* line 132, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.right .icon { .menu-element .super-menu .pane.right .icon {
color: #fff; } color: #fff; }
/* line 137, ../sass/controls/_menus.scss */ /* line 139, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.icon { .menu-element .super-menu .menu-item-description .desc-area.icon {
position: relative; position: relative;
font-size: 8em; font-size: 8em;
@ -2655,40 +2650,40 @@ label.checkbox.custom {
line-height: 150px; line-height: 150px;
margin-bottom: 25px; margin-bottom: 25px;
text-align: center; } text-align: center; }
/* line 147, ../sass/controls/_menus.scss */ /* line 149, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.title { .menu-element .super-menu .menu-item-description .desc-area.title {
color: #fff; color: #fff;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 0.5em; } margin-bottom: 0.5em; }
/* line 152, ../sass/controls/_menus.scss */ /* line 154, ../sass/controls/_menus.scss */
.menu-element .super-menu .menu-item-description .desc-area.description { .menu-element .super-menu .menu-item-description .desc-area.description {
color: #fff; color: #fff;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.5em; } line-height: 1.5em; }
/* line 161, ../sass/controls/_menus.scss */ /* line 163, ../sass/controls/_menus.scss */
.menu-element .context-menu { .menu-element .context-menu {
font-size: 0.80rem; } font-size: 0.80rem; }
/* line 166, ../sass/controls/_menus.scss */ /* line 168, ../sass/controls/_menus.scss */
.context-menu-holder { .context-menu-holder {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
height: 200px; height: 200px;
width: 170px; width: 170px;
z-index: 70; } z-index: 70; }
/* line 172, ../sass/controls/_menus.scss */ /* line 174, ../sass/controls/_menus.scss */
.context-menu-holder .context-menu-wrapper { .context-menu-holder .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* line 179, ../sass/controls/_menus.scss */ /* line 181, ../sass/controls/_menus.scss */
.context-menu-holder.go-left .context-menu { .context-menu-holder.go-left .context-menu {
right: 0; } right: 0; }
/* line 180, ../sass/controls/_menus.scss */ /* line 182, ../sass/controls/_menus.scss */
.context-menu-holder.go-up .context-menu { .context-menu-holder.go-up .context-menu {
bottom: 0; } bottom: 0; }
/* line 183, ../sass/controls/_menus.scss */ /* line 185, ../sass/controls/_menus.scss */
.btn-bar.right .menu, .btn-bar.right .menu,
.menus-to-left .menu { .menus-to-left .menu {
left: auto; left: auto;

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

@ -39,6 +39,7 @@
li { li {
@include box-sizing(border-box); @include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%); border-top: 1px solid lighten($bg, 20%);
color: lighten($bg, 60%);
line-height: $menuLineH; line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW; padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
white-space: nowrap; white-space: nowrap;
@ -47,17 +48,18 @@
} }
&:hover { &:hover {
background: $bgHover; background: $bgHover;
a { color: $colorKeyFg;
color: $colorKeyFg; //a {
} // color: $colorKeyFg;
//}
.icon { .icon {
color: lighten($iconColor, 20%); color: lighten($iconColor, 20%);
} }
} }
a { //a {
color: lighten($bg, 60%); // color: lighten($bg, 60%);
display: block; // display: block;
} //}
.type-icon { .type-icon {
left: $interiorMargin * 2; left: $interiorMargin * 2;
} }

18
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -20,7 +20,6 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="ViewSwitcherController"> <span ng-controller="ViewSwitcherController">
<div <div
class="view-switcher menu-element btn btn-menu dropdown click-invoke" class="view-switcher menu-element btn btn-menu dropdown click-invoke"
ng-if="view.length > 1" ng-if="view.length > 1"
@ -40,21 +39,12 @@
<div class="menu dropdown" ng-show="toggle.isActive()"> <div class="menu dropdown" ng-show="toggle.isActive()">
<ul> <ul>
<li ng-repeat="option in view"> <li ng-repeat="option in view"
<a ng-click="ngModel.selected = option; toggle.setState(false)"> ng-click="ngModel.selected = option; toggle.setState(false)">
<span class="ui-symbol type-icon icon">{{option.glyph}}</span> <span class="ui-symbol type-icon icon">{{option.glyph}}</span>
{{option.name}} {{option.name}}
</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- CH commented out 2/24/15 - really don't think we need this. Single view is what it is. -->
<!--span class="btn"
ng-if="view.length === 1">
<span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
<span>{{ngModel.selected.name}}</span>
</span-->
</span> </span>

17
platform/commonUI/general/res/templates/menu/context-menu.html
View File

@ -23,15 +23,14 @@
<div class="menu context-menu dropdown"> <div class="menu context-menu dropdown">
<ul> <ul>
<li ng-repeat="menuAction in menuActions"> <li ng-repeat="menuAction in menuActions"
<a href="" ng-click="menuAction.perform()"
ng-click="menuAction.perform()" title="{{menuAction.getMetadata().description}}"
title="{{menuAction.getMetadata().description}}"> >
<span class="ui-symbol icon type-icon"> <span class="ui-symbol icon type-icon">
{{menuAction.getMetadata().glyph}} {{menuAction.getMetadata().glyph}}
</span> </span>
{{menuAction.getMetadata().name}} {{menuAction.getMetadata().name}}
</a>
</li> </li>
</ul> </ul>