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

[Frontend] CSS fixes for s-status classes

Browse Source 
Fixes #1047
Fixed .s-status-editing and s-status-pending;
This commit is contained in:
Charles Hacskaylo 2016-07-29 14:37:21 -07:00
parent 4606d617d1
commit 7278c9534c
3 changed files with 76 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,30 +35,27 @@
}
}
mct-representation,
.rep-object-label {
&.s-status-pending {
.t-object-label {
.t-item-icon {
&:after {
@include spinner($waitSpinnerTreeBorderW, $colorLoadingFg);
content: "";
height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
}
.t-item-icon-glyph {
display: none;
}
.s-status-pending {
> .t-object-label {
.t-item-icon {
&:after {
@include spinner($waitSpinnerTreeBorderW, $colorLoadingFg);
content: "";
height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
}
.t-title-label {
font-style: italic;
opacity: 0.6;
.t-item-icon-glyph,
&:before {
display: none;
}
}
.t-title-label {
font-style: italic;
opacity: 0.6;
}
}
}
.selected mct-representation,
.selected .rep-object-label {
.selected {
.s-status-pending .t-object-label .t-item-icon:after {
border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;

110
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -21,42 +21,42 @@
*****************************************************************************/
ul.tree {
@include menuUlReset();
@include user-select(none);
li {
display: block;
position: relative;
}
ul.tree {
margin-left: $treeVCW + $interiorMargin;
}
@include menuUlReset();
@include user-select(none);
li {
display: block;
position: relative;
}
ul.tree {
margin-left: $treeVCW + $interiorMargin;
}
}
.tree-item,
.search-result-item {
@extend .l-flex-row;
box-sizing: border-box;
border-radius: $basicCr;
@include transition(background-color, 0.25s);
font-size: 0.8rem;
height: $menuLineH;
line-height: $menuLineH;
margin-bottom: $interiorMarginSm;
box-sizing: border-box;
border-radius: $basicCr;
@include transition(background-color, 0.25s);
font-size: 0.8rem;
height: $menuLineH;
line-height: $menuLineH;
margin-bottom: $interiorMarginSm;
padding: 0 $interiorMarginSm;
position: relative;
position: relative;
.flex-elem {
height: inherit !important;
line-height: inherit !important;
}
.view-control {
color: $colorItemTreeVC;
.view-control {
color: $colorItemTreeVC;
font-size: 0.75em;
margin-right: $interiorMargin;
margin-right: $interiorMargin;
height: 100%;
line-height: inherit;
width: $treeVCW;
width: $treeVCW;
&.has-children {
&:before {
position: absolute;
@ -68,10 +68,10 @@ ul.tree {
@include transform(rotate(90deg));
}
}
}
}
.t-object-label {
line-height: $menuLineH;
.t-object-label {
line-height: $menuLineH;
.t-item-icon {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
@ -81,34 +81,34 @@ ul.tree {
.t-title-label {
@include ellipsize();
}
}
}
&.selected {
background: $colorItemTreeSelectedBg !important;
color: $colorItemTreeSelectedFg !important;
.view-control {
color: $colorItemTreeSelectedVC;
}
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg;
}
}
&.selected {
background: $colorItemTreeSelectedBg !important;
color: $colorItemTreeSelectedFg !important;
.view-control {
color: $colorItemTreeSelectedVC;
}
.t-object-label .t-item-icon {
color: $colorItemTreeSelectedFg;
}
}
&:not(.loading) {
cursor: pointer;
}
&:not(.loading) {
cursor: pointer;
}
.context-trigger {
$h: 0.9rem;
top: -1px;
position: absolute;
right: $interiorMarginSm;
.invoke-menu {
font-size: 0.75em;
height: $h;
line-height: $h;
}
}
.context-trigger {
$h: 0.9rem;
top: -1px;
position: absolute;
right: $interiorMarginSm;
.invoke-menu {
font-size: 0.75em;
height: $h;
line-height: $h;
}
}
}
body.desktop {
@ -169,6 +169,16 @@ mct-representation {
font-style: italic;
}
}
.view-control, + .tree-item-subtree { display: none; }
.view-control, + .tree-item-subtree {
display: none;
}
&.selected {
.t-title-label,
.t-item-icon,
&:before {
color: rgba($colorItemTreeSelectedFg, 0.5);
}
}
}
}

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

@ -1,8 +1,6 @@
<span class="rep-object-label">
<div class="t-object-label l-flex-row flex-elem grows">
<div class="t-item-icon flex-elem">
<div class="t-item-icon-glyph"></div>
</div>
<div class="t-item-icon flex-elem"></div>
<div class='t-title-label flex-elem grows'></div>
</div>
</span>