From 930b13f9a00f864fc1d0f31c8be290118de113a3 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 16:06:31 -0800 Subject: [PATCH] [Frontend] Added s-status-pending spinner to tree-item open #431 Refinements of tree item sizes and spacing; Polished spinner-related classes; Moved l-icon-link icon into -glyph element; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../commonUI/general/res/sass/_icons.scss | 20 ++++---- .../general/res/sass/mobile/_tree.scss | 2 +- .../commonUI/general/res/sass/tree/_tree.scss | 28 +++++++---- .../espresso/res/css/theme-espresso.css | 47 +++++++++++-------- .../themes/snow/res/css/theme-snow.css | 47 +++++++++++-------- 6 files changed, 85 insertions(+), 61 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index c60767e4ae..b90cdfe6a9 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -71,7 +71,7 @@ $itemPadLR: 5px; $treeVCW: 10px; $treeTypeIconH: 1.4em; // was 16px $treeTypeIconHPx: 16px; -$treeTypeIconW: 20px; +$treeTypeIconW: 18px; $treeContextTriggerW: 20px; // Tabular $tabularHeaderH: 22px; //18px diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 3b41b31011..b88801344d 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -89,15 +89,17 @@ line-height: normal; // This is Ok for the symbolsfont position: relative; &.l-icon-link { - &:before { - color: $colorIconLink; - content: "\f4"; - height: auto; width: auto; - position: absolute; - left: 0; top: 0; right: 0; bottom: 10%; - @include transform-origin(bottom, left); - @include transform(scale(0.3)); - z-index: 2; + .t-item-icon-glyph { + &:before { + color: $colorIconLink; + content: "\f4"; + height: auto; width: auto; + position: absolute; + left: 0; top: 0; right: 0; bottom: 10%; + @include transform-origin(bottom, left); + @include transform(scale(0.3)); + z-index: 2; + } } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 69e875aecf..71d34705b9 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -51,7 +51,7 @@ } .t-object-label { line-height: inherit; - .t-item-icon.l-icon-link:before { + .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; // Shift up due to height of mobile menu items } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 652925d921..9ac7aa8cb6 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -77,7 +77,8 @@ ul.tree { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; color: $colorItemTreeIcon; - width: $treeTypeIconH; + margin-right: $interiorMargin; + width: $treeTypeIconW; } .title-label, .t-title-label { @@ -128,17 +129,24 @@ ul.tree { .tree-item { mct-representation { - //.t-object-label { - // left: $interiorMargin + $treeVCW; - //} &.s-status-pending { .t-object-label { - &:before { - @include spinner(0.25em, $colorItemTreeIcon); - content: ""; - } - .t-item-icon .t-item-icon-glyph { - display: none; + .t-item-icon { + &:before { + $spinBW: 4px; + $spinD: $treeTypeIconW - ($spinBW * 2); + @include spinner($spinBW, $colorItemTreeIcon); + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: $spinD; + height: $spinD; + } + .t-item-icon-glyph { + display: none; + } } } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 19cab4bc6c..c2d97f7ac9 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -833,8 +833,8 @@ mct-container { display: inline-block; line-height: normal; position: relative; } - /* line 92, ../../../../general/res/sass/_icons.scss */ - .t-item-icon.l-icon-link:before { + /* line 93, ../../../../general/res/sass/_icons.scss */ + .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; height: auto; @@ -2849,7 +2849,7 @@ label.checkbox.custom { border-top: 1px solid #878787; color: white; line-height: 1.5rem; - padding: 3px 10px 3px 30px; + padding: 3px 10px 3px 28px; position: relative; white-space: nowrap; } /* line 97, ../../../../general/res/sass/controls/_menus.scss */ @@ -5705,8 +5705,9 @@ ul.tree { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 1.4em; color: #0099cc; - width: 1.4em; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + margin-right: 5px; + width: 18px; } + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5714,48 +5715,48 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 89, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 92, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 95, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 105, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 112, ../../../../general/res/sass/tree/_tree.scss */ + /* line 113, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 136, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation.s-status-pending .t-object-label:before { +/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5771,11 +5772,17 @@ ul.tree { border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; - border-width: 0.25em; + border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; - content: ""; } + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: 10px; + height: 10px; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5801,7 +5808,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 140, ../../../../general/res/sass/tree/_tree.scss */ +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5865,8 +5872,8 @@ ul.tree { .search-result-item .t-object-label { line-height: inherit; } /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .t-object-label .t-item-icon.l-icon-link:before, - .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + .tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 669829a115..a3404bae59 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -833,8 +833,8 @@ mct-container { display: inline-block; line-height: normal; position: relative; } - /* line 92, ../../../../general/res/sass/_icons.scss */ - .t-item-icon.l-icon-link:before { + /* line 93, ../../../../general/res/sass/_icons.scss */ + .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; height: auto; @@ -2788,7 +2788,7 @@ label.checkbox.custom { border-top: 1px solid #e6e6e6; color: #666666; line-height: 1.5rem; - padding: 3px 10px 3px 30px; + padding: 3px 10px 3px 28px; position: relative; white-space: nowrap; } /* line 97, ../../../../general/res/sass/controls/_menus.scss */ @@ -5608,8 +5608,9 @@ ul.tree { .search-result-item .t-object-label .t-item-icon { font-size: 1.4em; color: #0099cc; - width: 1.4em; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + margin-right: 5px; + width: 18px; } + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5617,48 +5618,48 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 89, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 92, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 95, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 105, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 112, ../../../../general/res/sass/tree/_tree.scss */ + /* line 113, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 136, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation.s-status-pending .t-object-label:before { +/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5674,11 +5675,17 @@ ul.tree { border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; - border-width: 0.25em; + border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; - content: ""; } + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: 10px; + height: 10px; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5704,7 +5711,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 140, ../../../../general/res/sass/tree/_tree.scss */ +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5768,8 +5775,8 @@ ul.tree { .search-result-item .t-object-label { line-height: inherit; } /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .t-object-label .t-item-icon.l-icon-link:before, - .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + .tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government