ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 08:25:31 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] In-progress checkin: color palette SASS

Browse Source 
WTD-847
Significant markup and CSS for color palette support;
This commit is contained in:
Charles Hacskaylo 2015-02-25 18:17:11 -08:00
parent bdd070e12f
commit a0f31132e3
12 changed files with 205 additions and 68 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 122, ../sass/_mixins.scss */
/* line 126, ../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 122, ../sass/_mixins.scss */
/* line 126, ../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 130, ../sass/_mixins.scss */
/* line 134, ../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);

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

@ -402,38 +402,41 @@ span {
/* 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; }
border: 1px solid transparent; }
/* line 33, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(255, 0, 0, 0.2); }
/* line 37, ../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 */
/* line 42, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-not-selected {
opacity: 0.8; }
/* line 43, ../sass/_fixed-position.scss */
/* line 47, ../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 */
/* line 55, ../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 */
/* line 60, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-static-text {
overflow: auto;
padding: 3px; }
/* line 61, ../sass/_fixed-position.scss */
/* line 65, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden;
position: absolute;
@ -447,28 +450,28 @@ span {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%; }
/* line 65, ../sass/_fixed-position.scss */
/* line 69, ../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 */
/* line 73, ../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 */
/* line 77, ../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;
left: 3px;
width: 100%; }
/* line 82, ../sass/_fixed-position.scss */
/* line 87, ../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 */
/* line 102, ../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); }
@ -608,7 +611,7 @@ span {
display: inline-block;
font-size: 1rem;
vertical-align: middle; }
/* line 166, ../sass/_mixins.scss */
/* line 170, ../sass/_mixins.scss */
.invoke-menu:hover {
color: #33ccff; }
@ -620,7 +623,7 @@ span {
/* line 49, ../sass/_icons.scss */
.icon-buttons-main .invoke-menu {
color: #666666; }
/* line 166, ../sass/_mixins.scss */
/* line 170, ../sass/_mixins.scss */
.icon-buttons-main .invoke-menu:hover {
color: #999999; }
@ -763,7 +766,7 @@ span {
border-top: 1px solid #666666;
color: #999999;
display: inline-block; }
/* line 77, ../sass/_mixins.scss */
/* line 81, ../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);
@ -798,6 +801,64 @@ a.l-btn,
a.l-btn span {
display: inline-block; }
/* line 1, ../sass/controls/_color-palette.scss */
.l-color-palette {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px !important; }
/* line 10, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row {
overflow: hidden;
*zoom: 1;
line-height: 16px;
width: 170px; }
/* line 15, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .l-palette-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-shadow: rgba(0, 0, 0, 0.8) 0 1px 2px;
-webkit-transition-property: visibility, opacity, background-color, border-color;
-moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color;
transition-property: visibility, opacity, background-color, border-color;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
border: 1px solid transparent;
color: white;
display: block;
font-family: 'symbolsfont';
float: left;
height: 16px;
width: 16px;
line-height: 16px;
margin: 0 1px 1px 0;
text-align: center;
vertical-align: middle; }
/* line 32, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .s-palette-item:hover {
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
border-color: white !important; }
/* line 38, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row .l-palette-item-label {
margin-left: 5px; }
/* line 42, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row.l-option-row {
margin-bottom: 5px; }
/* line 44, ../sass/controls/_color-palette.scss */
.l-color-palette .l-palette-row.l-option-row .s-palette-item {
border-color: #999999; }
/* line 3, ../sass/controls/_controls.scss */
.control.view-control .icon {
display: inline-block;
@ -932,7 +993,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #ccf2ff; }
/* line 130, ../sass/_mixins.scss */
/* line 134, ../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);
@ -966,7 +1027,7 @@ a.l-btn span {
background-image: -o-linear-gradient(#4dd2ff, #00ace6);
background-image: linear-gradient(#4dd2ff, #00ace6);
color: #ccf2ff; }
/* line 130, ../sass/_mixins.scss */
/* line 134, ../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);
@ -1003,7 +1064,7 @@ a.l-btn span {
border-top: 1px solid #999999;
color: #cccccc;
display: inline-block; }
/* line 122, ../sass/_mixins.scss */
/* line 126, ../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);
@ -1031,7 +1092,7 @@ a.l-btn span {
border-top: 1px solid #666666;
color: #b3b3b3;
display: inline-block; }
/* line 122, ../sass/_mixins.scss */
/* line 126, ../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);
@ -1231,7 +1292,7 @@ label.checkbox.custom {
display: inline-block;
height: 20px;
line-height: 20px; }
/* line 122, ../sass/_mixins.scss */
/* line 126, ../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);
@ -1388,14 +1449,14 @@ label.checkbox.custom {
auto: 0;
bottom: auto;
left: auto; }
/* line 122, ../sass/_mixins.scss */
/* line 126, ../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 94, ../sass/_mixins.scss */
/* line 98, ../sass/_mixins.scss */
.slider .knob:before {
content: '';
display: block;
@ -1406,7 +1467,7 @@ label.checkbox.custom {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 115, ../sass/_mixins.scss */
/* line 119, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); }
/* line 426, ../sass/controls/_controls.scss */
@ -1528,7 +1589,7 @@ label.checkbox.custom {
.menu-element .menu ul {
margin: 0;
padding: 0; }
/* line 174, ../sass/_mixins.scss */
/* line 178, ../sass/_mixins.scss */
.menu-element .menu ul li {
list-style-type: none;
margin: 0;
@ -1870,7 +1931,7 @@ input[type="text"] {
position: relative;
overflow: hidden;
vertical-align: middle; }
/* line 122, ../sass/_mixins.scss */
/* line 126, ../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);
@ -2596,7 +2657,7 @@ input[type="text"] {
height: 5px;
margin-top: -7px;
top: 70%; }
/* line 94, ../sass/_mixins.scss */
/* line 98, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before {
content: '';
display: block;
@ -2607,7 +2668,7 @@ input[type="text"] {
top: 2px;
left: 5px;
right: 5px; }
/* line 115, ../sass/_mixins.scss */
/* line 119, ../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 */
@ -2629,7 +2690,7 @@ input[type="text"] {
width: 5px;
margin-left: -7px;
left: 85%; }
/* line 94, ../sass/_mixins.scss */
/* line 98, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before {
content: '';
display: block;
@ -2640,7 +2701,7 @@ input[type="text"] {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 115, ../sass/_mixins.scss */
/* line 119, ../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 174, ../sass/_mixins.scss */
/* line 178, ../sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;

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

@ -29,7 +29,11 @@
.l-fixed-position-item {
position: absolute;
border: 1px solid transparent;
@include box-sizing(border-box);
// @include box-sizing(border-box);
&>div {
@include box-sizing(border-box);
@include test(red);
}
&.s-selected {
@include boxShdwLarge();
border-color: $colorKey;
@ -72,7 +76,8 @@
text-align: right;
&.telem-only {
@include test();
left: 0; width: 100%;
left: $p;
width: 100%;
}
}
}

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

@ -15,6 +15,7 @@
@import "icons";
@import "lists/tabular";
@import "controls/buttons";
@import "controls/color-palette";
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";

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

@ -6,9 +6,13 @@
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@include transition-property(visibility, opacity, background-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {

55
platform/commonUI/general/res/sass/controls/_color-palette.scss Normal file
View File

@ -0,0 +1,55 @@
.l-color-palette {
$d: 16px;
$colorsPerRow: 10;
$m: 1;
$colorSelectedColor: #fff;
@include box-sizing(border-box);
padding: $interiorMargin !important;
.l-palette-row {
@include clearfix;
line-height: $d;
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
.l-palette-item {
@include box-sizing(border-box);
@include txtShdwSubtle(0.8);
@include trans-prop-nice-fade(0.25s);
border: 1px solid transparent;
color: $colorSelectedColor;
display: block;
font-family: 'symbolsfont';
float: left;
height: $d; width: $d;
line-height: $d;
margin: 0 ($m * 1px) ($m * 1px) 0;
text-align: center;
vertical-align: middle;
}
.s-palette-item {
&:hover {
@include trans-prop-nice-fade(0);
border-color: $colorSelectedColor !important;
}
}
.l-palette-item-label {
margin-left: $interiorMargin;
}
&.l-option-row {
margin-bottom: $interiorMargin;
.s-palette-item {
border-color: $colorBodyFg;
}
}
}
}

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

@ -1,4 +1,5 @@
<div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
class="l-fixed-position-image"
style="">
<div
ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
class="l-fixed-position-image"
>
</div>

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

@ -1,5 +1,6 @@
<div
class="l-fixed-position-text l-static-text"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }">
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
>
{{ngModel.element.text}}
</div>

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

@ -11,7 +11,7 @@
<!-- Fixed position elements -->
<!-- TO-DO: Should not be applying positioning styles to the mct-include element.
<!-- TO-DO: Should not be applying positioning styles or CSS classes 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()"
key="element.template"

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

@ -1,36 +1,45 @@
<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">
<div
class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
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='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
</span>
<div class="menu dropdown"
ng-controller="ColorController as colors"
ng-show="toggle.isActive()">
<div style="width: 12em; display: block;" ng-if="!structure.mandatory">
<div style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
ng-click="ngModel[field] = 'transparent'">
{{ngModel[field] === 'transparent' ? 'x' : '' }}
<div
class="menu dropdown l-color-palette"
ng-controller="ColorController as colors"
ng-show="toggle.isActive()"
>
<div
class="l-palette-row l-option-row"
ng-if="!structure.mandatory"
>
<div
class="l-palette-item s-palette-item"
ng-click="ngModel[field] = 'transparent'"
>
{{ngModel[field] === 'transparent' ? '2' : '' }}
</div>
None
<span class="l-palette-item-label">None</span>
</div>
<div style="width: 12em; display: block;"
ng-repeat="group in colors.groups()">
<div ng-repeat="color in group"
style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
ng-style="{ background: color }"
ng-click="ngModel[field] = color">
{{ngModel[field] === color ? 'x' : '' }}
<div
class="l-palette-row"
ng-repeat="group in colors.groups()"
>
<div
class="l-palette-item s-palette-item"
ng-repeat="color in group"
ng-style="{ background: color }"
ng-click="ngModel[field] = color"
>
{{ngModel[field] === color ? '2' : '' }}
</div>
</div>
</div>
</div>