mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 16:36:13 +00:00
[Frontend] Markup and CSS mods to fix click area in btn-menu objects
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
parent
17566be971
commit
c640d6238b
@ -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; }
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
.contents {
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
>.object-header.abs {
|
||||
font-size: 0.75em;
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
ng-if="view.length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span ng-click="toggle.toggle()">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
|
||||
@ -91,11 +91,11 @@
|
||||
ng-if="plot.getModeOptions().length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span ng-click="toggle.toggle()">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
|
||||
@ -3,13 +3,14 @@
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
|
||||
<span ng-click="toggle.toggle()">
|
||||
<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 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>
|
||||
|
||||
|
||||
<div
|
||||
class="menu dropdown l-color-palette"
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<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="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 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>
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user