ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 09:26:45 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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;
This commit is contained in:
Charles Hacskaylo 2018-10-04 14:47:12 -07:00 committed by Pete Richards
parent 3c324cbea0
commit afca6cd2e9
20 changed files with 334 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/plugins/folderView/components/GridView.vue
View File

@ -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 {
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;
}
@include isAlias();
color: $colorIconAliasForKeyFilter;
}
}
@ -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

4
src/plugins/notebook/res/templates/entry.html
View File

@ -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>

46
src/plugins/timeConductor/DatePicker.vue
View File

@ -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>

22
src/styles-new/_constants-snow.scss
View File

@ -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

25
src/styles-new/_constants.scss
View File

@ -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;

9
src/styles-new/_controls.scss
View File

@ -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();
}

22
src/styles-new/_global.scss
View File

@ -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 {
/*

22
src/styles-new/_glyphs.scss
View File

@ -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;

42
src/styles-new/_mixins.scss
View File

@ -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;
}

22
src/styles-new/_table.scss
View File

@ -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.

22
src/styles-new/core.scss
View File

@ -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";

2
src/styles-new/legacy-styles.scss
View File

@ -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";

22
src/styles-new/notebook.scss
View File

@ -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";

23
src/styles-new/sass-base.scss
View File

@ -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";

4
src/ui/components/controls/CreateButton.vue
View File

@ -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">

10
src/ui/components/controls/pane.vue
View File

@ -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;
height: auto;
top: 0; right: 0; bottom: 0; left: 0;
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%);

15
src/ui/components/layout/BrowseBar.vue
View File

@ -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>
<div class="l-browse-bar__action c-button icon-notebook" title="New Notebook entry"></div>
<div class="l-browse-bar__action c-button c-button--major icon-pencil" title="Edit" v-if="!isEditing" @click="edit()"></div>
<div class="l-browse-bar__action c-button c-button--major icon-save" title="Save and Finish Editing" v-if="isEditing" @click="saveAndFinishEditing()"></div>
<div class="l-browse-bar__action c-button icon-x" title="Cancel Editing" v-if="isEditing" @click="cancelEditing()"></div>
<button class="l-browse-bar__actions__edit c-button icon-notebook" title="New Notebook entry"></button>
<button class="l-browse-bar__actions__notebook-entry c-button c-button--major icon-pencil" title="Edit" v-if="!isEditing" @click="edit()"></button>
<button class="l-browse-bar__actions c-button c-button--major icon-save" title="Save and Finish Editing" v-if="isEditing" @click="saveAndFinishEditing()"></button>
<button class="l-browse-bar__actions c-button icon-x" title="Cancel Editing" v-if="isEditing" @click="cancelEditing()"></button>
</div>
</div>
</div>

10
src/ui/components/layout/Layout.vue
View File

@ -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>
<a v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-expand' : 'icon-fullscreen-collapse']"
</button>
<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});

58
src/ui/components/layout/mct-tree.vue
View File

@ -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>

20
src/ui/components/layout/tree-item.vue
View File

@ -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"
:class="cssClass"
<a class="c-tree__item__label"
: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);