ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-07 03:29:24 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] In-progress checkin: migrating style tags to classes, other

Browse Source 
WTD-894
Significant migration of inline styles to CSS classes;
Changed telemetry component so that when title is hidden, telem element can take up 100% of the element width;
Static text elements now show scrollbars on overflow;
Added padding and box-sizing to text elements - this is throwing off the selected control because of the offset and should be fixed;
This commit is contained in:
Charles Hacskaylo 2015-02-25 15:53:02 -08:00
parent a11967ce2e
commit 7d03bc4de9
12 changed files with 248 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/css/forms.css
View File

@ -175,7 +175,7 @@ input[type="text"] {
position: relative;
overflow: hidden;
vertical-align: middle; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);

4
platform/commonUI/general/res/css/items.css
View File

@ -35,7 +35,7 @@
margin-bottom: 3px;
margin-right: 3px;
position: relative; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#737373, #595959);
@ -118,7 +118,7 @@
background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #80dfff; }
/* line 123, ../sass/_mixins.scss */
/* line 130, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff);

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

@ -368,16 +368,109 @@ span {
.t-fixed-position.l-fixed-position {
position: absolute;
top: 0;
right: 2px;
bottom: 2px;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto; }
/* line 8, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-cell {
.t-fixed-position.l-fixed-position .l-grid-holder {
position: relative;
height: 100%;
width: 100%; }
/* line 11, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 0; }
/* line 17, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-x; }
/* line 21, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-y; }
/* line 29, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item {
position: absolute;
border: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/* line 33, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-selected {
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
border-color: #0099cc;
cursor: move; }
/* line 38, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-not-selected {
opacity: 0.8; }
/* line 43, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-image {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: left top; }
/* line 51, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text {
border: 1px solid transparent;
height: 100%;
width: 100%;
font-size: 0.8rem; }
/* line 56, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-static-text {
overflow: auto;
padding: 3px; }
/* line 61, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden;
position: absolute;
border-top: 1px solid #404040;
border-left: 1px solid #404040; }
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
width: auto;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%; }
/* line 65, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-telemetry .l-elem.l-title {
right: auto;
left: 3px; }
/* line 69, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-telemetry .l-elem.l-value {
right: 3px;
left: auto;
text-align: right; }
/* line 73, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
background-color: rgba(255, 204, 0, 0.2);
left: 0;
width: 100%; }
/* line 82, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item-handle {
background: rgba(0, 153, 204, 0.5);
cursor: crosshair;
border: 1px solid #0099cc;
position: absolute; }
/* line 97, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
border: 1px dotted rgba(0, 153, 204, 0.5); }
/* line 3, ../sass/_about.scss */
.t-about {
@ -515,7 +608,7 @@ span {
display: inline-block;
font-size: 1rem;
vertical-align: middle; }
/* line 159, ../sass/_mixins.scss */
/* line 166, ../sass/_mixins.scss */
.invoke-menu:hover {
color: #33ccff; }
@ -527,7 +620,7 @@ span {
/* line 49, ../sass/_icons.scss */
.icon-buttons-main .invoke-menu {
color: #666666; }
/* line 159, ../sass/_mixins.scss */
/* line 166, ../sass/_mixins.scss */
.icon-buttons-main .invoke-menu:hover {
color: #999999; }
@ -670,7 +763,7 @@ span {
border-top: 1px solid #666666;
color: #999999;
display: inline-block; }
/* line 70, ../sass/_mixins.scss */
/* line 77, ../sass/_mixins.scss */
.s-btn.s-very-subtle:hover, .s-very-subtle.s-icon-btn:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959);
@ -839,7 +932,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #ccf2ff; }
/* line 123, ../sass/_mixins.scss */
/* line 130, ../sass/_mixins.scss */
.btn.major:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
@ -873,7 +966,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#4dd2ff, #00ace6);
background-image: linear-gradient(#4dd2ff, #00ace6);
color: #ccf2ff; }
/* line 123, ../sass/_mixins.scss */
/* line 130, ../sass/_mixins.scss */
.btn.major:hover:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80dfff), color-stop(100%, #1ac6ff));
background-image: -webkit-linear-gradient(#80dfff, #1ac6ff);
@ -910,7 +1003,7 @@ a.l-btn span {
border-top: 1px solid #999999;
color: #cccccc;
display: inline-block; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.btn.subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #808080));
background-image: -webkit-linear-gradient(#999999, #808080);
@ -938,7 +1031,7 @@ a.l-btn span {
border-top: 1px solid #666666;
color: #b3b3b3;
display: inline-block; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.btn.very-subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@ -1138,7 +1231,7 @@ label.checkbox.custom {
display: inline-block;
height: 20px;
line-height: 20px; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.btn-menu:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@ -1295,14 +1388,14 @@ label.checkbox.custom {
auto: 0;
bottom: auto;
left: auto; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); }
/* line 87, ../sass/_mixins.scss */
/* line 94, ../sass/_mixins.scss */
.slider .knob:before {
content: '';
display: block;
@ -1313,7 +1406,7 @@ label.checkbox.custom {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 115, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 426, ../sass/controls/_controls.scss */
@ -1435,7 +1528,7 @@ label.checkbox.custom {
.menu-element .menu ul {
margin: 0;
padding: 0; }
/* line 167, ../sass/_mixins.scss */
/* line 174, ../sass/_mixins.scss */
.menu-element .menu ul li {
list-style-type: none;
margin: 0;
@ -1777,7 +1870,7 @@ input[type="text"] {
position: relative;
overflow: hidden;
vertical-align: middle; }
/* line 115, ../sass/_mixins.scss */
/* line 122, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@ -2503,7 +2596,7 @@ input[type="text"] {
height: 5px;
margin-top: -7px;
top: 70%; }
/* line 87, ../sass/_mixins.scss */
/* line 94, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before {
content: '';
display: block;
@ -2514,7 +2607,7 @@ input[type="text"] {
top: 2px;
left: 5px;
right: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 115, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 42, ../sass/helpers/_splitter.scss */
@ -2536,7 +2629,7 @@ input[type="text"] {
width: 5px;
margin-left: -7px;
left: 85%; }
/* line 87, ../sass/_mixins.scss */
/* line 94, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before {
content: '';
display: block;
@ -2547,7 +2640,7 @@ input[type="text"] {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 108, ../sass/_mixins.scss */
/* line 115, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }

2
platform/commonUI/general/res/css/tree.css
View File

@ -2,7 +2,7 @@
ul.tree {
margin: 0;
padding: 0; }
/* line 167, ../sass/_mixins.scss */
/* line 174, ../sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;

1
platform/commonUI/general/res/sass/_constants.scss
View File

@ -23,6 +23,7 @@ $colorFormRequired: #ffc700;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05);
// Ratios

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

@ -2,27 +2,100 @@
&.l-fixed-position {
// @include test(red);
position: absolute;
top: 0; right: 2px; bottom: 2px; left: 0;
top: 0; right: 0; bottom: 0; left: 0;
width: auto; height: auto;
.l-grid-cell {
$brd: 1px solid lighten($colorBodyBg, 5%);
position: absolute;
border-top: $brd;
border-left: $brd;
.l-grid-holder {
position: relative;
height: 100%; width: 100%;
.l-grid {
// @include test(orange);
position: absolute;
height: 100%; width: 100%;
pointer-events: none;
z-index: 0;
&.l-grid-x {
@include bgTicks($colorGridLines, 'x');
}
&.l-grid-y {
@include bgTicks($colorGridLines, 'y');
}
}
}
}
.l-fixed-position-item {
position: absolute;
border: 1px solid transparent;
@include box-sizing(border-box);
&.s-selected {
@include boxShdwLarge();
border-color: $colorKey;
cursor: move;
}
&.s-not-selected {
opacity: 0.8;
}
}
.l-fixed-position-image {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
}
.l-fixed-position-text {
border:1px solid transparent;
height: 100%; width: 100%;
font-size: 0.8rem;
$p: $interiorMarginSm;
&.l-static-text {
overflow: auto;
padding: $p;
}
&.l-telemetry {
.l-elem {
@include absPosDefault($p);
@include box-sizing(border-box);
width: 50%;
&.l-title {
right: auto;
left: $p;
}
&.l-value {
right: $p;
left: auto;
text-align: right;
&.telem-only {
@include test();
left: 0; width: 100%;
}
}
}
}
}
.l-fixed-position-item-handle {
$brd: 1px solid $colorKey;
// @include border-radius($controlCr);
background: rgba($colorKey, 0.5);
cursor: crosshair;
border: $brd;
position: absolute;
}
}
.edit-mode .t-fixed-position {
.l-fixed-position-item {
&:not(.s-selected):hover {
border: 1px dotted rgba($colorKey, 0.5);
}
}
}

15
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -48,13 +48,20 @@
background-size: $d $d;
}
@mixin bgTicks($c: $colorBodyFg) {
$c: $c;
@include background-image(linear-gradient(90deg,
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
$deg: 90deg;
@if ($repeatDir != 'x') {
$deg: 0deg;
$repeatDir: repeat-y;
} @else {
$repeatDir: repeat-x;
}
@include background-image(linear-gradient($deg,
$c 1px, transparent 1px,
transparent 100%
));
background-repeat: repeat-x;
background-repeat: $repeatDir;
}
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {

3
platform/features/layout/res/templates/elements/image.html
View File

@ -1,3 +1,4 @@
<div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
style="width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;">
class="l-fixed-position-image"
style="">
</div>

17
platform/features/layout/res/templates/elements/telemetry.html
View File

@ -1,10 +1,17 @@
<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
style="width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;"
ng-show="ngModel.element.titled">
<div
class="l-fixed-position-text l-telemetry"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
>
<div
class="l-elem l-title"
ng-show="ngModel.element.titled"
>
{{ngModel.name}}
</div>
<div style="position: absolute; right: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;">
<div
class="l-elem l-value"
ng-class="{ 'telem-only': !ngModel.element.titled }"
>
{{ngModel.value}}
</div>
</div>

5
platform/features/layout/res/templates/elements/text.html
View File

@ -1,4 +1,5 @@
<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
style="width: 100%; height: 100%; overflow: hidden;">
<div
class="l-fixed-position-text l-static-text"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }">
{{ngModel.element.text}}
</div>

24
platform/features/layout/res/templates/fixed.html
View File

@ -3,23 +3,21 @@
mct-resize="controller.setBounds(bounds)">
<!-- Background grid -->
<span ng-click="controller.clearSelection()">
<!--div ng-repeat="cell in controller.getCellStyles()"
class="l-grid-cell s-grid-cell"
ng-style="cell">
</div-->
<span class="s-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></span>
<span class="s-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></span>
</span>
<div class="l-grid-holder" ng-click="controller.clearSelection()">
<div class="l-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
<div class="l-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
</div>
<!-- Fixed position elements -->
<!-- TO-DO: Should not be applying positioning styles to the mct-include element.
Instead, these should be passed on to the actual HTML element within the template -->
<mct-include ng-repeat="element in controller.getElements()"
style="position: absolute;"
key="element.template"
parameters="{ gridSize: controller.getGridSize() }"
ng-class="{ disabled: controller.selected() && !controller.selected(element) }"
class="l-fixed-position-item"
ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
ng-style="element.style"
ng-click="controller.select(element)"
ng-model="element">
@ -27,20 +25,18 @@
<!-- Selection highlight, handles -->
<span ng-if="controller.selected()">
<div class="s-fixed-position-item-selected"
style="position: absolute;"
<div class="l-fixed-position-item s-selected"
mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
mct-drag="controller.moveHandle().continueDrag(delta)"
mct-drag-up="controller.moveHandle().endDrag()"
ng-style="controller.selected().style">
</div>
<div ng-repeat="handle in controller.handles()"
style="position: absolute;"
class="l-fixed-position-item-handle"
ng-style="handle.style()"
mct-drag-down="handle.startDrag()"
mct-drag="handle.continueDrag(delta)"
mct-drag-up="handle.endDrag()">
O
</div>
</span>

4
platform/features/layout/src/FixedDragHandle.js
View File

@ -6,8 +6,8 @@ define(
'use strict';
// 8 by 8 pixels
var DRAG_HANDLE_SIZE = [ 8, 8 ];
// Drag handle dimensions
var DRAG_HANDLE_SIZE = [ 6, 6 ];
/**
* Template-displayable drag handle for an element in fixed