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

Tree revert refactor (#3886)

Browse Source 
* Reverts object tree to expand/collapse tree model
* Retains expanded/collapsed state 
* Adds collapse all feature
This commit is contained in:
Charles Hacskaylo 2021-06-01 15:47:21 -07:00 committed by GitHub
parent 43ac66233e
commit dbed9262c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 578 additions and 641 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/composition/CompositionCollection.js
View File

@ -215,12 +215,12 @@ define([
* @memberof {module:openmct.CompositionCollection#}
* @name load
*/
CompositionCollection.prototype.load = function () {
CompositionCollection.prototype.load = function (abortSignal) {
this.cleanUpMutables();
return this.provider.load(this.domainObject)
.then(function (children) {
return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
return Promise.all(children.map((c) => this.publicAPI.objects.get(c, abortSignal)));
}.bind(this))
.then(function (childObjects) {
childObjects.forEach(c => this.add(c, true));

4
src/plugins/folderView/components/grid-view.scss
View File

@ -19,6 +19,10 @@
margin: 0 $interiorMargin $interiorMargin 0;
}
}
body.mobile & {
flex: 1 0 auto;
}
}
/******************************* GRID ITEMS */

2
src/styles/_constants-espresso.scss
View File

@ -362,7 +362,7 @@ $legendTableHeadBg: $colorTabHeaderBg;
// Tree
$colorTreeBg: transparent;
$colorItemTreeHoverBg: rgba(#fff, 0.03);
$colorItemTreeHoverBg: rgba(#fff, 0.1);
$colorItemTreeHoverFg: #fff;
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used

1
src/styles/_constants.scss
View File

@ -212,6 +212,7 @@ $glyph-icon-3-dots: '\ea37';
$glyph-icon-grid-on: '\ea38';
$glyph-icon-grid-off: '\ea39';
$glyph-icon-camera: '\ea3a';
$glyph-icon-folders-collapse: '\ea3b';
$glyph-icon-activity: '\eb00';
$glyph-icon-activity-mode: '\eb01';
$glyph-icon-autoflow-tabular: '\eb02';

1
src/styles/_glyphs.scss
View File

@ -144,6 +144,7 @@
.icon-grid-on { @include glyphBefore($glyph-icon-grid-on); }
.icon-grid-off { @include glyphBefore($glyph-icon-grid-off); }
.icon-camera { @include glyphBefore($glyph-icon-camera); }
.icon-folders-collapse { @include glyphBefore($glyph-icon-folders-collapse); }
.icon-activity { @include glyphBefore($glyph-icon-activity); }
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }

119
src/styles/fonts/Open MCT Symbols 16px.json
View File

@ -2,7 +2,7 @@
"metadata": {
"name": "Open MCT Symbols 16px",
"lastOpened": 0,
"created": 1602779919972
"created": 1621648023886
},
"iconSets": [
{
@ -847,13 +847,21 @@
"code": 59962,
"tempChar": ""
},
{
"order": 196,
"id": 168,
"name": "icon-folders-collapse",
"prevSize": 24,
"code": 59963,
"tempChar": ""
},
{
"order": 144,
"id": 97,
"name": "icon-activity",
"prevSize": 24,
"code": 60160,
"tempChar": ""
"tempChar": ""
},
{
"order": 104,
@ -861,7 +869,7 @@
"name": "icon-activity-mode",
"prevSize": 24,
"code": 60161,
"tempChar": ""
"tempChar": ""
},
{
"order": 137,
@ -869,7 +877,7 @@
"name": "icon-autoflow-tabular",
"prevSize": 24,
"code": 60162,
"tempChar": ""
"tempChar": ""
},
{
"order": 115,
@ -877,7 +885,7 @@
"name": "icon-clock",
"prevSize": 24,
"code": 60163,
"tempChar": ""
"tempChar": ""
},
{
"order": 2,
@ -885,7 +893,7 @@
"name": "icon-database",
"prevSize": 24,
"code": 60164,
"tempChar": ""
"tempChar": ""
},
{
"order": 3,
@ -893,7 +901,7 @@
"name": "icon-database-query",
"prevSize": 24,
"code": 60165,
"tempChar": ""
"tempChar": ""
},
{
"order": 67,
@ -901,7 +909,7 @@
"name": "icon-dataset",
"prevSize": 24,
"code": 60166,
"tempChar": ""
"tempChar": ""
},
{
"order": 59,
@ -909,7 +917,7 @@
"name": "icon-datatable",
"prevSize": 24,
"code": 60167,
"tempChar": ""
"tempChar": ""
},
{
"order": 136,
@ -917,7 +925,7 @@
"name": "icon-dictionary",
"prevSize": 24,
"code": 60168,
"tempChar": ""
"tempChar": ""
},
{
"order": 51,
@ -925,7 +933,7 @@
"name": "icon-folder",
"prevSize": 24,
"code": 60169,
"tempChar": ""
"tempChar": ""
},
{
"order": 147,
@ -933,7 +941,7 @@
"name": "icon-image",
"prevSize": 24,
"code": 60170,
"tempChar": ""
"tempChar": ""
},
{
"order": 4,
@ -941,7 +949,7 @@
"name": "icon-layout",
"prevSize": 24,
"code": 60171,
"tempChar": ""
"tempChar": ""
},
{
"order": 24,
@ -949,7 +957,7 @@
"name": "icon-object",
"prevSize": 24,
"code": 60172,
"tempChar": ""
"tempChar": ""
},
{
"order": 52,
@ -957,7 +965,7 @@
"name": "icon-object-unknown",
"prevSize": 24,
"code": 60173,
"tempChar": ""
"tempChar": ""
},
{
"order": 105,
@ -965,7 +973,7 @@
"name": "icon-packet",
"prevSize": 24,
"code": 60174,
"tempChar": ""
"tempChar": ""
},
{
"order": 126,
@ -973,7 +981,7 @@
"name": "icon-page",
"prevSize": 24,
"code": 60175,
"tempChar": ""
"tempChar": ""
},
{
"order": 130,
@ -981,7 +989,7 @@
"name": "icon-plot-overlay",
"prevSize": 24,
"code": 60176,
"tempChar": ""
"tempChar": ""
},
{
"order": 80,
@ -989,7 +997,7 @@
"name": "icon-plot-stacked",
"prevSize": 24,
"code": 60177,
"tempChar": ""
"tempChar": ""
},
{
"order": 134,
@ -997,7 +1005,7 @@
"name": "icon-session",
"prevSize": 24,
"code": 60178,
"tempChar": ""
"tempChar": ""
},
{
"order": 109,
@ -1005,7 +1013,7 @@
"name": "icon-tabular",
"prevSize": 24,
"code": 60179,
"tempChar": ""
"tempChar": ""
},
{
"order": 107,
@ -1013,7 +1021,7 @@
"name": "icon-tabular-lad",
"prevSize": 24,
"code": 60180,
"tempChar": ""
"tempChar": ""
},
{
"order": 106,
@ -1021,7 +1029,7 @@
"name": "icon-tabular-lad-set",
"prevSize": 24,
"code": 60181,
"tempChar": ""
"tempChar": ""
},
{
"order": 70,
@ -1029,7 +1037,7 @@
"name": "icon-tabular-realtime",
"prevSize": 24,
"code": 60182,
"tempChar": ""
"tempChar": ""
},
{
"order": 60,
@ -1037,7 +1045,7 @@
"name": "icon-tabular-scrolling",
"prevSize": 24,
"code": 60183,
"tempChar": ""
"tempChar": ""
},
{
"order": 131,
@ -1045,7 +1053,7 @@
"name": "icon-telemetry",
"prevSize": 24,
"code": 60184,
"tempChar": ""
"tempChar": ""
},
{
"order": 108,
@ -1053,7 +1061,7 @@
"name": "icon-timeline",
"prevSize": 24,
"code": 60185,
"tempChar": ""
"tempChar": ""
},
{
"order": 81,
@ -1061,7 +1069,7 @@
"name": "icon-timer",
"prevSize": 24,
"code": 60186,
"tempChar": ""
"tempChar": ""
},
{
"order": 69,
@ -1069,7 +1077,7 @@
"name": "icon-topic",
"prevSize": 24,
"code": 60187,
"tempChar": ""
"tempChar": ""
},
{
"order": 79,
@ -1077,7 +1085,7 @@
"name": "icon-box-with-dashed-lines-v2",
"prevSize": 24,
"code": 60188,
"tempChar": ""
"tempChar": ""
},
{
"order": 90,
@ -1085,7 +1093,7 @@
"name": "icon-summary-widget",
"prevSize": 24,
"code": 60189,
"tempChar": ""
"tempChar": ""
},
{
"order": 92,
@ -1093,7 +1101,7 @@
"name": "icon-notebook",
"prevSize": 24,
"code": 60190,
"tempChar": ""
"tempChar": ""
},
{
"order": 168,
@ -1101,7 +1109,7 @@
"name": "icon-tabs-view",
"prevSize": 24,
"code": 60191,
"tempChar": ""
"tempChar": ""
},
{
"order": 117,
@ -1109,7 +1117,7 @@
"name": "icon-flexible-layout",
"prevSize": 24,
"code": 60192,
"tempChar": ""
"tempChar": ""
},
{
"order": 166,
@ -1117,7 +1125,7 @@
"name": "icon-generator-sine",
"prevSize": 24,
"code": 60193,
"tempChar": ""
"tempChar": ""
},
{
"order": 167,
@ -1125,7 +1133,7 @@
"name": "icon-generator-event",
"prevSize": 24,
"code": 60194,
"tempChar": ""
"tempChar": ""
},
{
"order": 165,
@ -1133,7 +1141,7 @@
"name": "icon-gauge-v2",
"prevSize": 24,
"code": 60195,
"tempChar": ""
"tempChar": ""
},
{
"order": 170,
@ -1141,7 +1149,7 @@
"name": "icon-spectra",
"prevSize": 24,
"code": 60196,
"tempChar": ""
"tempChar": ""
},
{
"order": 171,
@ -1149,7 +1157,7 @@
"name": "icon-telemetry-spectra",
"prevSize": 24,
"code": 60197,
"tempChar": ""
"tempChar": ""
},
{
"order": 172,
@ -1157,7 +1165,7 @@
"name": "icon-pushbutton",
"prevSize": 24,
"code": 60198,
"tempChar": ""
"tempChar": ""
},
{
"order": 174,
@ -1165,7 +1173,7 @@
"name": "icon-conditional",
"prevSize": 24,
"code": 60199,
"tempChar": ""
"tempChar": ""
},
{
"order": 178,
@ -1173,7 +1181,7 @@
"name": "icon-condition-widget",
"prevSize": 24,
"code": 60200,
"tempChar": ""
"tempChar": ""
},
{
"order": 180,
@ -1181,7 +1189,7 @@
"name": "icon-alphanumeric",
"prevSize": 24,
"code": 60201,
"tempChar": ""
"tempChar": ""
},
{
"order": 183,
@ -1189,7 +1197,7 @@
"name": "icon-image-telemetry",
"prevSize": 24,
"code": 60202,
"tempChar": ""
"tempChar": ""
}
],
"id": 0,
@ -2993,6 +3001,29 @@
]
}
},
{
"id": 168,
"paths": [
"M896 320v448c-0.215 70.606-57.394 127.785-127.979 128l-0.021 0h-576c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0z",
"M832 704v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0h-192l-101.5-82.74c-24.88-24.9-74.040-45.26-109.24-45.26h-237.26c-35.305 0.102-63.898 28.695-64 63.99l-0 0.010v640c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021zM128 644v-516l256 260z"
],
"attrs": [
{},
{}
],
"grid": 16,
"tags": [
"icon-folders-collapse"
],
"isMulticolor": false,
"isMulticolor2": false,
"colorPermutations": {
"12552552551": [
{},
{}
]
}
},
{
"id": 97,
"paths": [

1
src/styles/fonts/Open-MCT-Symbols-16px.svg
View File

@ -112,6 +112,7 @@
<glyph unicode="&#xea38;" glyph-name="icon-grid-on" d="M1024 448v128h-256v256h-128v-256h-256v256h-128v-256h-256v-128h256v-256h-256v-128h256v-256h128v256h256v-256h128v256h256v128h-256v256zM640 192h-256v256h256z" />
<glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 280.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 192h-184v-128h80l104 128zM768 359.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 448h184v128h-80l-104-128zM832 832l-832-1024h192l832 1024h-192z" />
<glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 576h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512-32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
<glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 512v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 128v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 188v516l256-260z" />
<glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 768h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
<glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 832c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
<glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 832c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 832h256v-1024h-256v1024zM832 832h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
src/styles/fonts/Open-MCT-Symbols-16px.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Open-MCT-Symbols-16px.woff
View File

Binary file not shown.

12
src/ui/layout/Layout.vue
View File

@ -54,6 +54,13 @@
label="Browse"
collapsable
>
<button
slot="controls"
class="c-icon-button l-shell__reset-tree-button icon-folders-collapse"
title="Collapse all tree items"
@click="handleTreeReset"
>
</button>
<button
slot="controls"
class="c-icon-button l-shell__sync-tree-button icon-target"
@ -63,6 +70,7 @@
</button>
<mct-tree
:sync-tree-navigation="triggerSync"
:reset-tree-navigation="triggerReset"
class="l-shell__tree"
/>
</pane>
@ -148,6 +156,7 @@ export default {
hasToolbar: false,
actionCollection: undefined,
triggerSync: false,
triggerReset: false,
headExpanded
};
},
@ -228,6 +237,9 @@ export default {
},
handleSyncTreeNavigation() {
this.triggerSync = !this.triggerSync;
},
handleTreeReset() {
this.triggerReset = !this.triggerReset;
}
}
};

10
src/ui/layout/layout.scss
View File

@ -100,8 +100,14 @@
&__pane-tree {
background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
[class*="expand-button"],
[class*="sync-tree-button"] {
.l-pane__header {
// Hide all buttons except the collapse button
> :not(.l-pane__collapse-button) {
display: none;
}
}
[class*="expand-button"] {
display: none;
}

19
src/ui/layout/mct-tree.scss
View File

@ -30,7 +30,7 @@
width: 100%;
}
&__scrollable-children {
&__scrollable {
overflow: auto;
}
@ -56,6 +56,7 @@
@include userSelectNone();
overflow-x: hidden;
overflow-y: auto;
padding-right: $interiorMarginSm;
.icon-arrow-nav-to-parent {
visibility: hidden;
@ -90,7 +91,7 @@
color: $colorItemTreeIcon;
}
&:hover {
@include hover {
background: $colorItemTreeHoverBg;
filter: $filterHov;
}
@ -124,14 +125,16 @@
}
&__item {
> * + * {
margin-left: $interiorMarginSm;
[class*="view-control"] {
padding: 2px 10px;
}
@include desktop {
&:hover {
background: $colorItemTreeHoverBg;
}
> * + * {
margin-left: ceil($interiorMarginSm / 2);
}
@include hover {
background: $colorItemTreeHoverBg;
}
// Object labels in trees

957
src/ui/layout/mct-tree.vue
View File

File diff suppressed because it is too large Load Diff

89
src/ui/layout/tree-item.vue
View File

@ -1,9 +1,6 @@
<template>
<div
:style="{
'top': virtualScroll ? itemTop : 'auto',
'position': virtualScroll ? 'absolute' : 'relative'
}"
:style="treeItemStyles"
class="c-tree__item-h"
>
<div
@ -17,28 +14,23 @@
@contextmenu.capture="handleContextMenu"
>
<view-control
ref="navUp"
v-model="expanded"
ref="navigate"
class="c-tree__item__view-control"
:control-class="'icon-arrow-nav-to-parent'"
:enabled="showUp"
@input="resetTreeHere"
:value="isOpen || isLoading"
:enabled="!activeSearch && hasComposition"
@input="navigationClick()"
/>
<object-label
ref="objectLabel"
:domain-object="node.object"
:object-path="node.objectPath"
:navigate-to-path="navigationPath"
:style="{ paddingLeft: leftOffset }"
@context-click-active="setContextClickActive"
/>
<view-control
ref="navDown"
v-model="expanded"
class="c-tree__item__view-control"
:control-class="'c-nav__down'"
:enabled="hasComposition && showDown"
/>
<span
v-if="isLoading"
class="loading"
></span>
</div>
</div>
</template>
@ -59,17 +51,13 @@ export default {
type: Object,
required: true
},
leftOffset: {
type: String,
default: '0px'
},
showUp: {
activeSearch: {
type: Boolean,
default: false
},
showDown: {
type: Boolean,
default: true
leftOffset: {
type: String,
default: '0px'
},
itemIndex: {
type: Number,
@ -86,9 +74,13 @@ export default {
required: false,
default: 0
},
virtualScroll: {
type: Boolean,
default: false
openItems: {
type: Array,
required: true
},
loadingItems: {
type: Object,
required: true
}
},
data() {
@ -97,7 +89,6 @@ export default {
return {
hasComposition: false,
navigated: this.isNavigated(),
expanded: false,
contextClickActive: false
};
},
@ -113,37 +104,44 @@ export default {
return parentKeyString !== this.node.object.location;
},
itemTop() {
return (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
}
},
watch: {
expanded() {
this.$emit('expanded', this.domainObject);
isLoading() {
return Boolean(this.loadingItems[this.navigationPath]);
},
isOpen() {
return this.openItems.includes(this.navigationPath);
},
treeItemStyles() {
let itemTop = (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
return {
'top': itemTop,
'position': 'absolute',
'padding-left': this.leftOffset
};
}
},
mounted() {
let objectComposition = this.openmct.composition.get(this.node.object);
this.domainObject = this.node.object;
let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
this.domainObject = newObject;
});
this.$once('hook:destroyed', removeListener);
if (objectComposition) {
if (this.openmct.composition.get(this.domainObject)) {
this.hasComposition = true;
}
this.openmct.router.on('change:path', this.highlightIfNavigated);
this.$emit('tree-item-mounted', this.navigationPath);
},
destroyed() {
this.openmct.router.off('change:path', this.highlightIfNavigated);
this.$emit('tree-item-destoyed', this.navigationPath);
},
methods: {
navigationClick() {
this.$emit('navigation-click', this.isOpen || this.isLoading ? 'close' : 'open');
},
handleClick(event) {
// skip for navigation, let viewControl handle click
if ([this.$refs.navUp.$el, this.$refs.navDown.$el].includes(event.target)) {
if (this.$refs.navigate.$el === event.target) {
return;
}
@ -160,9 +158,6 @@ export default {
highlightIfNavigated() {
this.navigated = this.isNavigated();
},
resetTreeHere() {
this.$emit('resetTree', this.node);
},
setContextClickActive(active) {
this.contextClickActive = active;
}