diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 3204f8bb94..702800ea8f 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -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); diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 5866771fc8..01cb3bd419 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -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); diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index d21104dfac..5766181471 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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); } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 0b6ef40511..b8c33cabdf 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -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; diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index fa6d897379..7b72ee993c 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -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%; } } } diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index b01ec249d2..20c08d4312 100755 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -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"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 3121ce5654..7e6437121a 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -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) { diff --git a/platform/commonUI/general/res/sass/controls/_color-palette.scss b/platform/commonUI/general/res/sass/controls/_color-palette.scss new file mode 100644 index 0000000000..b82246d1ec --- /dev/null +++ b/platform/commonUI/general/res/sass/controls/_color-palette.scss @@ -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; + } + } + } + + + + + + +} \ No newline at end of file diff --git a/platform/features/layout/res/templates/elements/image.html b/platform/features/layout/res/templates/elements/image.html index 4bd81bc182..75806349ba 100644 --- a/platform/features/layout/res/templates/elements/image.html +++ b/platform/features/layout/res/templates/elements/image.html @@ -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> diff --git a/platform/features/layout/res/templates/elements/text.html b/platform/features/layout/res/templates/elements/text.html index 3bd494bb4d..c398f2d53f 100644 --- a/platform/features/layout/res/templates/elements/text.html +++ b/platform/features/layout/res/templates/elements/text.html @@ -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> \ No newline at end of file diff --git a/platform/features/layout/res/templates/fixed.html b/platform/features/layout/res/templates/fixed.html index c1b64aa6b0..df163e76c7 100644 --- a/platform/features/layout/res/templates/fixed.html +++ b/platform/features/layout/res/templates/fixed.html @@ -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" diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html index aa2fd540bc..c4684a773d 100644 --- a/platform/forms/res/templates/controls/color.html +++ b/platform/forms/res/templates/controls/color.html @@ -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> \ No newline at end of file