ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-15 15:06:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #788 from nasa/open445b

Browse Source 
Review and integrate open445b
This commit is contained in:
Andrew Henry 2016-03-31 09:36:03 -07:00
commit 6b6bada700
4 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

42
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);
@ -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;
}
}
}
}

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

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