mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 09:52:04 +00:00
[Frontend] Tweaks and minor mods
WTD-894 Changed image CSS from contain to cover Modded default colors for text and telemetry elements to visibility; Moved click handler position in menu-button.html for better clickability; Conflicts: platform/commonUI/general/res/css/theme-espresso.css
This commit is contained in:
Charles Hacskaylo
Victor Woeltjen
parent
7c7f1c3dbc
commit
679e56d231
@ -424,7 +424,7 @@ span {
|
||||
width: 100%; }
|
||||
/* line 51, ../sass/_fixed-position.scss */
|
||||
.t-fixed-position .l-fixed-position-item .l-fixed-position-image {
|
||||
background-size: contain;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top; }
|
||||
/* line 57, ../sass/_fixed-position.scss */
|
||||
@ -434,7 +434,6 @@ span {
|
||||
font-size: 0.8rem; }
|
||||
/* line 62, ../sass/_fixed-position.scss */
|
||||
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
|
||||
overflow: auto;
|
||||
padding: 3px; }
|
||||
/* line 67, ../sass/_fixed-position.scss */
|
||||
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
|
||||
@ -1318,26 +1317,26 @@ label.checkbox.custom {
|
||||
/* line 316, ../sass/controls/_controls.scss */
|
||||
.btn-menu.btn-invoke-menu:hover {
|
||||
color: deepskyblue; }
|
||||
/* line 321, ../sass/controls/_controls.scss */
|
||||
/* line 325, ../sass/controls/_controls.scss */
|
||||
.btn-menu .type-icon {
|
||||
margin-right: 5px; }
|
||||
/* line 324, ../sass/controls/_controls.scss */
|
||||
/* line 328, ../sass/controls/_controls.scss */
|
||||
.btn-menu .menu {
|
||||
text-align: left; }
|
||||
/* line 327, ../sass/controls/_controls.scss */
|
||||
/* line 331, ../sass/controls/_controls.scss */
|
||||
.btn-menu .menu .ui-symbol.icon {
|
||||
width: 12px; }
|
||||
|
||||
/* line 333, ../sass/controls/_controls.scss */
|
||||
/* line 337, ../sass/controls/_controls.scss */
|
||||
.top-bar .btn-menu {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-right: 10px; }
|
||||
/* line 341, ../sass/controls/_controls.scss */
|
||||
/* line 345, ../sass/controls/_controls.scss */
|
||||
.top-bar .btn-menu.browse-btn {
|
||||
margin-right: 5px;
|
||||
padding-left: 35px; }
|
||||
/* line 344, ../sass/controls/_controls.scss */
|
||||
/* line 348, ../sass/controls/_controls.scss */
|
||||
.top-bar .btn-menu.browse-btn .badge {
|
||||
-webkit-border-radius: 4.5px;
|
||||
-moz-border-radius: 4.5px;
|
||||
@ -1356,20 +1355,20 @@ label.checkbox.custom {
|
||||
height: auto; }
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
/* line 361, ../sass/controls/_controls.scss */
|
||||
/* line 365, ../sass/controls/_controls.scss */
|
||||
.object-header {
|
||||
display: inline-block;
|
||||
font-size: 1em; }
|
||||
/* line 364, ../sass/controls/_controls.scss */
|
||||
/* line 368, ../sass/controls/_controls.scss */
|
||||
.object-header .title {
|
||||
color: white; }
|
||||
/* line 367, ../sass/controls/_controls.scss */
|
||||
/* line 371, ../sass/controls/_controls.scss */
|
||||
.object-header .type-icon {
|
||||
font-size: 1.5em;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 376, ../sass/controls/_controls.scss */
|
||||
/* line 380, ../sass/controls/_controls.scss */
|
||||
.top-bar .object-header,
|
||||
.object-browse-bar .object-header {
|
||||
font-size: 1.2em; }
|
||||
@ -1378,7 +1377,7 @@ label.checkbox.custom {
|
||||
display: inline-block; }
|
||||
|
||||
/******************************************************** VIEW-CONTROLS */
|
||||
/* line 387, ../sass/controls/_controls.scss */
|
||||
/* line 391, ../sass/controls/_controls.scss */
|
||||
.view-controls .view-type {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
@ -1392,16 +1391,16 @@ label.checkbox.custom {
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px; }
|
||||
/* line 398, ../sass/controls/_controls.scss */
|
||||
/* line 402, ../sass/controls/_controls.scss */
|
||||
.view-controls .view-type.cur {
|
||||
background: #666666; }
|
||||
|
||||
/* line 403, ../sass/controls/_controls.scss */
|
||||
/* line 407, ../sass/controls/_controls.scss */
|
||||
.edit-mode .top-bar .control-set.edit-view-controls {
|
||||
margin-right: 50px; }
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
/* line 414, ../sass/controls/_controls.scss */
|
||||
/* line 418, ../sass/controls/_controls.scss */
|
||||
.slider .slot {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
@ -1424,7 +1423,7 @@ label.checkbox.custom {
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0; }
|
||||
/* line 425, ../sass/controls/_controls.scss */
|
||||
/* line 429, ../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);
|
||||
@ -1472,12 +1471,12 @@ label.checkbox.custom {
|
||||
top: 5px; }
|
||||
.slider .knob:not(.disabled):hover:before {
|
||||
border-color: rgba(0, 153, 204, 0.9); }
|
||||
/* line 436, ../sass/controls/_controls.scss */
|
||||
/* line 440, ../sass/controls/_controls.scss */
|
||||
.slider .knob:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: 5px; }
|
||||
/* line 443, ../sass/controls/_controls.scss */
|
||||
/* line 447, ../sass/controls/_controls.scss */
|
||||
.slider .range {
|
||||
background: rgba(0, 153, 204, 0.6);
|
||||
cursor: ew-resize;
|
||||
@ -1488,12 +1487,12 @@ label.checkbox.custom {
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto; }
|
||||
/* line 453, ../sass/controls/_controls.scss */
|
||||
/* line 457, ../sass/controls/_controls.scss */
|
||||
.slider .range:hover {
|
||||
background: rgba(0, 153, 204, 0.7); }
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
/* line 461, ../sass/controls/_controls.scss */
|
||||
/* line 465, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
@ -1512,7 +1511,7 @@ label.checkbox.custom {
|
||||
height: 10px;
|
||||
width: 10px; }
|
||||
|
||||
/* line 467, ../sass/controls/_controls.scss */
|
||||
/* line 471, ../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);
|
||||
@ -1531,7 +1530,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 474, ../sass/controls/_controls.scss */
|
||||
/* line 478, ../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);
|
||||
@ -1539,7 +1538,7 @@ label.checkbox.custom {
|
||||
background-image: -o-linear-gradient(#808080, #737373 20px);
|
||||
background-image: linear-gradient(#808080, #737373 20px); }
|
||||
|
||||
/* line 479, ../sass/controls/_controls.scss */
|
||||
/* line 483, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(0, 0, 0, 0.4); }
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.l-fixed-position-image {
|
||||
background-size: contain;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
}
|
||||
@ -60,7 +60,7 @@
|
||||
font-size: 0.8rem;
|
||||
$p: $interiorMarginSm;
|
||||
&.l-static-text {
|
||||
overflow: auto;
|
||||
// overflow: auto;
|
||||
padding: $p;
|
||||
}
|
||||
&.l-telemetry {
|
||||
|
||||
@ -318,6 +318,10 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.l-click-area {
|
||||
// @include test();
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
@ -235,7 +235,7 @@ define(
|
||||
y: Math.floor(position.y / gridSize[1]),
|
||||
id: id,
|
||||
stroke: "transparent",
|
||||
color: "#717171",
|
||||
color: "#cccccc",
|
||||
titled: true,
|
||||
width: DEFAULT_DIMENSIONS[0],
|
||||
height: DEFAULT_DIMENSIONS[1]
|
||||
|
||||
@ -24,7 +24,7 @@ define(
|
||||
"fixed.text": {
|
||||
fill: "transparent",
|
||||
stroke: "transparent",
|
||||
color: "#717171"
|
||||
color: "#cccccc"
|
||||
}
|
||||
},
|
||||
DIALOGS = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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 ng-click="toggle.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}}
|
||||
@ -14,8 +14,8 @@
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in structure.options">
|
||||
<a href="" ng-click="structure.click(option.key); toggle.setState(false)">
|
||||
<li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
|
||||
<a href="">
|
||||
<span class="ui-symbol type-icon icon">
|
||||
{{option.glyph}}
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user