mirror of
https://github.com/nasa/openmct.git
synced 2024-12-28 08:58:52 +00:00
[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;
This commit is contained in:
parent
e7e91e21fc
commit
a01f7ddd2d
platform/commonUI/general/res
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user