ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-13 04:38:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Markup and CSS mods to fix click area in btn-menu objects

Browse Source 
WTD-1002
WTD-942
Mods to markup and CSS to make click-area of menu buttons occupy full area of button
This commit is contained in:
Charles Hacskaylo
2015-03-06 10:55:40 -08:00
parent 17566be971
commit c640d6238b
7 changed files with 85 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,7 +138,7 @@ span {
*/ }
/* line 51, ../sass/_global.scss */
.abs {
.abs, .btn-menu span.l-click-area {
position: absolute;
top: 0;
right: 0;
@ -255,24 +255,27 @@ span {
.bar .icon.major {
margin-right: 5px; }
/* line 80, ../sass/user-environ/_layout.scss */
.bar.abs {
.bar.abs, .btn-menu span.bar.l-click-area {
text-wrap: none;
white-space: nowrap; }
/* line 84, ../sass/user-environ/_layout.scss */
.bar.abs.left,
.bar.abs .left {
.bar.abs.left, .btn-menu span.bar.left.l-click-area,
.bar.abs .left,
.btn-menu span.bar.l-click-area .left {
width: 45%;
right: auto; }
/* line 89, ../sass/user-environ/_layout.scss */
.bar.abs.right,
.bar.abs .right {
.bar.abs.right, .btn-menu span.bar.right.l-click-area,
.bar.abs .right,
.btn-menu span.bar.l-click-area .right {
width: 45%;
left: auto;
right: 0;
text-align: right; }
/* line 94, ../sass/user-environ/_layout.scss */
.bar.abs.right .icon.major,
.bar.abs .right .icon.major {
.bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major,
.bar.abs .right .icon.major,
.btn-menu span.bar.l-click-area .right .icon.major {
margin-left: 15px; }
/* line 104, ../sass/user-environ/_layout.scss */
@ -497,7 +500,7 @@ span {
color: #fff;
font-weight: normal !important; }
/* line 29, ../sass/_about.scss */
.t-about.l-about.abs {
.t-about.l-about.abs, .btn-menu span.t-about.l-about.l-click-area {
overflow: auto; }
/* line 34, ../sass/_about.scss */
.t-about .l-logo-holder {
@ -1314,37 +1317,40 @@ label.checkbox.custom {
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 303, ../sass/controls/_controls.scss */
.btn-menu.dropdown {
padding-right: 7px; }
/* line 308, ../sass/controls/_controls.scss */
padding-left: 5px;
padding-right: 5px; }
/* line 309, ../sass/controls/_controls.scss */
.btn-menu:not(.disabled):hover {
color: #cccccc; }
/* line 312, ../sass/controls/_controls.scss */
/* line 313, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu {
color: #0099cc;
padding: 0 5px; }
/* line 316, ../sass/controls/_controls.scss */
/* line 317, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu:hover {
color: deepskyblue; }
/* line 325, ../sass/controls/_controls.scss */
/* line 327, ../sass/controls/_controls.scss */
.btn-menu .type-icon {
margin-right: 5px; }
/* line 328, ../sass/controls/_controls.scss */
/* line 330, ../sass/controls/_controls.scss */
.btn-menu .menu {
position: absolute;
left: 0;
text-align: left; }
/* line 331, ../sass/controls/_controls.scss */
/* line 335, ../sass/controls/_controls.scss */
.btn-menu .menu .ui-symbol.icon {
width: 12px; }
/* line 337, ../sass/controls/_controls.scss */
/* line 341, ../sass/controls/_controls.scss */
.top-bar .btn-menu {
height: 35px;
line-height: 35px;
padding-right: 10px; }
/* line 345, ../sass/controls/_controls.scss */
/* line 349, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn {
margin-right: 5px;
padding-left: 35px; }
/* line 348, ../sass/controls/_controls.scss */
/* line 352, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn .badge {
-webkit-border-radius: 4.5px;
-moz-border-radius: 4.5px;
@ -1363,30 +1369,30 @@ label.checkbox.custom {
height: auto; }
/******************************************************** OBJECT-HEADER */
/* line 365, ../sass/controls/_controls.scss */
/* line 369, ../sass/controls/_controls.scss */
.object-header {
display: inline-block;
font-size: 1em; }
/* line 368, ../sass/controls/_controls.scss */
/* line 372, ../sass/controls/_controls.scss */
.object-header .title {
color: white; }
/* line 371, ../sass/controls/_controls.scss */
/* line 375, ../sass/controls/_controls.scss */
.object-header .type-icon {
font-size: 1.5em;
margin-right: 5px;
vertical-align: middle; }
/* line 380, ../sass/controls/_controls.scss */
/* line 384, ../sass/controls/_controls.scss */
.top-bar .object-header,
.object-browse-bar .object-header {
font-size: 1.1em; }
/* line 382, ../sass/controls/_controls.scss */
/* line 386, ../sass/controls/_controls.scss */
.top-bar .object-header span,
.object-browse-bar .object-header span {
display: inline-block; }
/******************************************************** VIEW-CONTROLS */
/* line 391, ../sass/controls/_controls.scss */
/* line 395, ../sass/controls/_controls.scss */
.view-controls .view-type {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -1400,16 +1406,16 @@ label.checkbox.custom {
line-height: 20px;
padding-left: 5px;
padding-right: 5px; }
/* line 402, ../sass/controls/_controls.scss */
/* line 406, ../sass/controls/_controls.scss */
.view-controls .view-type.cur {
background: #666666; }
/* line 407, ../sass/controls/_controls.scss */
/* line 411, ../sass/controls/_controls.scss */
.edit-mode .top-bar .control-set.edit-view-controls {
margin-right: 50px; }
/******************************************************** SLIDERS */
/* line 418, ../sass/controls/_controls.scss */
/* line 422, ../sass/controls/_controls.scss */
.slider .slot {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@ -1432,7 +1438,7 @@ label.checkbox.custom {
right: 0;
bottom: auto;
left: 0; }
/* line 429, ../sass/controls/_controls.scss */
/* line 433, ../sass/controls/_controls.scss */
.slider .knob {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1483,12 +1489,12 @@ label.checkbox.custom {
/* line 120, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 440, ../sass/controls/_controls.scss */
/* line 444, ../sass/controls/_controls.scss */
.slider .knob:before {
top: 1px;
bottom: 3px;
left: 5px; }
/* line 447, ../sass/controls/_controls.scss */
/* line 451, ../sass/controls/_controls.scss */
.slider .range {
background: rgba(0, 153, 204, 0.6);
cursor: ew-resize;
@ -1499,12 +1505,12 @@ label.checkbox.custom {
left: auto;
height: auto;
width: auto; }
/* line 457, ../sass/controls/_controls.scss */
/* line 461, ../sass/controls/_controls.scss */
.slider .range:hover {
background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */
/* line 465, ../sass/controls/_controls.scss */
/* line 469, ../sass/controls/_controls.scss */
::-webkit-scrollbar {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@ -1523,7 +1529,7 @@ label.checkbox.custom {
height: 10px;
width: 10px; }
/* line 471, ../sass/controls/_controls.scss */
/* line 475, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959 20px);
@ -1542,7 +1548,7 @@ label.checkbox.custom {
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border-top: 1px solid gray; }
/* line 478, ../sass/controls/_controls.scss */
/* line 482, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
background-image: -webkit-linear-gradient(#808080, #737373 20px);
@ -1550,7 +1556,7 @@ label.checkbox.custom {
background-image: -o-linear-gradient(#808080, #737373 20px);
background-image: linear-gradient(#808080, #737373 20px); }
/* line 483, ../sass/controls/_controls.scss */
/* line 487, ../sass/controls/_controls.scss */
::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); }
@ -2494,15 +2500,15 @@ input[type="text"] {
/* line 7, ../sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover {
border-color: #666666; }
/* line 11, ../sass/user-environ/_frame.scss */
.frame > .object-header.abs {
/* line 14, ../sass/user-environ/_frame.scss */
.frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
font-size: 0.75em;
height: 20px; }
/* line 15, ../sass/user-environ/_frame.scss */
.frame > .object-holder.abs {
/* line 18, ../sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
top: 23px; }
/* line 21, ../sass/user-environ/_frame.scss */
/* line 24, ../sass/user-environ/_frame.scss */
.edit-main .frame.child-frame.panel:hover {
border-color: #0099cc;
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
@ -2535,7 +2541,7 @@ input[type="text"] {
.edit-mode .top-bar .buttons-main {
white-space: nowrap; }
/* line 37, ../sass/user-environ/_top-bar.scss */
.edit-mode .top-bar .buttons-main.abs {
.edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
bottom: auto;
left: auto; }

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

@ -295,13 +295,14 @@ label.checkbox.custom {
.btn-menu {
$h: 20px;
$p: 7px;
$p: $interiorMargin;
$c: $colorBodyFg;
@include btnSubtle($colorBodyBg);
height: $h;
line-height: $h;
&.dropdown {
// padding-left: $p;
padding-left: $p;
padding-right: $p;
}
@ -318,8 +319,9 @@ label.checkbox.custom {
}
}
.l-click-area {
// @include test();
span.l-click-area {
// In markup, this element should not enclose anything.
@extend .abs;
}
.type-icon {
@ -327,6 +329,8 @@ label.checkbox.custom {
}
.menu {
// margin-left: (-1 * $p);
position: absolute;
left: 0;
text-align: left;
.ui-symbol.icon {
width: 12px;

3
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -7,6 +7,9 @@
&:hover {
border-color: lighten($bc, 10%);
}
.contents {
// overflow: hidden;
}
}
>.object-header.abs {
font-size: 0.75em;

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

@ -4,11 +4,12 @@
ng-if="view.length > 1"
ng-controller="ClickAwayController as toggle">
<span ng-click="toggle.toggle()">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
<span>{{ngModel.selected.name}}</span>
<span class='ui-symbol icon invoke-menu'>v</span>
</span>
<div class="menu dropdown" ng-show="toggle.isActive()">
<ul>

4
platform/features/plot/res/templates/plot.html
View File

@ -91,11 +91,11 @@
ng-if="plot.getModeOptions().length > 1"
ng-controller="ClickAwayController as toggle">
<span ng-click="toggle.toggle()">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
<span>{{plot.getMode().name}}</span>
<span class='ui-symbol icon invoke-menu'>v</span>
</span>
<div class="menu dropdown" ng-show="toggle.isActive()">
<ul>

5
platform/forms/res/templates/controls/color.html
View File

@ -3,13 +3,14 @@
ng-controller="ClickAwayController as toggle"
>
<span ng-click="toggle.toggle()">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="ui-symbol icon">{{structure.glyph}}</span>
<span class="title-label" ng-if="structure.text">
{{structure.text}}
</span>
<span class='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
</span>
<div
class="menu dropdown l-color-palette"

4
platform/forms/res/templates/controls/menu-button.html
View File

@ -1,7 +1,8 @@
<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
ng-controller="ClickAwayController as toggle">
<span class="l-click-area" ng-click="toggle.toggle()">
<span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="ui-symbol icon">{{structure.glyph}}</span>
<span class="title-label" ng-if="structure.text">
{{structure.text}}
@ -10,7 +11,6 @@
ng-if="!structure.text">
v
</span>
</span>
<div class="menu dropdown" ng-show="toggle.isActive()">
<ul>