Theming (#2567)

* Separate Vue component styles out from SFCs. * Added 'MCT.prototype.getAssetPath' and using 'openmct.setAssetPath' to get relative path for assets. * Re-implements `openmct.plugins.Snow()`, and `openmct.plugins.Espresso()` (as well as a new theme `openmct.plugins.Maelstron()`)
2019-12-11 14:27:13 -08:00
parent 23781fa686
commit 50173a4413
106 changed files with 3636 additions and 3690 deletions
--- a/src/ui/layout/mct-tree.scss
+++ b/src/ui/layout/mct-tree.scss
@@ -0,0 +1,138 @@
+.c-tree-and-search {
+    display: flex;
+    flex-direction: column;
+    padding-right: $interiorMarginSm;
+    overflow: auto;
+
+    > * + * { margin-top: $interiorMargin; }
+
+    &__search {
+        flex: 0 0 auto;
+    }
+
+    &__loading {
+        flex: 1 1 auto;
+    }
+
+    &__no-results {
+        font-style: italic;
+        opacity: 0.6;
+    }
+
+    &__tree {
+        flex: 1 1 auto;
+        height: 0; // Chrome 73 overflow bug fix
+    }
+}
+
+.c-tree {
+    @include userSelectNone();
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: $interiorMargin;
+
+    li {
+        position: relative;
+        &.c-tree__item-h { display: block; }
+    }
+
+    .c-tree {
+        margin-left: 15px;
+    }
+
+    &__item {
+        $aPad: $interiorMarginSm;
+        border-radius: $controlCr;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        line-height: 110%;
+        padding: $interiorMargin - $aPad;
+        transition: background 150ms ease;
+
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+
+        &:hover {
+            background: $colorItemTreeHoverBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeHoverFg;
+            }
+        }
+
+        &.is-navigated-object,
+        &.is-selected {
+            background: $colorItemTreeSelectedBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeSelectedFg;
+            }
+        }
+
+        &.is-being-edited {
+            background: $colorItemTreeEditingBg;
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeEditingIcon;
+            }
+
+            .c-tree__item__name {
+                color: $colorItemTreeEditingFg;
+                font-style: italic;
+            }
+        }
+
+        // Object labels in trees
+        &__label {
+            // <a> tag that holds type icon and name.
+            // Draggable element.
+            /*border-radius: $controlCr;
+            display: flex;
+            align-items: center;
+            flex: 1 1 auto;
+            overflow: hidden;
+            padding: $aPad;
+            white-space: nowrap;*/
+        }
+
+        &__name {
+           // @include ellipsize();
+           // display: inline;
+            color: $colorItemTreeFg;
+          //  width: 100%;
+        }
+
+        &__type-icon {
+            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+           // display: block;
+         //   flex: 0 0 auto;
+          //  font-size: 1.3em;
+          //  margin-right: $interiorMarginSm;
+            color: $colorItemTreeIcon;
+          //  width: $treeTypeIconW;
+        }
+
+        &.is-alias {
+            // Object is an alias to an original.
+            [class*='__type-icon'] {
+                @include isAlias();
+            }
+        }
+
+        body.mobile & {
+            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
+            height: $mobileTreeItemH;
+            margin-bottom: $interiorMarginSm;
+            [class*="view-control"] {
+                width: ceil($mobileTreeItemH * 0.5);
+            }
+        }
+    }
+}