diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 3b9b64e4ea..6d11c497da 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -1,6 +1,6 @@
{{type.getGlyph()}} - {{parameters.mode}} + {{parameters.mode}} {{type.getName()}} {{model.name}} v diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index f0b54ca246..2e89cb40c4 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -1,4 +1,4 @@ -/* line 2, ../sass/forms/_elems.scss */ +/* line 3, ../sass/forms/_elems.scss */ .form .section-header { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -9,13 +9,13 @@ font-size: 0.8em; margin-top: 5px; padding: 5px; } - /* line 8, ../sass/forms/_elems.scss */ + /* line 9, ../sass/forms/_elems.scss */ .form .section-header:first-child { margin-top: 0; } -/* line 12, ../sass/forms/_elems.scss */ +/* line 13, ../sass/forms/_elems.scss */ .form .form-section { position: relative; } -/* line 16, ../sass/forms/_elems.scss */ +/* line 17, ../sass/forms/_elems.scss */ .form .form-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -26,7 +26,7 @@ margin-top: 5px; padding: 5px; position: relative; } - /* line 25, ../sass/forms/_elems.scss */ + /* line 24, ../sass/forms/_elems.scss */ .form .form-row:first-child { border-top: none; } /* line 29, ../sass/forms/_elems.scss */ @@ -41,24 +41,34 @@ font-size: 0.75rem; line-height: 22px; min-height: 22px; } - /* line 39, ../sass/forms/_elems.scss */ + /* line 38, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; position: relative; white-space: nowrap; width: 20%; } - /* line 47, ../sass/forms/_elems.scss */ + /* line 46, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 51, ../sass/forms/_elems.scss */ + /* line 50, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; width: 79%; } - /* line 58, ../sass/forms/_elems.scss */ + /* line 55, ../sass/forms/_elems.scss */ + .form .form-row .controls .l-composite-control { + display: inline-block; } + /* line 57, ../sass/forms/_elems.scss */ + .form .form-row .controls .l-composite-control.l-checkbox { + line-height: 14px; + margin-right: 5px; } + /* line 65, ../sass/forms/_elems.scss */ + .form .form-row .controls .select { + margin-right: 5px; } + /* line 70, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 62, ../sass/forms/_elems.scss */ + /* line 74, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -69,7 +79,7 @@ position: relative; height: 150px; max-width: 50%; } - /* line 70, ../sass/forms/_elems.scss */ + /* line 82, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -78,15 +88,35 @@ bottom: 5px; left: 5px; } -/* line 84, ../sass/forms/_elems.scss */ +/* line 96, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 90, ../sass/forms/_elems.scss */ -.hint { +/* line 103, ../sass/forms/_elems.scss */ +.hint, +.s-hint { font-size: 0.9em; } +/* line 107, ../sass/forms/_elems.scss */ +.l-result { + display: inline-block; + min-width: 32px; + min-height: 32px; + position: relative; + vertical-align: top; } + /* line 114, ../sass/forms/_elems.scss */ + .l-result div.s-hint { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + background: rgba(255, 153, 0, 0.8); + display: block; + color: #ffd699; + padding: 5px; } + /* line 1, ../sass/forms/_textarea.scss */ .edit-main textarea { -webkit-appearance: none; @@ -166,30 +196,22 @@ input[type="text"] { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; - margin-right: 5px; - margin-top: 1px; - padding: 0 25px 0 0; - position: relative; - overflow: hidden; - vertical-align: middle; } - /* line 115, ../sass/_mixins.scss */ + cursor: pointer; + display: inline-block; + margin: 0 0 2px 2px; + position: relative; } + /* line 127, ../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); background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: linear-gradient(#666666, #4d4d4d); } - /* line 11, ../sass/forms/_selects.scss */ - .form-control.select span.arw { - display: block; - pointer-events: none; - position: absolute; - right: 8%; - top: 10%; } - /* line 18, ../sass/forms/_selects.scss */ + /* line 7, ../sass/forms/_selects.scss */ .form-control.select select { -webkit-appearance: none; -moz-appearance: none; @@ -197,16 +219,21 @@ input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - border: none; - box-shadow: none; - background-color: transparent; - background-image: none; + background: none; + color: #999999; + border: none !important; cursor: pointer; - padding: 3px 5px 4px 5px; - width: 150%; } - /* line 32, ../sass/forms/_selects.scss */ - .form-control.select select:focus { - outline: none; } + padding: 4px 25px 2px 5px; } + /* line 16, ../sass/forms/_selects.scss */ + .form-control.select:after { + color: #0099cc; + content: "v"; + display: block; + font-family: 'symbolsfont'; + pointer-events: none; + position: absolute; + right: 5px; + top: 0; } /* line 2, ../sass/forms/_channel-selector.scss */ .channel-selector .line { diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index c666e17e78..2cc3c4c3ff 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -24,6 +24,7 @@ -webkit-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; + border: none; border-top: 1px solid #737373; color: #999999; display: inline-block; @@ -35,7 +36,7 @@ margin-bottom: 3px; margin-right: 3px; position: relative; } - /* line 115, ../sass/_mixins.scss */ + /* line 127, ../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); @@ -109,6 +110,7 @@ -webkit-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; + border: none; border-top: 1px solid #33ccff; color: #999999; display: inline-block; @@ -118,7 +120,7 @@ background-image: -o-linear-gradient(#33ccff, #0099cc); background-image: linear-gradient(#33ccff, #0099cc); color: #80dfff; } - /* line 123, ../sass/_mixins.scss */ + /* line 135, ../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 315bc41978..cb6d166e5e 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -364,6 +364,115 @@ span { .vscroll { overflow-y: auto; } +/* line 2, ../sass/_fixed-position.scss */ +.t-fixed-position.l-fixed-position { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; } + /* line 8, ../sass/_fixed-position.scss */ + .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 28, ../sass/_fixed-position.scss */ +.t-fixed-position .l-fixed-position-item { + position: absolute; + border: 1px solid transparent; } + /* line 32, ../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 37, ../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-item .l-fixed-position-box, + .t-fixed-position .l-fixed-position-item .l-fixed-position-image, + .t-fixed-position .l-fixed-position-item .l-fixed-position-text { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + height: 100%; + width: 100%; } + /* line 51, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-image { + background-size: cover; + background-repeat: no-repeat; + background-position: left top; } + /* line 57, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text { + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; + border: 1px solid transparent; + font-size: 0.8rem; } + /* line 62, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text { + padding: 3px; } + /* line 67, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem { + overflow: hidden; + position: absolute; + 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 71, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title { + right: auto; + left: 3px; } + /* line 75, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value { + right: 3px; + left: auto; + text-align: right; } + /* line 80, ../sass/_fixed-position.scss */ + .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only { + left: 3px; + width: auto; } +/* line 91, ../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 103, ../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 { line-height: 120%; } @@ -500,7 +609,7 @@ span { display: inline-block; font-size: 1rem; vertical-align: middle; } - /* line 159, ../sass/_mixins.scss */ + /* line 171, ../sass/_mixins.scss */ .invoke-menu:hover { color: #33ccff; } @@ -512,15 +621,16 @@ span { /* line 49, ../sass/_icons.scss */ .icon-buttons-main .invoke-menu { color: #666666; } - /* line 159, ../sass/_mixins.scss */ + /* line 171, ../sass/_mixins.scss */ .icon-buttons-main .invoke-menu:hover { color: #999999; } /* line 57, ../sass/_icons.scss */ .object-header .type-icon { - color: #ffc700; } + color: #ffc700; + margin-right: 5px; } -/* line 64, ../sass/_icons.scss */ +/* line 65, ../sass/_icons.scss */ .menu .type-icon, .tree-item .type-icon, .icon-btn .menu.dropdown .icon, @@ -652,10 +762,11 @@ span { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; } - /* line 70, ../sass/_mixins.scss */ + /* line 82, ../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); @@ -690,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; @@ -815,6 +984,7 @@ a.l-btn span { -webkit-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; + border: none; border-top: 1px solid #33ccff; color: #999999; display: inline-block; @@ -824,7 +994,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 135, ../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); @@ -849,6 +1019,7 @@ a.l-btn span { -webkit-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; + border: none; border-top: 1px solid #4dd2ff; color: #999999; display: inline-block; @@ -858,7 +1029,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 135, ../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); @@ -892,10 +1063,11 @@ a.l-btn span { -webkit-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; + border: none; border-top: 1px solid #999999; color: #cccccc; display: inline-block; } - /* line 115, ../sass/_mixins.scss */ + /* line 127, ../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); @@ -920,10 +1092,11 @@ a.l-btn span { -webkit-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; + border: none; border-top: 1px solid #666666; color: #b3b3b3; display: inline-block; } - /* line 115, ../sass/_mixins.scss */ + /* line 127, ../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); @@ -954,6 +1127,13 @@ a.l-btn span { margin-left: 5px; } /* line 157, ../sass/controls/_controls.scss */ +.l-composite-control { + vertical-align: middle; } + /* line 160, ../sass/controls/_controls.scss */ + .l-composite-control.l-checkbox .composite-control-label { + line-height: 18px; } + +/* line 166, ../sass/controls/_controls.scss */ .control-group { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -961,16 +1141,16 @@ a.l-btn span { border-left: 1px solid #4d4d4d; padding: 0 5px; position: relative; } - /* line 164, ../sass/controls/_controls.scss */ + /* line 173, ../sass/controls/_controls.scss */ .control-group:first-child { border-left: none; padding-left: 0; } -/* line 170, ../sass/controls/_controls.scss */ +/* line 179, ../sass/controls/_controls.scss */ .btn-set { display: inline-block; position: relative; } - /* line 175, ../sass/controls/_controls.scss */ + /* line 184, ../sass/controls/_controls.scss */ .btn-set .btn, .btn-set .t-btn { -webkit-border-radius: 0; @@ -980,7 +1160,7 @@ a.l-btn span { border-radius: 0; border-left: 1px solid #666666; margin-left: 0; } - /* line 179, ../sass/controls/_controls.scss */ + /* line 188, ../sass/controls/_controls.scss */ .btn-set .btn:first-child, .btn-set .t-btn:first-child { border-left: none; @@ -990,7 +1170,7 @@ a.l-btn span { -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; } - /* line 183, ../sass/controls/_controls.scss */ + /* line 192, ../sass/controls/_controls.scss */ .btn-set .btn:last-child, .btn-set .t-btn:last-child { -moz-border-radius-topright: 3px; @@ -1000,7 +1180,7 @@ a.l-btn span { -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; } -/* line 194, ../sass/controls/_controls.scss */ +/* line 203, ../sass/controls/_controls.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, .top-bar .buttons-main .btn, @@ -1011,7 +1191,7 @@ a.l-btn span { font-size: 12.6px; height: 28px; line-height: 28px; } - /* line 200, ../sass/controls/_controls.scss */ + /* line 209, ../sass/controls/_controls.scss */ .object-browse-bar .btn .icon:not(.invoke-menu), .object-browse-bar .t-btn .icon:not(.invoke-menu), .top-bar .buttons-main .btn .icon:not(.invoke-menu), @@ -1021,21 +1201,22 @@ a.l-btn span { font-size: 150%; vertical-align: middle; } -/* line 208, ../sass/controls/_controls.scss */ +/* line 217, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; display: inline-block; line-height: 14px; margin-right: 20px; padding-left: 19px; - position: relative; } - /* line 218, ../sass/controls/_controls.scss */ + position: relative; + vertical-align: top; } + /* line 228, ../sass/controls/_controls.scss */ label.checkbox.custom em { color: #999999; display: inline-block; height: 14px; min-width: 14px; } - /* line 223, ../sass/controls/_controls.scss */ + /* line 233, ../sass/controls/_controls.scss */ label.checkbox.custom em:before { -webkit-border-radius: 2.25px; -moz-border-radius: 2.25px; @@ -1056,51 +1237,51 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 241, ../sass/controls/_controls.scss */ + /* line 251, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 247, ../sass/controls/_controls.scss */ + /* line 257, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 251, ../sass/controls/_controls.scss */ + /* line 261, ../sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 253, ../sass/controls/_controls.scss */ + /* line 263, ../sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 261, ../sass/controls/_controls.scss */ +/* line 271, ../sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 263, ../sass/controls/_controls.scss */ + /* line 273, ../sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 267, ../sass/controls/_controls.scss */ + /* line 277, ../sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 270, ../sass/controls/_controls.scss */ + /* line 280, ../sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 275, ../sass/controls/_controls.scss */ +/* line 285, ../sass/controls/_controls.scss */ .btn-menu label.checkbox.custom { margin-left: 5px; } -/* line 280, ../sass/controls/_controls.scss */ +/* line 290, ../sass/controls/_controls.scss */ .item .checkbox.checked label { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 286, ../sass/controls/_controls.scss */ +/* line 296, ../sass/controls/_controls.scss */ .btn-menu { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-linear-gradient(#4d4d4d, #404040); @@ -1118,51 +1299,52 @@ label.checkbox.custom { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; height: 20px; line-height: 20px; } - /* line 115, ../sass/_mixins.scss */ + /* line 127, ../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); background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: linear-gradient(#666666, #4d4d4d); } - /* line 293, ../sass/controls/_controls.scss */ + /* line 303, ../sass/controls/_controls.scss */ .btn-menu.dropdown { padding-right: 7px; } - /* line 298, ../sass/controls/_controls.scss */ + /* line 308, ../sass/controls/_controls.scss */ .btn-menu:not(.disabled):hover { color: #cccccc; } - /* line 302, ../sass/controls/_controls.scss */ + /* line 312, ../sass/controls/_controls.scss */ .btn-menu.btn-invoke-menu { color: #0099cc; padding: 0 5px; } - /* line 306, ../sass/controls/_controls.scss */ + /* line 316, ../sass/controls/_controls.scss */ .btn-menu.btn-invoke-menu:hover { color: deepskyblue; } - /* line 311, ../sass/controls/_controls.scss */ + /* line 325, ../sass/controls/_controls.scss */ .btn-menu .type-icon { margin-right: 5px; } - /* line 314, ../sass/controls/_controls.scss */ + /* line 328, ../sass/controls/_controls.scss */ .btn-menu .menu { text-align: left; } - /* line 317, ../sass/controls/_controls.scss */ + /* line 331, ../sass/controls/_controls.scss */ .btn-menu .menu .ui-symbol.icon { width: 12px; } -/* line 323, ../sass/controls/_controls.scss */ +/* line 337, ../sass/controls/_controls.scss */ .top-bar .btn-menu { height: 35px; line-height: 35px; padding-right: 10px; } - /* line 331, ../sass/controls/_controls.scss */ + /* line 345, ../sass/controls/_controls.scss */ .top-bar .btn-menu.browse-btn { margin-right: 5px; padding-left: 35px; } - /* line 334, ../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; @@ -1181,31 +1363,30 @@ label.checkbox.custom { height: auto; } /******************************************************** OBJECT-HEADER */ -/* line 351, ../sass/controls/_controls.scss */ +/* line 365, ../sass/controls/_controls.scss */ .object-header { display: inline-block; font-size: 1em; } - /* line 354, ../sass/controls/_controls.scss */ + /* line 368, ../sass/controls/_controls.scss */ .object-header .title { color: white; } - /* line 357, ../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 366, ../sass/controls/_controls.scss */ +/* line 380, ../sass/controls/_controls.scss */ .top-bar .object-header, .object-browse-bar .object-header { - font-size: 1.2em; } - /* line 368, ../sass/controls/_controls.scss */ + font-size: 1.1em; } + /* line 382, ../sass/controls/_controls.scss */ .top-bar .object-header span, .object-browse-bar .object-header span { - display: inline-block; - margin-right: 5px; } + display: inline-block; } /******************************************************** VIEW-CONTROLS */ -/* line 377, ../sass/controls/_controls.scss */ +/* line 391, ../sass/controls/_controls.scss */ .view-controls .view-type { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -1219,16 +1400,16 @@ label.checkbox.custom { line-height: 20px; padding-left: 5px; padding-right: 5px; } - /* line 388, ../sass/controls/_controls.scss */ + /* line 402, ../sass/controls/_controls.scss */ .view-controls .view-type.cur { background: #666666; } -/* line 393, ../sass/controls/_controls.scss */ +/* line 407, ../sass/controls/_controls.scss */ .edit-mode .top-bar .control-set.edit-view-controls { margin-right: 50px; } /******************************************************** SLIDERS */ -/* line 404, ../sass/controls/_controls.scss */ +/* line 418, ../sass/controls/_controls.scss */ .slider .slot { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -1251,7 +1432,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 415, ../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); @@ -1269,6 +1450,7 @@ label.checkbox.custom { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; @@ -1280,14 +1462,14 @@ label.checkbox.custom { auto: 0; bottom: auto; left: auto; } - /* line 115, ../sass/_mixins.scss */ + /* line 127, ../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 99, ../sass/_mixins.scss */ .slider .knob:before { content: ''; display: block; @@ -1298,15 +1480,15 @@ label.checkbox.custom { left: 2px; bottom: 5px; top: 5px; } - /* line 108, ../sass/_mixins.scss */ + /* line 120, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { border-color: rgba(0, 153, 204, 0.9); } - /* line 426, ../sass/controls/_controls.scss */ + /* line 440, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 433, ../sass/controls/_controls.scss */ +/* line 447, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -1317,12 +1499,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 443, ../sass/controls/_controls.scss */ + /* line 457, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 451, ../sass/controls/_controls.scss */ +/* line 465, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -1341,7 +1523,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 457, ../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); @@ -1360,7 +1542,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 464, ../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); @@ -1368,7 +1550,7 @@ label.checkbox.custom { background-image: -o-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 469, ../sass/controls/_controls.scss */ +/* line 483, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -1408,6 +1590,7 @@ label.checkbox.custom { -webkit-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; + border: none; border-top: 1px solid #737373; color: #999999; display: inline-block; @@ -1420,7 +1603,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 167, ../sass/_mixins.scss */ + /* line 179, ../sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -1535,6 +1718,7 @@ label.checkbox.custom { -webkit-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; + border: none; border-top: 1px solid #a6a6a6; color: #999999; display: inline-block; } @@ -1580,7 +1764,7 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 2, ../sass/forms/_elems.scss */ +/* line 3, ../sass/forms/_elems.scss */ .form .section-header { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -1591,13 +1775,13 @@ label.checkbox.custom { font-size: 0.8em; margin-top: 5px; padding: 5px; } - /* line 8, ../sass/forms/_elems.scss */ + /* line 9, ../sass/forms/_elems.scss */ .form .section-header:first-child { margin-top: 0; } -/* line 12, ../sass/forms/_elems.scss */ +/* line 13, ../sass/forms/_elems.scss */ .form .form-section { position: relative; } -/* line 16, ../sass/forms/_elems.scss */ +/* line 17, ../sass/forms/_elems.scss */ .form .form-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -1608,7 +1792,7 @@ label.checkbox.custom { margin-top: 5px; padding: 5px; position: relative; } - /* line 25, ../sass/forms/_elems.scss */ + /* line 24, ../sass/forms/_elems.scss */ .form .form-row:first-child { border-top: none; } /* line 29, ../sass/forms/_elems.scss */ @@ -1623,24 +1807,34 @@ label.checkbox.custom { font-size: 0.75rem; line-height: 22px; min-height: 22px; } - /* line 39, ../sass/forms/_elems.scss */ + /* line 38, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; position: relative; white-space: nowrap; width: 20%; } - /* line 47, ../sass/forms/_elems.scss */ + /* line 46, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 51, ../sass/forms/_elems.scss */ + /* line 50, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; width: 79%; } - /* line 58, ../sass/forms/_elems.scss */ + /* line 55, ../sass/forms/_elems.scss */ + .form .form-row .controls .l-composite-control { + display: inline-block; } + /* line 57, ../sass/forms/_elems.scss */ + .form .form-row .controls .l-composite-control.l-checkbox { + line-height: 14px; + margin-right: 5px; } + /* line 65, ../sass/forms/_elems.scss */ + .form .form-row .controls .select { + margin-right: 5px; } + /* line 70, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 62, ../sass/forms/_elems.scss */ + /* line 74, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -1651,7 +1845,7 @@ label.checkbox.custom { position: relative; height: 150px; max-width: 50%; } - /* line 70, ../sass/forms/_elems.scss */ + /* line 82, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -1660,15 +1854,35 @@ label.checkbox.custom { bottom: 5px; left: 5px; } -/* line 84, ../sass/forms/_elems.scss */ +/* line 96, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 90, ../sass/forms/_elems.scss */ -.hint { +/* line 103, ../sass/forms/_elems.scss */ +.hint, +.s-hint { font-size: 0.9em; } +/* line 107, ../sass/forms/_elems.scss */ +.l-result { + display: inline-block; + min-width: 32px; + min-height: 32px; + position: relative; + vertical-align: top; } + /* line 114, ../sass/forms/_elems.scss */ + .l-result div.s-hint { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + background: rgba(255, 153, 0, 0.8); + display: block; + color: #ffd699; + padding: 5px; } + /* line 4, ../sass/forms/_validation.scss */ .validates > .label { padding-right: 25px; } @@ -1753,30 +1967,22 @@ input[type="text"] { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; - margin-right: 5px; - margin-top: 1px; - padding: 0 25px 0 0; - position: relative; - overflow: hidden; - vertical-align: middle; } - /* line 115, ../sass/_mixins.scss */ + cursor: pointer; + display: inline-block; + margin: 0 0 2px 2px; + position: relative; } + /* line 127, ../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); background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: linear-gradient(#666666, #4d4d4d); } - /* line 11, ../sass/forms/_selects.scss */ - .form-control.select span.arw { - display: block; - pointer-events: none; - position: absolute; - right: 8%; - top: 10%; } - /* line 18, ../sass/forms/_selects.scss */ + /* line 7, ../sass/forms/_selects.scss */ .form-control.select select { -webkit-appearance: none; -moz-appearance: none; @@ -1784,16 +1990,21 @@ input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - border: none; - box-shadow: none; - background-color: transparent; - background-image: none; + background: none; + color: #999999; + border: none !important; cursor: pointer; - padding: 3px 5px 4px 5px; - width: 150%; } - /* line 32, ../sass/forms/_selects.scss */ - .form-control.select select:focus { - outline: none; } + padding: 4px 25px 2px 5px; } + /* line 16, ../sass/forms/_selects.scss */ + .form-control.select:after { + color: #0099cc; + content: "v"; + display: block; + font-family: 'symbolsfont'; + pointer-events: none; + position: absolute; + right: 5px; + top: 0; } /* line 2, ../sass/forms/_channel-selector.scss */ .channel-selector .line { @@ -1912,7 +2123,7 @@ input[type="text"] { -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - display: block; + display: inline-block; font-size: 1.3em; height: 22px; line-height: 22px; @@ -2222,6 +2433,7 @@ input[type="text"] { -webkit-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; + border: none; border-top: 1px solid #666666; color: #999999; display: inline-block; @@ -2488,7 +2700,7 @@ input[type="text"] { height: 5px; margin-top: -7px; top: 70%; } - /* line 87, ../sass/_mixins.scss */ + /* line 99, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { content: ''; display: block; @@ -2499,7 +2711,7 @@ input[type="text"] { top: 2px; left: 5px; right: 5px; } - /* line 108, ../sass/_mixins.scss */ + /* line 120, ../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 */ @@ -2521,7 +2733,7 @@ input[type="text"] { width: 5px; margin-left: -7px; left: 85%; } - /* line 87, ../sass/_mixins.scss */ + /* line 99, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:before { content: ''; display: block; @@ -2532,7 +2744,7 @@ input[type="text"] { left: 2px; bottom: 5px; top: 5px; } - /* line 108, ../sass/_mixins.scss */ + /* line 120, ../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 5321766388..f1987f530d 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 167, ../sass/_mixins.scss */ + /* line 179, ../sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot index 41d6a656f9..2928db98ec 100644 Binary files a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot and b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot differ diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg index 18ffd151d4..c556d28c48 100644 --- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg +++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg @@ -2,12 +2,12 @@ -Created by FontForge 20110222 at Mon Feb 23 21:13:56 2015 +Created by FontForge 20110222 at Thu Feb 26 00:33:43 2015 By deploy user Copyright 2015 Adobe Systems Incorporated. All rights reserved. - + - - - d="M352 366l-352 -366v735z" /> - @@ -90,7 +90,7 @@ q3 -16 3 -50zM361 224q66 0 113 45.5t47 111.5q0 65 -47 112.5t-113 47.5q-65 0 -112 d="M0 0v700h180v-700h-180zM297 0v700h180v-700h-180zM594 192v508h180v-508h-180z" /> - @@ -120,7 +120,7 @@ d="M339 727l340 -236v-491h-340h-339v491zM339 255l252 176l-252 174l-252 -174z" /> - + + + + + + + - diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf index c8147b6a99..b784479432 100644 Binary files a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf and b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf differ diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff index d419defd6b..63468f5517 100644 Binary files a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff and b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff differ diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 9b24880cd5..6bff1ed739 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -23,6 +23,7 @@ $colorFormRequired: #ffc700; $colorFormValid: #33cc33; $colorFormError: #cc0000; $colorFormInvalid: #ff9900; +$colorGridLines: rgba(#fff, 0.05); // Ratios diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss new file mode 100644 index 0000000000..003123844d --- /dev/null +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -0,0 +1,107 @@ +.t-fixed-position { + &.l-fixed-position { +// @include test(red); + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + width: auto; height: auto; + + .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; + + &.s-selected { + @include boxShdwLarge(); + border-color: $colorKey; + cursor: move; + } + &.s-not-selected { + opacity: 0.8; + } + + .l-fixed-position-box, + .l-fixed-position-image, + .l-fixed-position-text { + @include box-sizing(border-box); + height: 100%; width: 100%; + } + + .l-fixed-position-box { + } + + .l-fixed-position-image { + background-size: cover; + background-repeat: no-repeat; + background-position: left top; + } + + .l-fixed-position-text { + @include txtShdwSubtle(); + border:1px solid transparent; + 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 { +// @include test(blue); + right: $p; + left: auto; + text-align: right; + &.telem-only { +// @include test(red); + left: $p; + width: auto; + } + } + } + } + } + } + + .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); + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 69560bb259..e5557785fe 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -56,6 +56,7 @@ .object-header .type-icon { color: $colorAlt1; + margin-right: $interiorMargin; } .menu .type-icon, diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 85f80abc9b..20c08d4312 100755 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -9,11 +9,13 @@ @import "global"; @import "fonts"; @import "user-environ/layout"; +@import "fixed-position"; @import "about"; @import "badges"; @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 236bc6fc0f..3c5326579b 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) { @@ -48,13 +52,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) { @@ -63,6 +74,7 @@ @include box-sizing(border-box); // @include box-shadow(rgba(black, 0.3) 0 1px 2px); @include boxShdwSubtle(); + border: none; border-top: 1px solid lighten($bg, 20%); color: $fg; display: inline-block; 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/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index b21a726e14..89c7ded8af 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -154,6 +154,15 @@ } } +.l-composite-control { + vertical-align: middle; + &.l-checkbox { + .composite-control-label { + line-height: 18px; + } + } +} + .control-group { // Buttons that have a conceptual grouping - internal space between, and a divider between groups. // @include test(); @@ -215,6 +224,7 @@ label.checkbox.custom { margin-right: $interiorMargin * 4; padding-left: $d + $interiorMargin; position: relative; + vertical-align: top; em { color: $colorBodyFg; display: inline-block; @@ -308,6 +318,10 @@ label.checkbox.custom { } } + .l-click-area { +// @include test(); + } + .type-icon { margin-right: $interiorMargin; } @@ -364,10 +378,10 @@ label.checkbox.custom { .top-bar, .object-browse-bar { .object-header { - font-size: 1.2em; + font-size: 1.1em; span { display: inline-block; - margin-right: $interiorMargin; +// margin-right: $interiorMargin; } } } diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index ce59960853..e2ab6e6c3b 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -1,4 +1,5 @@ .form { +// @include test(orange); .section-header { @include border-radius(3px); background: rgba(white, 0.1); @@ -16,18 +17,16 @@ .form-row { @include box-sizing(border-box); @include clearfix; - // background: rgba(#00ff00, 0.1); border-top: 1px solid $colorInteriorBorder; - // box-sizing: border-box; margin-top: $interiorMargin; padding: $interiorMargin; position: relative; &:first-child { border-top: none; } + .label, .controls { - // background: rgba(#ffcc00, 0.1); @include box-sizing(border-box); @include clearfix; box-sizing: border-box; @@ -50,9 +49,22 @@ .controls { float: left; -// padding-left: $interiorMargin; position: relative; width: 99% - $formLabelW; // Start with less than 100% for Firefox + + .l-composite-control { + display: inline-block; + &.l-checkbox { +// @include test(); +// height: $formRowCtrlsH; + line-height: $formRowCtrlsH; + margin-right: 5px; + } + } + + .select { + margin-right: $interiorMargin; + } } .field-hints { @@ -87,6 +99,23 @@ label.form-control.checkbox { } } -.hint { +.hint, +.s-hint { font-size: 0.9em; +} + +.l-result { + // Used in /vista/channel-query.html and evr-query.html as of 2/24/15 + display: inline-block; + min-width: 32px; min-height: 32px; + position: relative; + vertical-align: top; + + div.s-hint { + @include border-radius($basicCr); + background: rgba($colorFormInvalid, 0.8); + display: block; + color: lighten($colorFormInvalid, 30%); + padding: $interiorMargin; + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/forms/_filter.scss b/platform/commonUI/general/res/sass/forms/_filter.scss index 8e68e2860e..d23cfe6a09 100644 --- a/platform/commonUI/general/res/sass/forms/_filter.scss +++ b/platform/commonUI/general/res/sass/forms/_filter.scss @@ -20,7 +20,7 @@ } .icon.ui-symbol { @include border-radius($controlCr); - display: block; + display: inline-block; font-size: 1.3em; height: $formInputH; line-height: $formInputH; diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss index 0009716d7f..b72f416de2 100644 --- a/platform/commonUI/general/res/sass/forms/_selects.scss +++ b/platform/commonUI/general/res/sass/forms/_selects.scss @@ -1,35 +1,26 @@ .form-control.select { - $myH: $formInputH + 1; @include btnSubtle($colorBodyBg); - margin-right: $interiorMargin; - margin-top: 1px; - padding: 0 25px 0 0; + cursor: pointer; + display: inline-block; + margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers position: relative; - overflow: hidden; - vertical-align: middle; - - span.arw { - display: block; - pointer-events: none; - position: absolute; - right: 8%; top: 10%; - } - select { @include appearance(none); @include box-sizing(border-box); - border: none; - box-shadow: none; - background-color: transparent; - background-image: none; + background: none; + color: $colorBodyFg; + border: none !important; cursor: pointer; -// height: $myH; -// line-height: $myH; - padding: 3px 5px 4px 5px; - width: 150%; + padding: 4px 25px 2px 5px; } - - select:focus { - outline: none; + &:after { + color: $colorKey; + content:"v"; + display: block; + font-family: 'symbolsfont'; + pointer-events: none; + position: absolute; + right: $interiorMargin; top: 0; +// z-index: 2; } } \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/controls/action-button.html b/platform/commonUI/general/res/templates/controls/action-button.html index beeb0627c8..169e015470 100644 --- a/platform/commonUI/general/res/templates/controls/action-button.html +++ b/platform/commonUI/general/res/templates/controls/action-button.html @@ -1,5 +1,4 @@ - diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html index 9bdc765645..276e66ff66 100644 --- a/platform/commonUI/general/res/templates/controls/switcher.html +++ b/platform/commonUI/general/res/templates/controls/switcher.html @@ -24,10 +24,11 @@
- + \ No newline at end of file diff --git a/platform/features/layout/bundle.json b/platform/features/layout/bundle.json index 399399ce80..86ccb54ff5 100644 --- a/platform/features/layout/bundle.json +++ b/platform/features/layout/bundle.json @@ -32,22 +32,22 @@ "options": [ { "name": "Box", - "glyph": "\u2610", + "glyph": "\u00E0", "key": "fixed.box" }, { "name": "Line", - "glyph": "-", + "glyph": "\u00E2", "key": "fixed.line" }, { "name": "Text", - "glyph": "\u1D1B", + "glyph": "\u00E4", "key": "fixed.text" }, { "name": "Image", - "glyph": "\u2353", + "glyph": "\u00E3", "key": "fixed.image" } ] @@ -58,7 +58,7 @@ "items": [ { "method": "order", - "glyph": "o", + "glyph": "\u00E1", "control": "menu-button", "options": [ { @@ -85,23 +85,23 @@ }, { "property": "fill", - "glyph": "X", + "glyph": "\u00E0", "control": "color" }, { "property": "stroke", - "glyph": "-", + "glyph": "\u00E2", "control": "color" }, { "property": "color", - "glyph": "\u1D1B", + "glyph": "\u00E4", "mandatory": true, "control": "color" }, { "property": "url", - "glyph": "\u2353", + "glyph": "\u00E3", "control": "dialog-button", "title": "Image Properties", "dialog": { @@ -123,13 +123,13 @@ }, { "method": "showTitle", - "glyph": "+", + "glyph": "\u00E7", "control": "button", "description": "Show telemetry element title." }, { "method": "hideTitle", - "glyph": "X", + "glyph": "\u00E5", "control": "button", "description": "Hide telemetry element title." } diff --git a/platform/features/layout/res/templates/elements/box.html b/platform/features/layout/res/templates/elements/box.html index 3ca8eef7da..f8034129e4 100644 --- a/platform/features/layout/res/templates/elements/box.html +++ b/platform/features/layout/res/templates/elements/box.html @@ -1,3 +1,5 @@ -
+
\ 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 6115b8f4cd..75806349ba 100644 --- a/platform/features/layout/res/templates/elements/image.html +++ b/platform/features/layout/res/templates/elements/image.html @@ -1,3 +1,5 @@ -
+
diff --git a/platform/features/layout/res/templates/elements/telemetry.html b/platform/features/layout/res/templates/elements/telemetry.html index 3a40d416f8..c96dafebe2 100644 --- a/platform/features/layout/res/templates/elements/telemetry.html +++ b/platform/features/layout/res/templates/elements/telemetry.html @@ -1,10 +1,17 @@ -
-
+
+
{{ngModel.name}}
-
+
{{ngModel.value}}
\ No newline at end of file diff --git a/platform/features/layout/res/templates/elements/text.html b/platform/features/layout/res/templates/elements/text.html index 627468d3e2..c398f2d53f 100644 --- a/platform/features/layout/res/templates/elements/text.html +++ b/platform/features/layout/res/templates/elements/text.html @@ -1,4 +1,6 @@ -
+
{{ngModel.element.text}}
\ 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 9d6d741a62..39415b6090 100644 --- a/platform/features/layout/res/templates/fixed.html +++ b/platform/features/layout/res/templates/fixed.html @@ -1,26 +1,42 @@ -
- -
+
+
+
+
+ + +
+ + +
+ + + +
+
+
- - -
\ No newline at end of file diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index 60bc813c80..850441d15f 100644 --- a/platform/features/layout/src/FixedController.js +++ b/platform/features/layout/src/FixedController.js @@ -1,8 +1,8 @@ /*global define*/ define( - ['./LayoutDrag', './FixedProxy', './elements/ElementProxies'], - function (LayoutDrag, FixedProxy, ElementProxies) { + ['./FixedProxy', './elements/ElementProxies', './FixedDragHandle'], + function (FixedProxy, ElementProxies, FixedDragHandle) { "use strict"; var DEFAULT_DIMENSIONS = [ 2, 1 ], @@ -27,6 +27,8 @@ define( names = {}, // Cache names by ID values = {}, // Cache values by ID elementProxiesById = {}, + handles = [], + moveHandle, selection; // Refresh cell styles (e.g. because grid extent changed) @@ -64,6 +66,40 @@ define( }; } + // Update the style for a selected element + function updateSelectionStyle() { + var element = selection && selection.get(); + if (element) { + element.style = convertPosition(element); + } + } + + // Generate a specific drag handle + function generateDragHandle(elementHandle) { + return new FixedDragHandle( + elementHandle, + gridSize, + updateSelectionStyle, + $scope.commit + ); + } + + // Generate drag handles for an element + function generateDragHandles(element) { + return element.handles().map(generateDragHandle); + } + + // Select an element + function select(element) { + if (selection) { + // Update selection... + selection.select(element); + // ...as well as move, resize handles + moveHandle = generateDragHandle(element); + handles = generateDragHandles(element); + } + } + // Update the displayed value for this object function updateValue(telemetryObject) { var id = telemetryObject && telemetryObject.getId(); @@ -121,7 +157,7 @@ define( if (selection) { selection.deselect(); if (index > -1) { - selection.select(elementProxies[index]); + select(elementProxies[index]); } } @@ -183,9 +219,7 @@ define( // Refresh displayed elements refreshElements(); // Select the newly-added element - if (selection) { - selection.select(elementProxies[elementProxies.length - 1]); - } + select(elementProxies[elementProxies.length - 1]); // Mark change as persistable if ($scope.commit) { $scope.commit("Dropped an element."); @@ -201,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] @@ -274,82 +308,42 @@ define( return elementProxies; }, /** - * Check if the element is currently selected. + * Check if the element is currently selected, or (if no + * argument is supplied) get the currently selected element. * @returns {boolean} true if selected */ selected: function (element) { - return selection && selection.selected(element); + return selection && ((arguments.length > 0) ? + selection.selected(element) : selection.get()); }, /** * Set the active user selection in this view. * @param element the element to select */ - select: function (element) { - if (selection) { - selection.select(element); - } - }, + select: select, /** * Clear the current user selection. */ clearSelection: function () { if (selection) { selection.deselect(); + handles = []; + moveHandle = undefined; } }, /** - * Start a drag gesture to move/resize a frame. - * - * The provided position and dimensions factors will determine - * whether this is a move or a resize, and what type it - * will be. For instance, a position factor of [1, 1] - * will move a frame along with the mouse as the drag - * proceeds, while a dimension factor of [0, 0] will leave - * dimensions unchanged. Combining these in different - * ways results in different handles; a position factor of - * [1, 0] and a dimensions factor of [-1, 0] will implement - * a left-edge resize, as the horizontal position will move - * with the mouse while the horizontal dimensions shrink in - * kind (and vertical properties remain unmodified.) - * - * @param element the raw (undecorated) element to drag + * Get drag handles. + * @returns {Array} drag handles for the current selection */ - startDrag: function (element) { - // Only allow dragging in edit mode - if ($scope.domainObject && - $scope.domainObject.hasCapability('editor')) { - dragging = { - element: element, - x: element.x(), - y: element.y() - }; - } + handles: function () { + return handles; }, /** - * Continue an active drag gesture. - * @param {number[]} delta the offset, in pixels, - * of the current pointer position, relative - * to its position when the drag started + * Get the handle to handle dragging to reposition an element. + * @returns {FixedDragHandle} the drag handle */ - continueDrag: function (delta) { - if (dragging) { - // Update x/y values - dragging.element.x(dragging.x + Math.round(delta[0] / gridSize[0])); - dragging.element.y(dragging.y + Math.round(delta[1] / gridSize[1])); - // Update display position - dragging.element.style = convertPosition(dragging.element); - } - }, - /** - * End the active drag gesture. This will update the - * view configuration. - */ - endDrag: function () { - // Mark this object as dirty to encourage persistence - if (dragging && $scope.commit) { - dragging = undefined; - $scope.commit("Moved element."); - } + moveHandle: function () { + return moveHandle; } }; diff --git a/platform/features/layout/src/FixedDragHandle.js b/platform/features/layout/src/FixedDragHandle.js new file mode 100644 index 0000000000..c20cfa74a7 --- /dev/null +++ b/platform/features/layout/src/FixedDragHandle.js @@ -0,0 +1,96 @@ +/*global define*/ + +define( + [], + function () { + 'use strict'; + + + // Drag handle dimensions + var DRAG_HANDLE_SIZE = [ 6, 6 ]; + + /** + * Template-displayable drag handle for an element in fixed + * position mode. + * @constructor + */ + function FixedDragHandle(elementHandle, gridSize, update, commit) { + var self = {}, + dragging; + + // Generate ng-style-appropriate style for positioning + function getStyle() { + // Adjust from grid to pixel coordinates + var x = elementHandle.x() * gridSize[0], + y = elementHandle.y() * gridSize[1]; + + // Convert to a CSS style centered on that point + return { + left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px', + top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px', + width: DRAG_HANDLE_SIZE[0] + 'px', + height: DRAG_HANDLE_SIZE[1] + 'px' + }; + } + + // Begin a drag gesture + function startDrag() { + // Cache initial x/y positions + dragging = { x: elementHandle.x(), y: elementHandle.y() }; + } + + // Reposition during drag + function continueDrag(delta) { + if (dragging) { + // Update x/y positions (snapping to grid) + elementHandle.x( + dragging.x + Math.round(delta[0] / gridSize[0]) + ); + elementHandle.y( + dragging.y + Math.round(delta[1] / gridSize[1]) + ); + // Invoke update callback + if (update) { + update(); + } + } + } + + // Conclude a drag gesture + function endDrag() { + // Clear cached state + dragging = undefined; + // Mark change as complete + if (commit) { + commit("Dragged handle."); + } + } + + return { + /** + * Get a CSS style to position this drag handle. + * @returns CSS style object (for `ng-style`) + */ + style: getStyle, + /** + * Start a drag gesture. This should be called when a drag + * begins to track initial state. + */ + startDrag: startDrag, + /** + * Continue a drag gesture; update x/y positions. + * @param {number[]} delta x/y pixel difference since drag + * started + */ + continueDrag: continueDrag, + /** + * End a drag gesture. This should be callled when a drag + * concludes to trigger commit of changes. + */ + endDrag: endDrag + }; + } + + return FixedDragHandle; + } +); \ No newline at end of file diff --git a/platform/features/layout/src/elements/AccessorMutator.js b/platform/features/layout/src/elements/AccessorMutator.js index ac296ddd05..284bbd9b18 100644 --- a/platform/features/layout/src/elements/AccessorMutator.js +++ b/platform/features/layout/src/elements/AccessorMutator.js @@ -8,14 +8,26 @@ define( /** * Utility function for creating getter-setter functions, * since these are frequently useful for element proxies. + * + * An optional third argument may be supplied in order to + * constrain or modify arguments when using as a setter; + * this argument is a function which takes two arguments + * (the current value for the property, and the requested + * new value.) This is useful when values need to be kept + * in certain ranges; specifically, to keep x/y positions + * non-negative in a fixed position view. + * * @constructor * @param {Object} object the object to get/set values upon * @param {string} key the property to get/set + * @param {function} [updater] function used to process updates */ - function AccessorMutator(object, key) { + function AccessorMutator(object, key, updater) { return function (value) { if (arguments.length > 0) { - object[key] = value; + object[key] = updater ? + updater(value, object[key]) : + value; } return object[key]; }; diff --git a/platform/features/layout/src/elements/ElementFactory.js b/platform/features/layout/src/elements/ElementFactory.js index 3ae8cad80a..d80a8c420c 100644 --- a/platform/features/layout/src/elements/ElementFactory.js +++ b/platform/features/layout/src/elements/ElementFactory.js @@ -24,7 +24,7 @@ define( "fixed.text": { fill: "transparent", stroke: "transparent", - color: "#717171" + color: "#cccccc" } }, DIALOGS = { diff --git a/platform/features/layout/src/elements/ElementProxy.js b/platform/features/layout/src/elements/ElementProxy.js index 7d5fa3540b..f2e22f92de 100644 --- a/platform/features/layout/src/elements/ElementProxy.js +++ b/platform/features/layout/src/elements/ElementProxy.js @@ -1,8 +1,8 @@ /*global define*/ define( - ['./AccessorMutator'], - function (AccessorMutator) { + ['./AccessorMutator', './ResizeHandle'], + function (AccessorMutator, ResizeHandle) { "use strict"; // Index deltas for changes in order @@ -13,6 +13,11 @@ define( bottom: Number.NEGATIVE_INFINITY }; + // Ensure a value is non-negative (for x/y setters) + function clamp(value) { + return Math.max(value, 0); + } + /** * Abstract superclass for other classes which provide useful * interfaces upon an elements in a fixed position view. @@ -29,6 +34,8 @@ define( * @param {Array} elements the full array of elements */ function ElementProxy(element, index, elements) { + var handles = [ new ResizeHandle(element, 1, 1) ]; + return { /** * The element as stored in the view configuration. @@ -40,14 +47,14 @@ define( * @param {number} [x] the new x position (if setting) * @returns {number} the x position */ - x: new AccessorMutator(element, 'x'), + x: new AccessorMutator(element, 'x', clamp), /** * Get and/or set the y position of this element. * Units are in fixed position grid space. * @param {number} [y] the new y position (if setting) * @returns {number} the y position */ - y: new AccessorMutator(element, 'y'), + y: new AccessorMutator(element, 'y', clamp), /** * Get and/or set the stroke color of this element. * @param {string} [stroke] the new stroke color (if setting) @@ -97,6 +104,13 @@ define( if (elements[index] === element) { elements.splice(index, 1); } + }, + /** + * Get handles to control specific features of this element, + * e.g. corner size. + */ + handles: function () { + return handles; } }; } diff --git a/platform/features/layout/src/elements/LineHandle.js b/platform/features/layout/src/elements/LineHandle.js new file mode 100644 index 0000000000..03474df1c1 --- /dev/null +++ b/platform/features/layout/src/elements/LineHandle.js @@ -0,0 +1,61 @@ +/*global define*/ +define( + [], + function () { + 'use strict'; + + /** + * Handle for changing x/y position of a line's end point. + * This is used to support drag handles for line elements + * in a fixed position view. Field names for opposite ends + * are provided to avoid zero-length lines. + * @constructor + * @param element the line element + * @param {string} xProperty field which stores x position + * @param {string} yProperty field which stores x position + * @param {string} xOther field which stores x of other end + * @param {string} yOther field which stores y of other end + */ + function LineHandle(element, xProperty, yProperty, xOther, yOther) { + return { + /** + * Get/set the x position of the lower-right corner + * of the handle-controlled element, changing size + * as necessary. + */ + x: function (value) { + if (arguments.length > 0) { + // Ensure we stay in view + value = Math.max(value, 0); + // Make sure end points will still be different + if (element[yOther] !== element[yProperty] || + element[xOther] !== value) { + element[xProperty] = value; + } + } + return element[xProperty]; + }, + /** + * Get/set the y position of the lower-right corner + * of the handle-controlled element, changing size + * as necessary. + */ + y: function (value) { + if (arguments.length > 0) { + // Ensure we stay in view + value = Math.max(value, 0); + // Make sure end points will still be different + if (element[xOther] !== element[xProperty] || + element[yOther] !== value) { + element[yProperty] = value; + } + } + return element[yProperty]; + } + }; + } + + return LineHandle; + + } +); \ No newline at end of file diff --git a/platform/features/layout/src/elements/LineProxy.js b/platform/features/layout/src/elements/LineProxy.js index 14671689dd..dc4729ef6e 100644 --- a/platform/features/layout/src/elements/LineProxy.js +++ b/platform/features/layout/src/elements/LineProxy.js @@ -1,8 +1,8 @@ /*global define*/ define( - ['./ElementProxy'], - function (ElementProxy) { + ['./ElementProxy', './LineHandle'], + function (ElementProxy, LineHandle) { 'use strict'; /** @@ -15,7 +15,11 @@ define( * @param {Array} elements the full array of elements */ function LineProxy(element, index, elements) { - var proxy = new ElementProxy(element, index, elements); + var proxy = new ElementProxy(element, index, elements), + handles = [ + new LineHandle(element, 'x', 'y', 'x2', 'y2'), + new LineHandle(element, 'x2', 'y2', 'x', 'y') + ]; /** * Get the top-left x coordinate, in grid space, of @@ -24,7 +28,7 @@ define( */ proxy.x = function (v) { var x = Math.min(element.x, element.x2), - delta = v - x; + delta = Math.max(v, 0) - x; if (arguments.length > 0 && delta) { element.x += delta; element.x2 += delta; @@ -39,7 +43,7 @@ define( */ proxy.y = function (v) { var y = Math.min(element.y, element.y2), - delta = v - y; + delta = Math.max(v, 0) - y; if (arguments.length > 0 && delta) { element.y += delta; element.y2 += delta; @@ -105,6 +109,15 @@ define( return element.y2 - proxy.y(); }; + /** + * Get element handles for changing the position of end + * points of this line. + * @returns {LineHandle[]} line handles for both end points + */ + proxy.handles = function () { + return handles; + }; + return proxy; } diff --git a/platform/features/layout/src/elements/ResizeHandle.js b/platform/features/layout/src/elements/ResizeHandle.js new file mode 100644 index 0000000000..72c5963192 --- /dev/null +++ b/platform/features/layout/src/elements/ResizeHandle.js @@ -0,0 +1,53 @@ +/*global define*/ +define( + [], + function () { + 'use strict'; + + /** + * Handle for changing width/height properties of an element. + * This is used to support drag handles for different + * element types in a fixed position view. + * @constructor + */ + function ResizeHandle(element, minWidth, minHeight) { + // Ensure reasonable defaults + minWidth = minWidth || 0; + minHeight = minHeight || 0; + + return { + /** + * Get/set the x position of the lower-right corner + * of the handle-controlled element, changing size + * as necessary. + */ + x: function (value) { + if (arguments.length > 0) { + element.width = Math.max( + minWidth, + value - element.x + ); + } + return element.x + element.width; + }, + /** + * Get/set the y position of the lower-right corner + * of the handle-controlled element, changing size + * as necessary. + */ + y: function (value) { + if (arguments.length > 0) { + element.height = Math.max( + minHeight, + value - element.y + ); + } + return element.y + element.height; + } + }; + } + + return ResizeHandle; + + } +); \ No newline at end of file diff --git a/platform/features/layout/test/FixedControllerSpec.js b/platform/features/layout/test/FixedControllerSpec.js index 68562a0e28..d94c93fc13 100644 --- a/platform/features/layout/test/FixedControllerSpec.js +++ b/platform/features/layout/test/FixedControllerSpec.js @@ -170,6 +170,20 @@ define( .toHaveBeenCalledWith(elements[1]); }); + it("allows selection retrieval", function () { + // selected with no arguments should give the current + // selection + var elements; + + testModel.modified = 1; + findWatch("model.modified")(testModel.modified); + + elements = controller.getElements(); + controller.select(elements[1]); + mockScope.selection.get.andReturn(elements[1]); + expect(controller.selected()).toEqual(elements[1]); + }); + it("allows selections to be cleared", function () { var elements; @@ -303,6 +317,69 @@ define( jasmine.any(Object) ); }); + + it("exposes drag handles", function () { + var handles; + + // Select something so that drag handles are expected + testModel.modified = 1; + findWatch("model.modified")(testModel.modified); + controller.select(controller.getElements()[1]); + + // Should have a non-empty array of handles + handles = controller.handles(); + expect(handles).toEqual(jasmine.any(Array)); + expect(handles.length).not.toEqual(0); + + // And they should have start/continue/end drag methods + handles.forEach(function (handle) { + expect(handle.startDrag).toEqual(jasmine.any(Function)); + expect(handle.continueDrag).toEqual(jasmine.any(Function)); + expect(handle.endDrag).toEqual(jasmine.any(Function)); + }); + }); + + it("exposes a move handle", function () { + var handle; + + // Select something so that drag handles are expected + testModel.modified = 1; + findWatch("model.modified")(testModel.modified); + controller.select(controller.getElements()[1]); + + // Should have a move handle + handle = controller.moveHandle(); + + // And it should have start/continue/end drag methods + expect(handle.startDrag).toEqual(jasmine.any(Function)); + expect(handle.continueDrag).toEqual(jasmine.any(Function)); + expect(handle.endDrag).toEqual(jasmine.any(Function)); + }); + + it("updates selection style during drag", function () { + var oldStyle; + + // Select something so that drag handles are expected + testModel.modified = 1; + findWatch("model.modified")(testModel.modified); + controller.select(controller.getElements()[1]); + mockScope.selection.get.andReturn(controller.getElements()[1]); + + // Get style + oldStyle = controller.selected().style; + + // Start a drag gesture + controller.moveHandle().startDrag(); + + // Haven't moved yet; style shouldn't have updated yet + expect(controller.selected().style).toEqual(oldStyle); + + // Drag a little + controller.moveHandle().continueDrag([ 1000, 100 ]); + + // Style should have been updated + expect(controller.selected().style).not.toEqual(oldStyle); + }); }); } ); \ No newline at end of file diff --git a/platform/features/layout/test/FixedDragHandleSpec.js b/platform/features/layout/test/FixedDragHandleSpec.js new file mode 100644 index 0000000000..05040396d5 --- /dev/null +++ b/platform/features/layout/test/FixedDragHandleSpec.js @@ -0,0 +1,68 @@ +/*global define,describe,it,expect,beforeEach,jasmine,xit*/ + +define( + ['../src/FixedDragHandle'], + function (FixedDragHandle) { + "use strict"; + + var TEST_GRID_SIZE = [ 13, 33 ]; + + describe("A fixed position drag handle", function () { + var mockElementHandle, + mockUpdate, + mockCommit, + handle; + + beforeEach(function () { + mockElementHandle = jasmine.createSpyObj( + 'elementHandle', + [ 'x', 'y' ] + ); + mockUpdate = jasmine.createSpy('update'); + mockCommit = jasmine.createSpy('commit'); + + mockElementHandle.x.andReturn(6); + mockElementHandle.y.andReturn(8); + + handle = new FixedDragHandle( + mockElementHandle, + TEST_GRID_SIZE, + mockUpdate, + mockCommit + ); + }); + + it("provides a style for positioning", function () { + var style = handle.style(); + // 6 grid coords * 13 pixels - 3 pixels for centering + expect(style.left).toEqual('75px'); + // 8 grid coords * 33 pixels - 3 pixels for centering + expect(style.top).toEqual('261px'); + }); + + it("allows handles to be dragged", function () { + handle.startDrag(); + handle.continueDrag([ 16, 8 ]); + + // Should update x/y, snapped to grid + expect(mockElementHandle.x).toHaveBeenCalledWith(7); + expect(mockElementHandle.y).toHaveBeenCalledWith(8); + + handle.continueDrag([ -16, -35 ]); + + // Should have interpreted relative to initial state + expect(mockElementHandle.x).toHaveBeenCalledWith(5); + expect(mockElementHandle.y).toHaveBeenCalledWith(7); + + // Should have called update once per continueDrag + expect(mockUpdate.calls.length).toEqual(2); + + // Finally, ending drag should commit + expect(mockCommit).not.toHaveBeenCalled(); + handle.endDrag(); + expect(mockCommit).toHaveBeenCalled(); + }); + + }); + } +); \ No newline at end of file diff --git a/platform/features/layout/test/elements/ElementProxySpec.js b/platform/features/layout/test/elements/ElementProxySpec.js index ab90204ce0..b05061594c 100644 --- a/platform/features/layout/test/elements/ElementProxySpec.js +++ b/platform/features/layout/test/elements/ElementProxySpec.js @@ -47,6 +47,13 @@ define( proxy.order("top"); expect(testElements).toEqual([{}, {}, {}, testElement]); }); + + it("ensures x/y values are non-negative", function () { + proxy.x(-1); + proxy.y(-400); + expect(proxy.x()).toEqual(0); + expect(proxy.y()).toEqual(0); + }); }); } ); diff --git a/platform/features/layout/test/elements/LineHandleSpec.js b/platform/features/layout/test/elements/LineHandleSpec.js new file mode 100644 index 0000000000..25d51f617e --- /dev/null +++ b/platform/features/layout/test/elements/LineHandleSpec.js @@ -0,0 +1,54 @@ +/*global define,describe,it,expect,beforeEach,jasmine,xit*/ + +define( + ['../../src/elements/LineHandle'], + function (LineHandle) { + "use strict"; + + describe("A fixed position drag handle", function () { + var testElement, + handle; + + beforeEach(function () { + testElement = { + x: 3, + y: 42, + x2: 8, + y2: 11 + }; + + handle = new LineHandle(testElement, 'x', 'y', 'x2', 'y2'); + }); + + it("provides x/y grid coordinates for its corner", function () { + expect(handle.x()).toEqual(3); + expect(handle.y()).toEqual(42); + }); + + it("changes x and y positions", function () { + handle.x(30); + expect(testElement.x).toEqual(30); + handle.y(40); + expect(testElement.y).toEqual(40); + }); + + it("disallows values less than zero", function () { + handle.x(-1); + handle.y(-400); + expect(testElement.x).toEqual(0); + expect(testElement.y).toEqual(0); + }); + + it("ensures that end points remain different", function () { + handle.x(testElement.x2); + handle.y(testElement.y2); + // First change should have been fine, because y was different + expect(testElement.x).toEqual(testElement.x2); + // Second change should have been rejected + expect(testElement.y).not.toEqual(testElement.y2); + }); + + + }); + } +); \ No newline at end of file diff --git a/platform/features/layout/test/elements/LineProxySpec.js b/platform/features/layout/test/elements/LineProxySpec.js index fe38c7c3c9..9e2ed88b44 100644 --- a/platform/features/layout/test/elements/LineProxySpec.js +++ b/platform/features/layout/test/elements/LineProxySpec.js @@ -67,6 +67,10 @@ define( expect(proxy.y2()).toEqual(0); }); + it("provides handles for both ends", function () { + expect(new LineProxy(diagonal).handles().length).toEqual(2); + }); + }); } ); \ No newline at end of file diff --git a/platform/features/layout/test/elements/ResizeHandleSpec.js b/platform/features/layout/test/elements/ResizeHandleSpec.js new file mode 100644 index 0000000000..49168aa5cd --- /dev/null +++ b/platform/features/layout/test/elements/ResizeHandleSpec.js @@ -0,0 +1,59 @@ +/*global define,describe,it,expect,beforeEach,jasmine,xit*/ + +define( + ['../../src/elements/ResizeHandle'], + function (ResizeHandle) { + "use strict"; + + var TEST_MIN_WIDTH = 4, TEST_MIN_HEIGHT = 2; + + describe("A fixed position drag handle", function () { + var testElement, + handle; + + beforeEach(function () { + testElement = { + x: 3, + y: 42, + width: 30, + height: 36 + }; + + handle = new ResizeHandle( + testElement, + TEST_MIN_WIDTH, + TEST_MIN_HEIGHT + ); + }); + + it("provides x/y grid coordinates for lower-right corner", function () { + expect(handle.x()).toEqual(33); + expect(handle.y()).toEqual(78); + }); + + it("changes width of an element", function () { + handle.x(30); + // Should change width, not x + expect(testElement.x).toEqual(3); + expect(testElement.width).toEqual(27); + }); + + it("changes height of an element", function () { + handle.y(60); + // Should change height, not y + expect(testElement.y).toEqual(42); + expect(testElement.height).toEqual(18); + }); + + it("enforces minimum width/height", function () { + handle.x(testElement.x); + handle.y(testElement.y); + expect(testElement.x).toEqual(3); + expect(testElement.y).toEqual(42); + expect(testElement.width).toEqual(TEST_MIN_WIDTH); + expect(testElement.height).toEqual(TEST_MIN_HEIGHT); + }); + + }); + } +); \ No newline at end of file diff --git a/platform/features/layout/test/suite.json b/platform/features/layout/test/suite.json index 774cc00819..3bc1a259c1 100644 --- a/platform/features/layout/test/suite.json +++ b/platform/features/layout/test/suite.json @@ -1,5 +1,6 @@ [ "FixedController", + "FixedDragHandle", "FixedProxy", "LayoutController", "LayoutDrag", @@ -9,6 +10,7 @@ "elements/ElementProxies", "elements/ElementProxy", "elements/LineProxy", + "elements/ResizeHandle", "elements/TelemetryProxy", "elements/TextProxy" ] \ No newline at end of file diff --git a/platform/forms/res/templates/controls/button.html b/platform/forms/res/templates/controls/button.html index 730a67dd8b..c826738641 100644 --- a/platform/forms/res/templates/controls/button.html +++ b/platform/forms/res/templates/controls/button.html @@ -1,5 +1,4 @@ - diff --git a/platform/forms/res/templates/controls/checkbox.html b/platform/forms/res/templates/controls/checkbox.html index 0152677ce6..c8d09f0303 100644 --- a/platform/forms/res/templates/controls/checkbox.html +++ b/platform/forms/res/templates/controls/checkbox.html @@ -3,5 +3,5 @@ name="mctControl" ng-model="ngModel[field]" ng-disabled="ngDisabled"> -   + diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html index 31f9f3bec2..c4684a773d 100644 --- a/platform/forms/res/templates/controls/color.html +++ b/platform/forms/res/templates/controls/color.html @@ -1,36 +1,45 @@ -
+
{{structure.glyph}} {{structure.text}} - - v - + v -
-
-
- {{ngModel[field] === 'transparent' ? 'x' : '' }} +
+
+
+ {{ngModel[field] === 'transparent' ? '2' : '' }}
- None + None
-
-
- {{ngModel[field] === color ? 'x' : '' }} +
+
+ {{ngModel[field] === color ? '2' : '' }}
-
\ No newline at end of file diff --git a/platform/forms/res/templates/controls/composite.html b/platform/forms/res/templates/controls/composite.html index f6a4d9f46a..3de753d6f9 100644 --- a/platform/forms/res/templates/controls/composite.html +++ b/platform/forms/res/templates/controls/composite.html @@ -1,15 +1,17 @@ - - - - {{item.name}} - +
+ + + + {{item.name}} + +
- \ No newline at end of file + diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html index cb6b7e565b..53a2d81faf 100644 --- a/platform/forms/res/templates/controls/menu-button.html +++ b/platform/forms/res/templates/controls/menu-button.html @@ -1,7 +1,7 @@ -
- + {{structure.glyph}} {{structure.text}} @@ -14,8 +14,8 @@