ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +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;
// Wait Spinner Defaults
$waitSpinnerD: 32px;
$waitSpinnerTreeD: 20px;
$waitSpinnerBorderW: 5px;
$waitSpinnerTreeBorderW: 4px;
/************************** CONTROLS */
$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 {
.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;
}
}

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

@ -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 {

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
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>