Review and merge latest topic-core-css (#2183)

* New branch from topic-core-refactor to use as central point for common
CSS work

- Manually migrated changes from vue-toolbar, expect conflicts there and
 in vue-layout;

* Manually update constants-snow from vue-toolbar branch

* Update markup to use latest button classnames

- c-menu-button > c-button--menu;
- c-icon-button > c-click-icon;

* Various from vue-conductor-style

- Mods to input styling;
- Input[] styles moved to _controls;
- New/revised constants vals;

* Resolve bizarre merge conflict when applying stash

* Code cleanup

* Alias and type-icon fixes

- More robust approach to alias indicators;
- Added alias indication to tree-item.vue;
- TODO: wire up alias indication tree-item.vue;

* Accessibility mods, convert elements to <button>

- Better reset styles for htmlInputReset mixin to allow use of <button>
without browser default styling;
- Create button;
- BrowseBar action buttons;
- c-click-icons;
- Removed Preview button from BrowseBar.vue;

* Add copyright to .scss files; code cleanup

* Improved click area and draggable styling for tree-item

* Removed injection of domainObject

* Removed injection of domainObject

* Remove _constants-mobile.scss

- Moved used var to _constants;
- Normalize mobile detection approach in Layout.vue;

* Mobile styling for Time Conductor

- WIP!

* Mobile styling for Time Conductor

- New modalFullScreen mixin;
- Datepicker now a fullscreen modal element in body.phone;

src/plugins/folderView/components/GridView.vue

@@ -22,7 +22,7 @@
             </div>
             <div class="c-grid-item__controls">
                 <div class="icon-people" title='Shared'></div>
-                <div class="c-click-icon icon-info c-info-button" title='More Info'></div>
+                <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
                 <div class="icon-pointer-right c-pointer-icon"></div>
             </div>
         </div>
@@ -63,22 +63,15 @@
         &__type-icon {
             filter: $colorKeyFilter;
             flex: 0 0 32px;
+            font-size: 2em; // Drives the size of the alias indicator when present
             margin-right: $interiorMarginLg;
         }
 
         &.is-alias {
             // Object is an alias to an original.
             [class*='__type-icon'] {
-                &:before {
+                @include isAlias();
-                    color: $colorIconAliasForKeyFilter;
+                color: $colorIconAliasForKeyFilter;
-                    content: $glyph-icon-link;
-                    display: block;
-                    font-family: symbolsfont;
-                    font-size: 2.5em;
-                    position: absolute;
-                    text-shadow: rgba(black, 0.5) 0 1px 4px;
-                    top: auto; left: 0; bottom: 10px; right: auto;
-                }
             }
         }
 
@@ -143,6 +136,7 @@
 
             &__type-icon {
                 flex: 1 1 auto;
+                font-size: 6em; // Drives the size of the alias indicator when present
                 margin: $interiorMargin 22.5%;
                 order: 2;
                 transform: scale(0.9);
@@ -189,7 +183,6 @@ export default {
                 }
             });
         }
-        
 
         return {
             items: items

src/plugins/notebook/res/templates/entry.html

@@ -28,8 +28,8 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <a class="c-click-icon icon-trash"
+        <button class="c-click-icon icon-trash"
            title="Delete this entry"
-           v-on:click="deleteEntry"></a>
+           v-on:click="deleteEntry"></button>
     </div>
 </li>

src/plugins/timeConductor/DatePicker.vue

@@ -20,12 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="calendarHolder">
+    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
         <a class="c-click-icon icon-calendar"
            @click="togglePicker()"></a>
-        <div class="c-menu c-datetime-picker"
+        <div class="c-menu c-menu--mobile-modal c-datetime-picker"
              v-if="showPicker">
-            <div class="c-datetime-picker__month-year-pager c-pager l-month-year-pager">
+            <div class="c-datetime-picker__close-button">
+                <button class="c-click-icon icon-x-in-circle"
+                        @click="togglePicker()"></button>
+            </div>
+            <div class="c-datetime-picker__pager c-pager l-month-year-pager">
                 <div class="c-pager__prev c-click-icon icon-arrow-left"
                    @click="changeMonth(-1)"></div>
                 <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
@@ -60,12 +64,24 @@
     .c-datetime-picker {
         @include userSelectNone();
         padding: $interiorMarginLg !important;
-        display: flex;
+        display: flex !important; // Override .c-menu display: block;
         flex-direction: column;
         > * + * {
-            border-top: 1px solid $colorInteriorBorder;
             margin-top: $interiorMargin;
         }
+
+        &__close-button {
+            display: none; // Only show when body.phone, see below.
+        }
+
+        &__pager {
+            flex: 0 0 auto;
+        }
+
+        &__calendar {
+            border-top: 1px solid $colorInteriorBorder;
+            flex: 1 1 auto;
+        }
     }
 
     .c-pager {
@@ -90,6 +106,7 @@
         grid-template-columns: repeat(7, min-content);
         grid-template-rows: auto;
         grid-gap: 1px;
+        height: 100%;
 
         $mutedOpacity: 0.7;
 
@@ -106,6 +123,7 @@
         li {
             display: flex;
             flex-direction: column;
+            justify-content: center !important;
             padding: $interiorMargin;
 
             &.is-in-month {
@@ -120,6 +138,24 @@
             }
         }
     }
+
+    /******************************************************** MOBILE */
+    body.phone {
+        .c-datetime-picker {
+            &.c-menu {
+                @include modalFullScreen();
+            }
+
+            &__close-button {
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+
+        .c-calendar {
+            grid-template-columns: repeat(7, auto);
+        }
+    }
 </style>
 
 <script>

src/styles-new/_constants-snow.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 @import "constants";
 
 // Functions

src/styles-new/_constants.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 /************************** PATHS */
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
 $dirFonts: 'fonts/';
@@ -27,6 +49,9 @@ $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 2px;
 
+/************************** MOBILE */
+$mobileMenuIconD: 34px; // Used
+$mobileTreeItemH: 35px; // Used
 
 /************************** VISUAL */
 $controlDisabledOpacity: 0.3;

src/styles-new/_controls.scss

@@ -20,8 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// VERSION MANUALLY MIGRATED FROM VUE-TOOLBAR
-
 /******************************************************** PLACEHOLDERS */
 @mixin cControl() {
     $fs: 1em;
@@ -133,9 +131,12 @@
 
 /********* Buttons */
 // Optionally can include icon in :before via markup
-.c-button,
-.c-button--menu,
 button {
+    @include htmlInputReset();
+}
+
+.c-button,
+.c-button--menu {
     @include cButton();
 }
 

src/styles-new/_global.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 /************************** FONTS */
 @font-face {
     /*

src/styles-new/_glyphs.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
         content: $unicode;

src/styles-new/_mixins.scss

@@ -31,6 +31,20 @@
     width: $d;
 }
 
+@mixin isAlias() {
+    &:after {
+        color:$colorIconAlias;
+        content: $glyph-icon-link;
+        display: block;
+        font-family: symbolsfont;
+        position: absolute;
+        text-shadow: rgba(black, 0.5) 0 1px 4px;
+        top: auto; left: 0; bottom: 10%; right: auto;
+        transform-origin: left bottom;
+        transform: scale(0.5);
+    }
+}
+
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,
@@ -128,6 +142,13 @@
     grid-column: 1 / 3;
 }
 
+@mixin modalFullScreen() {
+    // Optional modifier that makes a c-menu more mobile-friendly
+    position: fixed;
+    border-radius: 0;
+    top: 0; right: 0; bottom: 0; left: 0;
+}
+
 /************************** TEXT */
 @mixin ellipsize() {
     overflow: hidden;
@@ -141,20 +162,25 @@
     unicode-bidi:bidi-override;
 }
 
-@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a) !important;
-}
-
 /************************** CONTROLS, BUTTONS */
-@mixin input-base() {
+@mixin htmlInputReset() {
     appearance: none;
+    background: none;
+    background-color: transparent;
     border: none;
-    border-radius: $controlCr;
+    border-radius: 0;
     outline: none;
+    text-align: inherit;
 
     &:focus {
         outline: 0;
     }
+}
+
+
+@mixin input-base() {
+    @include htmlInputReset();
+    border-radius: $controlCr;
 
     &.error {
         background-color: $colorFormFieldErrorBg;
@@ -277,3 +303,7 @@
         cursor: -webkit-grabbing;
     }
 }
+
+@mixin test($c: deeppink, $a: 0.3) {
+    background-color: rgba($c, $a) !important;
+}

src/styles-new/_table.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 /******************************************************** TABLE */
 .c-table {
     // Can be used by any type of table, scrolling, LAD, etc.

src/styles-new/core.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 @import "vendor/normalize.min.css";
 @import "sass-base.scss";
 

src/styles-new/legacy-styles.scss

@@ -46,7 +46,7 @@
 //@import "../styles/search/search";
 //@import "../styles/mobile/search/search";
 @import "../styles/overlay/overlay";
-@import "../styles/tree/tree";
+//@import "../styles/tree/tree";
 @import "../styles/object-label";
 //@import "../styles/mobile/tree";
 @import "../styles/user-environ/frame";

src/styles-new/notebook.scss

@@ -1,3 +1,25 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 /*********************************************** NOTEBOOK */
 @import "sass-base.scss";
 

src/styles-new/sass-base.scss

@@ -1,7 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
 // Imports only constants, mixins, etc.
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
 @import "constants";
-@import "constants-mobile";
 @import "constants-snow"; // TEMP
 @import "mixins";

src/ui/components/controls/CreateButton.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="c-create-button--w">
-        <div class="c-create-button c-button--menu c-button--major icon-plus"
+        <button class="c-create-button c-button--menu c-button--major icon-plus"
              @click="toggleCreateMenu">
             <span class="c-button__label">Create</span>
-        </div>
+        </button>
         <div class="c-create-menu c-super-menu"
              v-if="showCreateMenu">
             <div class="c-super-menu__menu">

src/ui/components/controls/pane.vue

@@ -14,11 +14,11 @@
              class="l-pane__handle"
              @mousedown="start">
         </div>
-        <a v-if="label"
+        <button v-if="label"
            class="l-pane__collapse-button"
            @click="toggleCollapse">
             <span class="l-pane__label">{{ label }}</span>
-        </a>
+        </button>
         <div class="l-pane__contents">
             <slot></slot>
         </div>
@@ -251,8 +251,8 @@
                 &[class*="--collapsed"] {
                     > .l-pane__collapse-button {
                         position: absolute;
-                        bottom: 0; left: 0;
+                        top: 0; right: 0; bottom: 0; left: 0;
-                        height: auto;
+                        height: auto; width: 100%;
 
                         [class*="label"] {
                             position: absolute;
@@ -263,7 +263,7 @@
                         &:after {
                             background: none;
                             padding: 0;
-                            top: $interiorMarginSm;
+                            top: $interiorMargin;
                             left: 50%;
                             right: auto;
                             transform: translateX(-50%);

src/ui/components/layout/BrowseBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <a class="l-browse-bar__nav-to-parent-button c-click-icon icon-pointer-left"></a>
+            <button class="l-browse-bar__nav-to-parent-button c-click-icon icon-pointer-left"></button>
             <div class="l-browse-bar__object-name--w"
                  :class="type.cssClass">
                 <span
@@ -17,14 +17,14 @@
         <div class="l-browse-bar__end">
             <div class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left"
                  v-if="views.length > 1">
-                <div class="c-button--menu"
+                <button class="c-button--menu"
                      :class="currentView.cssClass"
                      title="Switch view type"
                      @click="toggleViewMenu">
                     <span class="c-button__label">
                           {{ currentView.name }}
                     </span>
-                </div>
+                </button>
                 <div class="c-menu" v-show="showViewMenu">
                     <ul>
                         <li v-for="(view, index) in views"
@@ -39,11 +39,10 @@
             </div>
             <!-- Action buttons -->
             <div class="l-browse-bar__actions">
-                <div class="l-browse-bar__action c-button icon-eye-open" title="Preview"></div>
+                <button class="l-browse-bar__actions__edit c-button icon-notebook" title="New Notebook entry"></button>
-                <div class="l-browse-bar__action c-button icon-notebook" title="New Notebook entry"></div>
+                <button class="l-browse-bar__actions__notebook-entry c-button c-button--major icon-pencil" title="Edit" v-if="!isEditing" @click="edit()"></button>
-                <div class="l-browse-bar__action c-button c-button--major icon-pencil" title="Edit" v-if="!isEditing" @click="edit()"></div>
+                <button class="l-browse-bar__actions c-button c-button--major icon-save" title="Save and Finish Editing" v-if="isEditing" @click="saveAndFinishEditing()"></button>
-                <div class="l-browse-bar__action c-button c-button--major icon-save" title="Save and Finish Editing" v-if="isEditing" @click="saveAndFinishEditing()"></div>
+                <button class="l-browse-bar__actions c-button icon-x" title="Cancel Editing" v-if="isEditing" @click="cancelEditing()"></button>
-                <div class="l-browse-bar__action c-button icon-x" title="Cancel Editing" v-if="isEditing" @click="cancelEditing()"></div>
             </div>
         </div>
     </div>

src/ui/components/layout/Layout.vue

@@ -3,14 +3,14 @@
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
             <div class="l-shell__controls">
-                <a class="c-click-icon icon-new-window" title="Open in a new browser tab"
+                <button class="c-click-icon icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
-                </a>
+                </button>
-                <a v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-expand' : 'icon-fullscreen-collapse']"
+                <button v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-expand' : 'icon-fullscreen-collapse']"
                     v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
                     @click="fullScreenToggle">
-                </a>
+                </button>
             </div>
             <div class="l-shell__app-logo">[ App Logo ]</div>
         </div>
@@ -98,7 +98,7 @@
             }
         }
 
-        @include phonePortrait() {
+        body.phone.portrait & {
             &__pane-tree {
                 width: calc(100% - #{$mobileMenuIconD});
 

src/ui/components/layout/mct-tree.vue

@@ -21,16 +21,17 @@
         }
 
         &__item {
+            $aPad: $interiorMarginSm;
             border-radius: $controlCr;
             display: flex;
             align-items: stretch;
             cursor: pointer;
-            padding: 5px;
+            padding: $interiorMargin - $aPad;
             transition: background 150ms ease;
 
             &:hover {
                 background: $colorItemTreeHoverBg;
-                .c-tree__item__name:before {
+                .c-tree__item__type-icon {
                     // Type icon
                     color: $colorItemTreeIconHover;
                 }
@@ -41,12 +42,39 @@
                 margin-right: $interiorMarginSm;
             }
 
+            &__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%;
-                &:before {
+            }
-                    color: $colorItemTreeIcon;
+
-                    width: $treeTypeIconW;
+            &__type-icon {
+                // Type icon. Must be 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();
                 }
             }
 
@@ -60,26 +88,6 @@
             }
         }
     }
-
-    .c-object-name {
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &:before {
-            // Type icon
-            display: block;
-            flex: 0 0 auto;
-            font-size: 1.3em;
-            margin-right: $interiorMarginSm;
-        }
-
-        &__name {
-            @include ellipsize();
-            display: inline;
-        }
-    }
 </style>
 
 <script>

src/ui/components/layout/tree-item.vue

@@ -1,15 +1,17 @@
 <template>
     <li class="c-tree__item-h">
-        <div class="c-tree__item">
+        <div class="c-tree__item"
+            :class="{ 'is-alias' : isAlias }">
             <view-control class="c-tree__item__view-control"
                           :enabled="hasChildren"
                           :expanded="expanded"
                           @click="toggleChildren">
             </view-control>
-            <a class="c-tree__item__name c-object-name"
+            <a class="c-tree__item__label"
-               :class="cssClass"
                :href="href">
-                <span class="c-object-name__name">{{ node.object.name }}</span>
+                <div class="c-tree__item__type-icon"
+                      :class="cssClass"></div>
+                <div class="c-tree__item__name">{{ node.object.name }}</div>
             </a>
         </div>
         <ul v-if="expanded" class="c-tree">
@@ -36,7 +38,8 @@
                 loaded: false,
                 children: [],
                 expanded: false,
-                cssClass: 'icon-folder'
+                cssClass: 'icon-object-unknown',
+                isAlias: false
             }
         },
         computed: {
@@ -52,11 +55,14 @@
             // TODO: should highlight if navigated to.
             // TODO: should have context menu.
             // TODO: should support drag/drop composition
+            // TODO: set isAlias per tree-item
+
             let type = this.openmct.types.get(this.node.object.type);
-            if (type) {
+
+            if (type.definition.cssClass) {
                 this.cssClass = type.definition.cssClass;
             } else {
-                console.log("Failed to get typeDef for object", this.node.object.name, this.node.object.type);
+                console.log("Failed to get typeDef.cssClass for object", this.node.object.name, this.node.object.type);
             }
 
             let composition = this.openmct.composition.get(this.node.object);