ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-22 10:11:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Tweaks and minor mods

Browse Source 
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 2015-02-26 11:04:21 -08:00 committed by Victor Woeltjen
parent 7c7f1c3dbc
commit 679e56d231
6 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -424,7 +424,7 @@ span {
width: 100%; } width: 100%; }
/* line 51, ../sass/_fixed-position.scss */ /* line 51, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-image { .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
background-size: contain; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; } background-position: left top; }
/* line 57, ../sass/_fixed-position.scss */ /* line 57, ../sass/_fixed-position.scss */
@ -434,7 +434,6 @@ span {
font-size: 0.8rem; } font-size: 0.8rem; }
/* line 62, ../sass/_fixed-position.scss */ /* line 62, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
overflow: auto;
padding: 3px; } padding: 3px; }
/* line 67, ../sass/_fixed-position.scss */ /* line 67, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem { .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 */ /* line 316, ../sass/controls/_controls.scss */
.btn-menu.btn-invoke-menu:hover { .btn-menu.btn-invoke-menu:hover {
color: deepskyblue; } color: deepskyblue; }
/* line 321, ../sass/controls/_controls.scss */ /* line 325, ../sass/controls/_controls.scss */
.btn-menu .type-icon { .btn-menu .type-icon {
margin-right: 5px; } margin-right: 5px; }
/* line 324, ../sass/controls/_controls.scss */ /* line 328, ../sass/controls/_controls.scss */
.btn-menu .menu { .btn-menu .menu {
text-align: left; } text-align: left; }
/* line 327, ../sass/controls/_controls.scss */ /* line 331, ../sass/controls/_controls.scss */
.btn-menu .menu .ui-symbol.icon { .btn-menu .menu .ui-symbol.icon {
width: 12px; } width: 12px; }
/* line 333, ../sass/controls/_controls.scss */ /* line 337, ../sass/controls/_controls.scss */
.top-bar .btn-menu { .top-bar .btn-menu {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding-right: 10px; } padding-right: 10px; }
/* line 341, ../sass/controls/_controls.scss */ /* line 345, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn { .top-bar .btn-menu.browse-btn {
margin-right: 5px; margin-right: 5px;
padding-left: 35px; } padding-left: 35px; }
/* line 344, ../sass/controls/_controls.scss */ /* line 348, ../sass/controls/_controls.scss */
.top-bar .btn-menu.browse-btn .badge { .top-bar .btn-menu.browse-btn .badge {
-webkit-border-radius: 4.5px; -webkit-border-radius: 4.5px;
-moz-border-radius: 4.5px; -moz-border-radius: 4.5px;
@ -1356,20 +1355,20 @@ label.checkbox.custom {
height: auto; } height: auto; }
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
/* line 361, ../sass/controls/_controls.scss */ /* line 365, ../sass/controls/_controls.scss */
.object-header { .object-header {
display: inline-block; display: inline-block;
font-size: 1em; } font-size: 1em; }
/* line 364, ../sass/controls/_controls.scss */ /* line 368, ../sass/controls/_controls.scss */
.object-header .title { .object-header .title {
color: white; } color: white; }
/* line 367, ../sass/controls/_controls.scss */ /* line 371, ../sass/controls/_controls.scss */
.object-header .type-icon { .object-header .type-icon {
font-size: 1.5em; font-size: 1.5em;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; } vertical-align: middle; }
/* line 376, ../sass/controls/_controls.scss */ /* line 380, ../sass/controls/_controls.scss */
.top-bar .object-header, .top-bar .object-header,
.object-browse-bar .object-header { .object-browse-bar .object-header {
font-size: 1.2em; } font-size: 1.2em; }
@ -1378,7 +1377,7 @@ label.checkbox.custom {
display: inline-block; } display: inline-block; }
/******************************************************** VIEW-CONTROLS */ /******************************************************** VIEW-CONTROLS */
/* line 387, ../sass/controls/_controls.scss */ /* line 391, ../sass/controls/_controls.scss */
.view-controls .view-type { .view-controls .view-type {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -1392,16 +1391,16 @@ label.checkbox.custom {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; } padding-right: 5px; }
/* line 398, ../sass/controls/_controls.scss */ /* line 402, ../sass/controls/_controls.scss */
.view-controls .view-type.cur { .view-controls .view-type.cur {
background: #666666; } background: #666666; }
/* line 403, ../sass/controls/_controls.scss */ /* line 407, ../sass/controls/_controls.scss */
.edit-mode .top-bar .control-set.edit-view-controls { .edit-mode .top-bar .control-set.edit-view-controls {
margin-right: 50px; } margin-right: 50px; }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 414, ../sass/controls/_controls.scss */ /* line 418, ../sass/controls/_controls.scss */
.slider .slot { .slider .slot {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
@ -1424,7 +1423,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: auto; bottom: auto;
left: 0; } left: 0; }
/* line 425, ../sass/controls/_controls.scss */ /* line 429, ../sass/controls/_controls.scss */
.slider .knob { .slider .knob {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
background-image: -webkit-linear-gradient(#4d4d4d, #404040); background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@ -1472,12 +1471,12 @@ label.checkbox.custom {
top: 5px; } top: 5px; }
.slider .knob:not(.disabled):hover:before { .slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 436, ../sass/controls/_controls.scss */ /* line 440, ../sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
bottom: 3px; bottom: 3px;
left: 5px; } left: 5px; }
/* line 443, ../sass/controls/_controls.scss */ /* line 447, ../sass/controls/_controls.scss */
.slider .range { .slider .range {
background: rgba(0, 153, 204, 0.6); background: rgba(0, 153, 204, 0.6);
cursor: ew-resize; cursor: ew-resize;
@ -1488,12 +1487,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 453, ../sass/controls/_controls.scss */ /* line 457, ../sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background: rgba(0, 153, 204, 0.7); } background: rgba(0, 153, 204, 0.7); }
/******************************************************** BROWSER ELEMENTS */ /******************************************************** BROWSER ELEMENTS */
/* line 461, ../sass/controls/_controls.scss */ /* line 465, ../sass/controls/_controls.scss */
::-webkit-scrollbar { ::-webkit-scrollbar {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
@ -1512,7 +1511,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 467, ../sass/controls/_controls.scss */ /* line 471, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959)); 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); 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; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
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; } border-top: 1px solid gray; }
/* line 474, ../sass/controls/_controls.scss */ /* line 478, ../sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373)); 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); 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: -o-linear-gradient(#808080, #737373 20px);
background-image: 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 { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } background: rgba(0, 0, 0, 0.4); }

4
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@ -49,7 +49,7 @@
} }
.l-fixed-position-image { .l-fixed-position-image {
background-size: contain; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; background-position: left top;
} }
@ -60,7 +60,7 @@
font-size: 0.8rem; font-size: 0.8rem;
$p: $interiorMarginSm; $p: $interiorMarginSm;
&.l-static-text { &.l-static-text {
overflow: auto; // overflow: auto;
padding: $p; padding: $p;
} }
&.l-telemetry { &.l-telemetry {

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

@ -318,6 +318,10 @@ label.checkbox.custom {
} }
} }
.l-click-area {
// @include test();
}
.type-icon { .type-icon {
margin-right: $interiorMargin; margin-right: $interiorMargin;
} }

2
platform/features/layout/src/FixedController.js
View File

@ -235,7 +235,7 @@ define(
y: Math.floor(position.y / gridSize[1]), y: Math.floor(position.y / gridSize[1]),
id: id, id: id,
stroke: "transparent", stroke: "transparent",
color: "#717171", color: "#cccccc",
titled: true, titled: true,
width: DEFAULT_DIMENSIONS[0], width: DEFAULT_DIMENSIONS[0],
height: DEFAULT_DIMENSIONS[1] height: DEFAULT_DIMENSIONS[1]

2
platform/features/layout/src/elements/ElementFactory.js
View File

@ -24,7 +24,7 @@ define(
"fixed.text": { "fixed.text": {
fill: "transparent", fill: "transparent",
stroke: "transparent", stroke: "transparent",
color: "#717171" color: "#cccccc"
} }
}, },
DIALOGS = { DIALOGS = {

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

@ -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" <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"> 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="ui-symbol icon">{{structure.glyph}}</span>
<span class="title-label" ng-if="structure.text"> <span class="title-label" ng-if="structure.text">
{{structure.text}} {{structure.text}}
@ -14,8 +14,8 @@
<div class="menu dropdown" ng-show="toggle.isActive()"> <div class="menu dropdown" ng-show="toggle.isActive()">
<ul> <ul>
<li ng-repeat="option in structure.options"> <li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
<a href="" ng-click="structure.click(option.key); toggle.setState(false)"> <a href="">
<span class="ui-symbol type-icon icon"> <span class="ui-symbol type-icon icon">
{{option.glyph}} {{option.glyph}}
</span> </span>