diff --git a/platform/commonUI/edit/res/templates/elements.html b/platform/commonUI/edit/res/templates/elements.html
index fff8ebd614..b32d41d010 100644
--- a/platform/commonUI/edit/res/templates/elements.html
+++ b/platform/commonUI/edit/res/templates/elements.html
@@ -24,7 +24,9 @@
-
-
+
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index f7f2489dc7..0376064759 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -60,6 +60,7 @@
@import "overlay/overlay";
@import "mobile/overlay/overlay";
@import "tree/tree";
+@import "object-label";
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss
new file mode 100644
index 0000000000..51c16eef22
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_object-label.scss
@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// mct-representation surrounding an object-label key="'label'"
+.rep-object-label {
+ @include flex-direction(row);
+ @include flex(1 1 auto);
+ height: inherit;
+ line-height: inherit;
+ min-width: 0;
+}
+
+.t-object-label {
+ .t-item-icon {
+ margin-right: $interiorMargin;
+ }
+ .t-title-label {
+ @include ellipsize();
+ }
+}
+
+mct-representation {
+ &.s-status-pending {
+ .t-object-label {
+ .t-item-icon {
+ &:before {
+ $spinBW: 4px;
+ $spinD: 0; // $treeTypeIconW - ($spinBW * 2);
+ @include spinner($spinBW);
+ content: "";
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ padding: 35%;
+ width: $spinD;
+ height: $spinD;
+ }
+ .t-item-icon-glyph {
+ display: none;
+ }
+ }
+ .t-title-label {
+ font-style: italic;
+ opacity: 0.6;
+ }
+ }
+ }
+}
+.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
+ border-color: rgba($colorItemTreeSelectedFg, 0.25);
+ border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
index 42d918c729..d2f311a2f7 100644
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -24,7 +24,7 @@
100% { transform: rotate(359deg); }
}
-@mixin spinner($b: 5px, $c: $colorAlt1) {
+@mixin spinner($b: 5px) {
@include keyframes(rotateCentered) {
0% { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); }
100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); }
@@ -33,8 +33,6 @@
@include animation-duration(0.5s);
@include animation-iteration-count(infinite);
@include animation-timing-function(linear);
- border-color: rgba($c, 0.25);
- border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: $b;
@include border-radius(100%);
@@ -42,8 +40,10 @@
@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
- @include spinner($b, $c);
+ @include spinner($b);
@include box-sizing(border-box);
+ border-color: rgba($c, 0.25);
+ border-top-color: rgba($c, 1.0);
display: block;
position: absolute;
height: 0; width: 0;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index fdadaecad3..78bca20614 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -35,6 +35,7 @@ ul.tree {
.tree-item,
.search-result-item {
$runningItemW: 0;
+ @extend .l-flex-row;
@include box-sizing(border-box);
@include border-radius($basicCr);
@include single-transition(background-color, 0.25s);
@@ -76,12 +77,8 @@ ul.tree {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
- margin-right: $interiorMargin;
width: $treeTypeIconW;
}
- .t-title-label {
- @include ellipsize();
- }
}
&.selected {
@@ -124,36 +121,36 @@ ul.tree {
}
}
-.tree-item {
- mct-representation {
- &.s-status-pending {
- .t-object-label {
- .t-item-icon {
- &:before {
- $spinBW: 4px;
- $spinD: $treeTypeIconW - ($spinBW * 2);
- @include spinner($spinBW, $colorItemTreeIcon);
- content: "";
- display: block;
- position: absolute;
- left: 50%;
- top: 50%;
- width: $spinD;
- height: $spinD;
- }
- .t-item-icon-glyph {
- display: none;
- }
+mct-representation {
+ &.s-status-pending {
+ .t-object-label {
+ .t-item-icon {
+ &:before {
+ $spinBW: 4px;
+ $spinD: $treeTypeIconW - ($spinBW * 2);
+ @include spinner($spinBW);
+ border-color: rgba($colorItemTreeIcon, 0.25);
+ border-top-color: rgba($colorItemTreeIcon, 1.0);
+ //content: "";
+ //display: block;
+ //position: absolute;
+ //left: 50%;
+ //top: 50%;
+ width: $spinD;
+ height: $spinD;
}
- .t-title-label {
- font-style: italic;
- opacity: 0.6;
+ .t-item-icon-glyph {
+ display: none;
}
}
+ .t-title-label {
+ font-style: italic;
+ opacity: 0.6;
+ }
}
}
- &.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
- border-color: rgba($colorItemTreeSelectedFg, 0.25);
- border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
- }
-}
\ No newline at end of file
+}
+.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
+ border-color: rgba($colorItemTreeSelectedFg, 0.25);
+ border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
+}
diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html
index cf111a3695..5d7d490341 100644
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -41,7 +41,7 @@
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
- class="location-item">
+ class="location-item rep-object-label">
@@ -54,7 +54,7 @@
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
- class="location-item">
+ class="location-item rep-object-label">
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 7e7050c7ae..cedefbc68a 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,7 +22,7 @@