diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index d5f725862f..659025960f 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -98,6 +98,11 @@ $bubbleMaxW: 300px; $reqSymbolW: 15px; $reqSymbolM: $interiorMargin * 2; $reqSymbolFontSize: 0.7em; +// Wait Spinner Defaults +$waitSpinnerD: 32px; +$waitSpinnerTreeD: 20px; +$waitSpinnerBorderW: 5px; +$waitSpinnerTreeBorderW: 4px; /************************** CONTROLS */ $controlDisabledOpacity: 0.3; diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss index 76e55a04fe..6fad6780a2 100644 --- a/platform/commonUI/general/res/sass/_object-label.scss +++ b/platform/commonUI/general/res/sass/_object-label.scss @@ -35,15 +35,15 @@ } } -mct-representation { +mct-representation, +.rep-object-label { &.s-status-pending { .t-object-label { .t-item-icon { &:before { - $spinBW: 4px; - @include spinner($spinBW); + @include spinner($waitSpinnerTreeBorderW, $colorLoadingFg); content: ""; - padding: 30%; + height: $waitSpinnerTreeD; width: $waitSpinnerTreeD; } .t-item-icon-glyph { display: none; @@ -57,7 +57,10 @@ mct-representation { } } -.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { - border-color: rgba($colorItemTreeSelectedFg, 0.25) !important; - border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important; +.selected mct-representation, +.selected .rep-object-label { + .s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba($colorItemTreeSelectedFg, 0.25) !important; + border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important; + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 310f72d1b4..46f94ebc53 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -28,7 +28,7 @@ 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } } -@mixin spinner($b: 5px, $c: $colorKey) { +@mixin spinner($b: 5px, $c: $colorKey) { @include transform-origin(center); @include animation-name(rotation-centered); @include animation-duration(0.5s); @@ -46,10 +46,7 @@ } .wait-spinner { - $d: 5%; - @include spinner(0.5em, $colorKey); - height: auto; width: auto; - padding: $d; // Will size object based on parent container WIDTH + @include spinner($waitSpinnerBorderW, $colorKey); pointer-events: none; z-index: 2; &.inline { @@ -60,15 +57,6 @@ } } -.treeview .wait-spinner { - // Only used in subtree.html, which I don't think this is actually being used - $d: 10px; - height: $d; width: $d; - margin: 0 !important; - padding: 0 !important; - top: 2px; left: 0; -} - .loading { // Can be applied to any block element with height and width pointer-events: none; @@ -77,8 +65,8 @@ content: ''; } &:before { - @include spinner(5px, $colorLoadingFg); - padding: 5%; + @include spinner($waitSpinnerBorderW, $colorLoadingFg); + height: $waitSpinnerD; width: $waitSpinnerD; z-index: 10; } &:after { @@ -87,8 +75,22 @@ display: block; z-index: 9; } - &.tree-item:before { - padding: $menuLineH / 4; - border-width: 2px; + &.tree-item.t-wait-node { + $d: $waitSpinnerTreeD; + $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2; + padding-left: $spinnerL + $d/2 + $interiorMargin; + .t-title-label { + font-style: italic; + opacity: 0.6; + } + &:before { + height: $d; + width: $d; + border-width: 4px; + left: $spinnerL; + } + &:after { + display: none; + } } -} \ No newline at end of file +} diff --git a/platform/commonUI/general/res/templates/tree/wait-node.html b/platform/commonUI/general/res/templates/tree/wait-node.html index 79dffa73b5..d63095c0a0 100644 --- a/platform/commonUI/general/res/templates/tree/wait-node.html +++ b/platform/commonUI/general/res/templates/tree/wait-node.html @@ -19,9 +19,6 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -