ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-29 01:18:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Refinements to .loading and related

Browse Source 
#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;
This commit is contained in:
Charles Hacskaylo 2016-03-24 14:54:50 -07:00
parent e7e91e21fc
commit a01f7ddd2d
4 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/_constants.scss
View File

@ -100,7 +100,9 @@ $reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em; $reqSymbolFontSize: 0.7em;
// Wait Spinner Defaults // Wait Spinner Defaults
$waitSpinnerD: 32px; $waitSpinnerD: 32px;
$waitSpinnerTreeD: 20px;
$waitSpinnerBorderW: 5px; $waitSpinnerBorderW: 5px;
$waitSpinnerTreeBorderW: 4px;
/************************** CONTROLS */ /************************** CONTROLS */
$controlDisabledOpacity: 0.3; $controlDisabledOpacity: 0.3;

17
platform/commonUI/general/res/sass/_object-label.scss
View File

@ -35,15 +35,15 @@
} }
} }
mct-representation { mct-representation,
.rep-object-label {
&.s-status-pending { &.s-status-pending {
.t-object-label { .t-object-label {
.t-item-icon { .t-item-icon {
&:before { &:before {
$spinBW: 4px; @include spinner($waitSpinnerTreeBorderW, $colorLoadingFg);
@include spinner($spinBW);
content: ""; content: "";
padding: 30%; height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
} }
.t-item-icon-glyph { .t-item-icon-glyph {
display: none; display: none;
@ -57,7 +57,10 @@ mct-representation {
} }
} }
.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { .selected mct-representation,
border-color: rgba($colorItemTreeSelectedFg, 0.25) !important; .selected .rep-object-label {
border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important; .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;
}
} }

11
platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
View File

@ -28,7 +28,7 @@
100% { @include transform(translate(-50%, -50%) rotate(360deg)); } 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 transform-origin(center);
@include animation-name(rotation-centered); @include animation-name(rotation-centered);
@include animation-duration(0.5s); @include animation-duration(0.5s);
@ -76,14 +76,17 @@
z-index: 9; z-index: 9;
} }
&.tree-item.t-wait-node { &.tree-item.t-wait-node {
$d: $treeTypeIconW; $d: $waitSpinnerTreeD;
$spinnerL: $treeVCW + $interiorMargin + 3px + $d/2; $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
font-style: italic;
padding-left: $spinnerL + $d/2 + $interiorMargin; padding-left: $spinnerL + $d/2 + $interiorMargin;
.t-title-label {
font-style: italic;
opacity: 0.6;
}
&:before { &:before {
height: $d; height: $d;
width: $d; width: $d;
border-width: 3px; border-width: 4px;
left: $spinnerL; left: $spinnerL;
} }
&:after { &:after {

4
platform/commonUI/general/res/templates/tree/wait-node.html
View File

@ -19,4 +19,6 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<li class='tree-item t-wait-node loading'>Loading...</li> <li class='tree-item t-wait-node loading'>
<span class="t-title-label">Loading...</span>
</li>