From e7e91e21fc14279366037ba3d4c7575abb891610 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 24 Mar 2016 14:25:28 -0700 Subject: [PATCH 1/2] [Frontend] Markup and CSS for loading tree items #445 New wait-spinner constants; Markup fixed in wait-node.html; Styles for .loading when applied to .tree-item.wait-node; Changed from percent-of-parent- width sizing of spinner to fixed size; --- .../commonUI/general/res/sass/_constants.scss | 3 ++ .../res/sass/helpers/_wait-spinner.scss | 37 +++++++++---------- .../general/res/templates/tree/wait-node.html | 7 +--- 3 files changed, 22 insertions(+), 25 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index d5f725862f..8bde2cd7b8 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -98,6 +98,9 @@ $bubbleMaxW: 300px; $reqSymbolW: 15px; $reqSymbolM: $interiorMargin * 2; $reqSymbolFontSize: 0.7em; +// Wait Spinner Defaults +$waitSpinnerD: 32px; +$waitSpinnerBorderW: 5px; /************************** CONTROLS */ $controlDisabledOpacity: 0.3; diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 310f72d1b4..565d8f0ef2 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -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,19 @@ display: block; z-index: 9; } - &.tree-item:before { - padding: $menuLineH / 4; - border-width: 2px; + &.tree-item.t-wait-node { + $d: $treeTypeIconW; + $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2; + font-style: italic; + padding-left: $spinnerL + $d/2 + $interiorMargin; + &:before { + height: $d; + width: $d; + border-width: 3px; + 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..12bcecdc34 100644 --- a/platform/commonUI/general/res/templates/tree/wait-node.html +++ b/platform/commonUI/general/res/templates/tree/wait-node.html @@ -19,9 +19,4 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
  • - - - Loading... - -
    • +
  • Loading...
    • From a01f7ddd2d32bed3dba35c4aa1add033e40f99f9 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 24 Mar 2016 14:54:50 -0700 Subject: [PATCH 2/2] [Frontend] Refinements to .loading and related #445 Markup enhanced in wait-node.html; More wait-spinner constants added; Normalized appearance between tree-based .loading and .s-status-pending; Fixed .s-status-pending to work now that mct-representation is gone from tree; --- .../commonUI/general/res/sass/_constants.scss | 2 ++ .../general/res/sass/_object-label.scss | 17 ++++++++++------- .../general/res/sass/helpers/_wait-spinner.scss | 11 +++++++---- .../general/res/templates/tree/wait-node.html | 4 +++- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 8bde2cd7b8..659025960f 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -100,7 +100,9 @@ $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 565d8f0ef2..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); @@ -76,14 +76,17 @@ z-index: 9; } &.tree-item.t-wait-node { - $d: $treeTypeIconW; + $d: $waitSpinnerTreeD; $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2; - font-style: italic; padding-left: $spinnerL + $d/2 + $interiorMargin; + .t-title-label { + font-style: italic; + opacity: 0.6; + } &:before { height: $d; width: $d; - border-width: 3px; + border-width: 4px; left: $spinnerL; } &:after { diff --git a/platform/commonUI/general/res/templates/tree/wait-node.html b/platform/commonUI/general/res/templates/tree/wait-node.html index 12bcecdc34..d63095c0a0 100644 --- a/platform/commonUI/general/res/templates/tree/wait-node.html +++ b/platform/commonUI/general/res/templates/tree/wait-node.html @@ -19,4 +19,6 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
  • Loading...
    • +
  • + Loading... +