From 8018c8f42e576e34a2e0cc3fd24365fcd4d82333 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 20 Mar 2015 16:37:42 -0700 Subject: [PATCH 1/2] [Frontend] Sanding and polishing on common front-end elements WTD-1048 Originally did a lot of this work in warp1048 by mistake This commit pulls in all /platform-only changes from that branch Mods are mostly related to WTD-1046 specifically, but also touch toolbar and buttons --- .../general/res/css/theme-espresso.css | 150 ++++++------ platform/commonUI/general/res/css/tree.css | 207 +++++++++------- .../commonUI/general/res/sass/_constants.scss | 2 +- .../general/res/sass/_fixed-position.scss | 29 ++- .../general/res/sass/controls/_controls.scss | 7 +- .../general/res/sass/controls/_lists.scss | 9 + .../commonUI/general/res/sass/tree/_tree.scss | 225 ++++++++++-------- .../res/sass/user-environ/_layout.scss | 2 +- .../res/sass/user-environ/_tool-bar.scss | 4 +- .../res/templates/controls/selector.html | 19 +- .../commonUI/general/res/templates/label.html | 2 +- .../general/res/templates/tree-node.html | 32 ++- platform/features/layout/bundle.json | 2 +- platform/forms/res/templates/toolbar.html | 2 +- 14 files changed, 399 insertions(+), 293 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 1f8bf7ecd2..64518bca00 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -218,7 +218,7 @@ span { .user-environ .edit-area .tool-bar { bottom: auto; height: 35px; - line-height: 33px; } + line-height: 28px; } /* line 38, ../sass/user-environ/_layout.scss */ .user-environ .edit-area .work-area { top: 45px; } @@ -388,20 +388,6 @@ span { 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; @@ -472,7 +458,21 @@ span { border: 1px solid #0099cc; position: absolute; } -/* line 103, ../sass/_fixed-position.scss */ +/* line 105, ../sass/_fixed-position.scss */ +.edit-mode .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 109, ../sass/_fixed-position.scss */ +.edit-mode .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 118, ../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); } @@ -1126,8 +1126,7 @@ a.l-btn span { .btn-bar .btn, .btn-bar .btn-set, .btn-bar .t-btn { - display: inline-block; - margin-left: 5px; } + display: inline-block; } /* line 157, ../sass/controls/_controls.scss */ .l-composite-control { @@ -1137,23 +1136,24 @@ a.l-btn span { line-height: 18px; } /* line 166, ../sass/controls/_controls.scss */ -.control-group { +.l-control-group { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid #4d4d4d; + display: inline-block; padding: 0 5px; position: relative; } - /* line 173, ../sass/controls/_controls.scss */ - .control-group:first-child { + /* line 174, ../sass/controls/_controls.scss */ + .l-control-group:first-child { border-left: none; padding-left: 0; } -/* line 179, ../sass/controls/_controls.scss */ +/* line 180, ../sass/controls/_controls.scss */ .btn-set { display: inline-block; position: relative; } - /* line 184, ../sass/controls/_controls.scss */ + /* line 185, ../sass/controls/_controls.scss */ .btn-set .btn, .btn-set .t-btn { -webkit-border-radius: 0; @@ -1163,7 +1163,7 @@ a.l-btn span { border-radius: 0; border-left: 1px solid #666666; margin-left: 0; } - /* line 188, ../sass/controls/_controls.scss */ + /* line 189, ../sass/controls/_controls.scss */ .btn-set .btn:first-child, .btn-set .t-btn:first-child { border-left: none; @@ -1173,7 +1173,7 @@ a.l-btn span { -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; } - /* line 192, ../sass/controls/_controls.scss */ + /* line 193, ../sass/controls/_controls.scss */ .btn-set .btn:last-child, .btn-set .t-btn:last-child { -moz-border-radius-topright: 3px; @@ -1183,7 +1183,7 @@ a.l-btn span { -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; } -/* line 203, ../sass/controls/_controls.scss */ +/* line 204, ../sass/controls/_controls.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, .top-bar .buttons-main .btn, @@ -1194,7 +1194,7 @@ a.l-btn span { font-size: 12.6px; height: 28px; line-height: 28px; } - /* line 209, ../sass/controls/_controls.scss */ + /* line 210, ../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), @@ -1204,7 +1204,7 @@ a.l-btn span { font-size: 150%; vertical-align: middle; } -/* line 217, ../sass/controls/_controls.scss */ +/* line 218, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; display: inline-block; @@ -1213,13 +1213,13 @@ label.checkbox.custom { padding-left: 19px; position: relative; vertical-align: top; } - /* line 228, ../sass/controls/_controls.scss */ + /* line 229, ../sass/controls/_controls.scss */ label.checkbox.custom em { color: #999999; display: inline-block; height: 14px; min-width: 14px; } - /* line 233, ../sass/controls/_controls.scss */ + /* line 234, ../sass/controls/_controls.scss */ label.checkbox.custom em:before { -webkit-border-radius: 2.25px; -moz-border-radius: 2.25px; @@ -1240,51 +1240,51 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 251, ../sass/controls/_controls.scss */ + /* line 252, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 257, ../sass/controls/_controls.scss */ + /* line 258, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 261, ../sass/controls/_controls.scss */ + /* line 262, ../sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 263, ../sass/controls/_controls.scss */ + /* line 264, ../sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 271, ../sass/controls/_controls.scss */ +/* line 272, ../sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 273, ../sass/controls/_controls.scss */ + /* line 274, ../sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 277, ../sass/controls/_controls.scss */ + /* line 278, ../sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 280, ../sass/controls/_controls.scss */ + /* line 281, ../sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 285, ../sass/controls/_controls.scss */ +/* line 286, ../sass/controls/_controls.scss */ .btn-menu label.checkbox.custom { margin-left: 5px; } -/* line 290, ../sass/controls/_controls.scss */ +/* line 291, ../sass/controls/_controls.scss */ .item .checkbox.checked label { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 296, ../sass/controls/_controls.scss */ +/* line 297, ../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); @@ -1315,42 +1315,42 @@ label.checkbox.custom { background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: linear-gradient(#666666, #4d4d4d); } - /* line 303, ../sass/controls/_controls.scss */ + /* line 304, ../sass/controls/_controls.scss */ .btn-menu.dropdown { - padding-left: 5px; - padding-right: 5px; } - /* line 309, ../sass/controls/_controls.scss */ + padding-left: 10px; + padding-right: 10px; } + /* line 310, ../sass/controls/_controls.scss */ .btn-menu:not(.disabled):hover { color: #cccccc; } - /* line 313, ../sass/controls/_controls.scss */ + /* line 314, ../sass/controls/_controls.scss */ .btn-menu.btn-invoke-menu { color: #0099cc; padding: 0 5px; } - /* line 317, ../sass/controls/_controls.scss */ + /* line 318, ../sass/controls/_controls.scss */ .btn-menu.btn-invoke-menu:hover { color: deepskyblue; } - /* line 327, ../sass/controls/_controls.scss */ + /* line 328, ../sass/controls/_controls.scss */ .btn-menu .type-icon { margin-right: 5px; } - /* line 330, ../sass/controls/_controls.scss */ + /* line 331, ../sass/controls/_controls.scss */ .btn-menu .menu { position: absolute; left: 0; text-align: left; } - /* line 335, ../sass/controls/_controls.scss */ + /* line 336, ../sass/controls/_controls.scss */ .btn-menu .menu .ui-symbol.icon { width: 12px; } -/* line 341, ../sass/controls/_controls.scss */ +/* line 342, ../sass/controls/_controls.scss */ .top-bar .btn-menu { height: 35px; line-height: 35px; padding-right: 10px; } - /* line 349, ../sass/controls/_controls.scss */ + /* line 350, ../sass/controls/_controls.scss */ .top-bar .btn-menu.browse-btn { margin-right: 5px; padding-left: 35px; } - /* line 352, ../sass/controls/_controls.scss */ + /* line 353, ../sass/controls/_controls.scss */ .top-bar .btn-menu.browse-btn .badge { -webkit-border-radius: 4.5px; -moz-border-radius: 4.5px; @@ -1369,30 +1369,30 @@ label.checkbox.custom { height: auto; } /******************************************************** OBJECT-HEADER */ -/* line 369, ../sass/controls/_controls.scss */ +/* line 370, ../sass/controls/_controls.scss */ .object-header { display: inline-block; font-size: 1em; } - /* line 372, ../sass/controls/_controls.scss */ + /* line 373, ../sass/controls/_controls.scss */ .object-header .title { color: white; } - /* line 375, ../sass/controls/_controls.scss */ + /* line 376, ../sass/controls/_controls.scss */ .object-header .type-icon { font-size: 1.5em; margin-right: 5px; vertical-align: middle; } -/* line 384, ../sass/controls/_controls.scss */ +/* line 385, ../sass/controls/_controls.scss */ .top-bar .object-header, .object-browse-bar .object-header { font-size: 1.1em; } - /* line 386, ../sass/controls/_controls.scss */ + /* line 387, ../sass/controls/_controls.scss */ .top-bar .object-header span, .object-browse-bar .object-header span { display: inline-block; } /******************************************************** VIEW-CONTROLS */ -/* line 395, ../sass/controls/_controls.scss */ +/* line 396, ../sass/controls/_controls.scss */ .view-controls .view-type { -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -1406,16 +1406,16 @@ label.checkbox.custom { line-height: 20px; padding-left: 5px; padding-right: 5px; } - /* line 406, ../sass/controls/_controls.scss */ + /* line 407, ../sass/controls/_controls.scss */ .view-controls .view-type.cur { background: #666666; } -/* line 411, ../sass/controls/_controls.scss */ +/* line 412, ../sass/controls/_controls.scss */ .edit-mode .top-bar .control-set.edit-view-controls { margin-right: 50px; } /******************************************************** SLIDERS */ -/* line 422, ../sass/controls/_controls.scss */ +/* line 423, ../sass/controls/_controls.scss */ .slider .slot { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -1438,7 +1438,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 433, ../sass/controls/_controls.scss */ +/* line 434, ../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); @@ -1489,12 +1489,12 @@ label.checkbox.custom { /* line 120, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { border-color: rgba(0, 153, 204, 0.9); } - /* line 444, ../sass/controls/_controls.scss */ + /* line 445, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 451, ../sass/controls/_controls.scss */ +/* line 452, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -1505,12 +1505,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 461, ../sass/controls/_controls.scss */ + /* line 462, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 469, ../sass/controls/_controls.scss */ +/* line 470, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -1529,7 +1529,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 475, ../sass/controls/_controls.scss */ +/* line 476, ../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); @@ -1548,7 +1548,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 482, ../sass/controls/_controls.scss */ + /* line 483, ../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); @@ -1556,7 +1556,7 @@ label.checkbox.custom { background-image: -o-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 487, ../sass/controls/_controls.scss */ +/* line 488, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -1568,6 +1568,10 @@ label.checkbox.custom { .checkbox-list li { margin-bottom: 5px; } +/* line 14, ../sass/controls/_lists.scss */ +.l-tree-item-flat-list .tree-item .label { + left: 5px !important; } + /******************************************************** MENUS */ /* line 2, ../sass/controls/_menus.scss */ .menu-element { @@ -1621,7 +1625,7 @@ label.checkbox.custom { box-sizing: border-box; border-top: 1px solid #737373; line-height: 1.5rem; - padding: 3px 10px 3px 32px; + padding: 3px 10px 3px 35px; white-space: nowrap; } /* line 25, ../sass/controls/_menus.scss */ .menu-element .menu ul li:first-child { @@ -2633,8 +2637,8 @@ input[type="text"] { .tool-bar { border-bottom: 1px solid #4d4d4d; } /* line 3, ../sass/user-environ/_tool-bar.scss */ - .tool-bar .control-group { - height: 35px; } + .tool-bar .l-control-group { + height: 28px; } /* line 6, ../sass/user-environ/_tool-bar.scss */ .tool-bar input[type="text"] { -webkit-box-sizing: border-box; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index f1987f530d..9afd2d8968 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -7,96 +7,135 @@ ul.tree { list-style-type: none; margin: 0; padding: 0; } - /* line 4, ../sass/tree/_tree.scss */ - ul.tree li .tree-item { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - -webkit-transition: background-color 0.25s; - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - transition: background-color 0.25s; + /* line 3, ../sass/tree/_tree.scss */ + ul.tree li { display: block; - font-size: 0.80rem; - height: 1.5rem; - line-height: 1.5rem; - margin-bottom: 3px; position: relative; } - /* line 17, ../sass/tree/_tree.scss */ - ul.tree li .tree-item.loading { - color: #666666; - font-style: italic; } - /* line 20, ../sass/tree/_tree.scss */ - ul.tree li .tree-item.loading .wait-spinner { - margin-left: 14px; } - /* line 24, ../sass/tree/_tree.scss */ - ul.tree li .tree-item:not(.loading) { - cursor: pointer; } - /* line 26, ../sass/tree/_tree.scss */ - ul.tree li .tree-item:not(.loading):hover { + /* line 6, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-transition: background-color 0.25s; + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + transition: background-color 0.25s; + display: block; + font-size: 0.80rem; + height: 1.5rem; + line-height: 1.5rem; + margin-bottom: 3px; + position: relative; } + /* line 17, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .view-control { + display: inline-block; + margin-left: 5px; + width: 10px; } + /* line 23, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .view-control:hover { + color: #ffc700; } + /* line 28, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .label { + display: block; + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + left: 20px; } + /* line 34, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .label .type-icon { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; + color: #0099cc; } + /* line 38, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .label .type-icon .alert { + text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px; + background: #333333; + color: #ff3c00; + font-size: 0.7em; + margin-top: -3px; + top: 0; + right: auto; + bottom: auto; + left: 9px; + height: auto; + width: auto; + position: absolute; + z-index: 2; } + /* line 54, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .label .title-label { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + display: block; + left: 25px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 66, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.loading { + pointer-events: none; } + /* line 68, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.loading .label { + opacity: 0.5; } + /* line 70, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.loading .label .title-label { + font-style: italic; } + /* line 74, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.loading .wait-spinner { + margin-left: 14px; } + /* line 79, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.selected { + background: #005177; + color: white; } + /* line 83, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.selected .view-control { + color: #0099cc; } + /* line 86, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item.selected .label .type-icon { + color: #fff; } + /* line 92, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 29, ../sass/tree/_tree.scss */ - ul.tree li .tree-item:not(.loading):hover .context-trigger { + /* line 95, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover .context-trigger { display: block; } - /* line 32, ../sass/tree/_tree.scss */ - ul.tree li .tree-item:not(.loading):hover .icon { + /* line 98, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.selected):hover .icon { color: #33ccff; } - /* line 37, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .selected { - color: #fff; } - /* line 40, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .view-control { - display: inline-block; - width: 10px; } - /* line 46, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .view-control:hover { - color: #ffc700; } - /* line 50, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .context-trigger { - display: none; - top: -1px; - position: absolute; - right: 3px; } - /* line 56, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .context-trigger .btn-invoke-menu { - font-size: 0.75em; - height: 0.9rem; - line-height: 0.9rem; } - /* line 62, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .icon { - text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; - color: #0099cc; - left: 15px; } - /* line 67, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .icon .alert { - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px; - background: #333333; - color: #ff3c00; - font-size: 0.7em; - margin-top: -3px; - top: 0; - right: auto; - bottom: auto; - left: 9px; - height: auto; - width: auto; + /* line 104, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item:not(.loading) { + cursor: pointer; } + /* line 109, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .context-trigger { + display: none; + top: -1px; position: absolute; - z-index: 2; } - /* line 83, ../sass/tree/_tree.scss */ - ul.tree li .tree-item .title-label { - display: block; - position: absolute; - top: 0; - left: 37px; - right: 0; - overflow: hidden; - text-overflow: ellipsis; - height: 1.5rem; - bottom: auto; - white-space: nowrap; } - /* line 99, ../sass/tree/_tree.scss */ + right: 3px; } + /* line 115, ../sass/tree/_tree.scss */ + ul.tree li span.tree-item .context-trigger .btn-invoke-menu { + font-size: 0.75em; + height: 0.9rem; + line-height: 0.9rem; } + /* line 124, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 6bff1ed739..a7b0a5e364 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -58,7 +58,7 @@ $colorItemSelected: $colorKey; // Tree $treeVCW: 10px; -$treeTypeIconW: 17px; +$treeTypeIconW: 20px; $treeContextTriggerW: 20px; $colorItemTreeIcon: $colorKey; $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index 003123844d..fed295383c 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -14,13 +14,13 @@ 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-grid-x { +// @include bgTicks($colorGridLines, 'x'); +// } +// +// &.l-grid-y { +// @include bgTicks($colorGridLines, 'y'); +// } } } } @@ -99,6 +99,21 @@ } .edit-mode .t-fixed-position { + &.l-fixed-position { + .l-grid-holder { + .l-grid { + &.l-grid-x { + @include bgTicks($colorGridLines, 'x'); + } + + &.l-grid-y { + @include bgTicks($colorGridLines, 'y'); + } + } + } + } + + .l-fixed-position-item { &:not(.s-selected):hover { border: 1px dotted rgba($colorKey, 0.5); diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 3aec688f64..6cf994cfb2 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -144,7 +144,7 @@ .btn-set, .t-btn { display: inline-block; - margin-left: $interiorMargin; +// margin-left: $interiorMargin; } .btn, .t-btn { @@ -163,11 +163,12 @@ } } -.control-group { +.l-control-group { // Buttons that have a conceptual grouping - internal space between, and a divider between groups. // @include test(); @include box-sizing(border-box); border-left: 1px solid $colorInteriorBorder; + display: inline-block; padding: 0 $interiorMargin; position: relative; &:first-child { @@ -295,7 +296,7 @@ label.checkbox.custom { .btn-menu { $h: 20px; - $p: $interiorMargin; + $p: $interiorMargin * 2; $c: $colorBodyFg; @include btnSubtle($colorBodyBg); height: $h; diff --git a/platform/commonUI/general/res/sass/controls/_lists.scss b/platform/commonUI/general/res/sass/controls/_lists.scss index f4fad460af..6dae8643c5 100644 --- a/platform/commonUI/general/res/sass/controls/_lists.scss +++ b/platform/commonUI/general/res/sass/controls/_lists.scss @@ -6,4 +6,13 @@ li { margin-bottom: $interiorMargin; } +} + +.l-tree-item-flat-list { + // For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow. + .tree-item { + .label { + left: $interiorMargin !important; + } + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 1890bc0a89..9c4be5e773 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -1,102 +1,127 @@ ul.tree { - @include menuUlReset(); - li { - .tree-item { -// @include test(); - @include border-radius($basicCr); - @include single-transition(background-color, 0.25s); - display: block; - font-size: 0.80rem; - height: $menuLineH; - line-height: $menuLineH; - margin-bottom: $interiorMarginSm; -// overflow: hidden; -// padding: 2px 4px 2px 7px; - position: relative; -// white-space: nowrap; - &.loading { - color: darken($colorBodyFg, 20%); - font-style: italic; - .wait-spinner { - margin-left: 14px; - } - } - &:not(.loading) { - cursor: pointer; - &:hover { - background: lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } - .icon { - color: $colorItemTreeIconHover; - } - } - } - .selected { - color: #fff; - } - .view-control { -// @include test(); - display: inline-block; -// margin-right: $interiorMargin; -// vertical-align: middle; - width: $treeVCW; - &:hover { - color: $colorItemTreeVCHover; - } - } - .context-trigger { - $h: 0.9rem; - display: none; - top: -1px; - position: absolute; - right: $interiorMarginSm; - .btn-invoke-menu { - font-size: 0.75em; - height: $h; - line-height: $h; - } - } - .icon { -// @include test(); - @include txtShdwSubtle(0.6); - color: $colorItemTreeIcon; - left: $treeVCW + $interiorMargin; - .alert { - @include txtShdwSubtle(0.3); - background: $colorBodyBg; - color: $colorAlert; - font-size: 0.7em; - margin-top: -3px; - top: 0; - right: auto; - bottom: auto; - left: 9px; - height: auto; - width: auto; - position: absolute; - z-index: 2; - } - } - .title-label { -// @include test(); - display: block; - position: absolute; - top: 0; - left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px; -// right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used - right: 0; - overflow: hidden; - text-overflow: ellipsis; - height: $menuLineH; - bottom: auto; - white-space: nowrap; - } - } - } - ul.tree { - margin-left: $treeVCW + $interiorMargin; - } + @include menuUlReset(); + li { + display: block; + position: relative; + span.tree-item { + $runningItemW: 0; + @include border-radius($basicCr); + @include single-transition(background-color, 0.25s); + display: block; + font-size: 0.80rem; + height: $menuLineH; + line-height: $menuLineH; + margin-bottom: $interiorMarginSm; + position: relative; + + .view-control { + display: inline-block; + margin-left: $interiorMargin; + // vertical-align: middle; + width: $treeVCW; + $runningItemW: $interiorMargin + $treeVCW; + &:hover { + color: $colorItemTreeVCHover; + } + } + + .label { + display: block; +// border: 1px solid rgba(blue, 0.5); + @include absPosDefault(); + left: $runningItemW + $interiorMargin; + + .type-icon { + @include absPosDefault(); + @include txtShdwSubtle(0.6); + color: $colorItemTreeIcon; + .alert { + @include txtShdwSubtle(0.3); + background: $colorBodyBg; + color: $colorAlert; + font-size: 0.7em; + margin-top: -3px; + top: 0; + right: auto; + bottom: auto; + left: 9px; + height: auto; + width: auto; + position: absolute; + z-index: 2; + } + } + .title-label { + @include absPosDefault(); + display: block; + left: $runningItemW + ($interiorMargin * 2); + // right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used + overflow: hidden; + text-overflow: ellipsis; +// height: $menuLineH; + white-space: nowrap; + } + } + + &.loading { + pointer-events: none; + .label { + opacity: 0.5; + .title-label { + font-style: italic; + } + } + .wait-spinner { + margin-left: 14px; + } + } + + &.selected { + $c: #fff; + background: #005177; + color: $c; + .view-control { + color: $colorItemTreeIcon; + } + .label .type-icon { + color: #fff; //$colorItemTreeIconHover; + } + } + + &:not(.selected) { + &:hover { + background: lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { + display: block; + } + .icon { + color: $colorItemTreeIconHover; + } + } + } + + &:not(.loading) { + cursor: pointer; + // @include tree-item-hover(); + } + + .context-trigger { + $h: 0.9rem; + display: none; + top: -1px; + position: absolute; + right: $interiorMarginSm; + .btn-invoke-menu { + font-size: 0.75em; + height: $h; + line-height: $h; + } + } + } + } + + ul.tree { + margin-left: $treeVCW + $interiorMargin; + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 0c7918b400..8feab2cb7e 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -33,7 +33,7 @@ .tool-bar { bottom: auto; height: $tbH; - line-height: $tbH - 2; + line-height: $ueEditToolBarButtonH; } .work-area { top: $tbH + $interiorMargin * 2; diff --git a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss index 5878e9cf8f..ac1d319280 100644 --- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss @@ -1,7 +1,7 @@ .tool-bar { border-bottom: 1px solid $colorInteriorBorder; - .control-group { - height: $ueEditToolBarH; + .l-control-group { + height: $ueEditToolBarButtonH; } input[type="text"] { @include box-sizing(border-box); diff --git a/platform/commonUI/general/res/templates/controls/selector.html b/platform/commonUI/general/res/templates/controls/selector.html index 538b6b2a83..35733daf9f 100644 --- a/platform/commonUI/general/res/templates/controls/selector.html +++ b/platform/commonUI/general/res/templates/controls/selector.html @@ -13,7 +13,7 @@ Showing {{shown}} of {{count}} available options. -
+
@@ -46,15 +46,20 @@ Showing {{shown}} of {{count}} available options.
-
+
  • - + + - +
diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index d053199b49..cce26f08cd 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -1,4 +1,4 @@ - + {{type.getGlyph()}} diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 9e0a82353d..e97780c001 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -1,21 +1,29 @@ - - + + {{toggle.isActive() ? "v" : ">"}} - + - +
Date: Fri, 20 Mar 2015 16:48:14 -0700 Subject: [PATCH 2/2] [Frontend] CSS change to center fixed position images WTD-1048 WTD-957 --- .../general/res/css/theme-espresso.css | 32 +++++++++---------- .../general/res/sass/_fixed-position.scss | 10 +----- 2 files changed, 17 insertions(+), 25 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 64518bca00..b4494bc29a 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -388,21 +388,21 @@ span { width: 100%; pointer-events: none; z-index: 0; } -/* line 28, ../sass/_fixed-position.scss */ +/* line 21, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item { position: absolute; border: 1px solid transparent; } - /* line 32, ../sass/_fixed-position.scss */ + /* line 25, ../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 */ + /* line 30, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item.s-not-selected { opacity: 0.8; } - /* line 43, ../sass/_fixed-position.scss */ + /* line 36, ../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 { @@ -411,20 +411,20 @@ span { box-sizing: border-box; height: 100%; width: 100%; } - /* line 51, ../sass/_fixed-position.scss */ + /* line 44, ../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 */ + background-position: center; } + /* line 50, ../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 */ + /* line 55, ../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 */ + /* line 60, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem { overflow: hidden; position: absolute; @@ -438,41 +438,41 @@ span { -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } - /* line 71, ../sass/_fixed-position.scss */ + /* line 64, ../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 */ + /* line 68, ../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 */ + /* line 73, ../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 */ +/* line 84, ../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 105, ../sass/_fixed-position.scss */ +/* line 98, ../sass/_fixed-position.scss */ .edit-mode .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 109, ../sass/_fixed-position.scss */ +/* line 102, ../sass/_fixed-position.scss */ .edit-mode .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 118, ../sass/_fixed-position.scss */ +/* line 110, ../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); } diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index fed295383c..577850ed61 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -14,13 +14,6 @@ height: 100%; width: 100%; pointer-events: none; z-index: 0; -// &.l-grid-x { -// @include bgTicks($colorGridLines, 'x'); -// } -// -// &.l-grid-y { -// @include bgTicks($colorGridLines, 'y'); -// } } } } @@ -51,7 +44,7 @@ .l-fixed-position-image { background-size: cover; background-repeat: no-repeat; - background-position: left top; + background-position: center; } .l-fixed-position-text { @@ -113,7 +106,6 @@ } } - .l-fixed-position-item { &:not(.s-selected):hover { border: 1px dotted rgba($colorKey, 0.5);