[Frontend] CSS fixes for s-status classes

Fixes #1047 Fixed .s-status-editing and s-status-pending;
nasa · Jul 29, 2016 · 7278c95 · 7278c95
1 parent 4606d61
commit 7278c95
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 71 deletions.
diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss
@@ -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;

diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -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);
+            }
+        }
     }
 }
diff --git a/platform/commonUI/general/res/templates/tree/tree-label.html b/platform/commonUI/general/res/templates/tree/tree-label.html
@@ -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>