ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 07:08:12 +00:00
Code Issues Actions 4 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
14 changed files with 578 additions and 641 deletions
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#} * @memberof {module:openmct.CompositionCollection#}
* @name load * @name load
*/ */
CompositionCollection.prototype.load = function () { CompositionCollection.prototype.load = function (abortSignal) {
this.cleanUpMutables(); this.cleanUpMutables();
return this.provider.load(this.domainObject) return this.provider.load(this.domainObject)
.then(function (children) { .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)) }.bind(this))
.then(function (childObjects) { .then(function (childObjects) {
childObjects.forEach(c => this.add(c, true)); 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; margin: 0 $interiorMargin $interiorMargin 0;
} }
} }
body.mobile & {
flex: 1 0 auto;
}
} }
/******************************* GRID ITEMS */ /******************************* GRID ITEMS */

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

@ -362,7 +362,7 @@ $legendTableHeadBg: $colorTabHeaderBg;
// Tree // Tree
$colorTreeBg: transparent; $colorTreeBg: transparent;
$colorItemTreeHoverBg: rgba(#fff, 0.03); $colorItemTreeHoverBg: rgba(#fff, 0.1);
$colorItemTreeHoverFg: #fff; $colorItemTreeHoverFg: #fff;
$colorItemTreeIcon: $colorKey; // Used $colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // 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-on: '\ea38';
$glyph-icon-grid-off: '\ea39'; $glyph-icon-grid-off: '\ea39';
$glyph-icon-camera: '\ea3a'; $glyph-icon-camera: '\ea3a';
$glyph-icon-folders-collapse: '\ea3b';
$glyph-icon-activity: '\eb00'; $glyph-icon-activity: '\eb00';
$glyph-icon-activity-mode: '\eb01'; $glyph-icon-activity-mode: '\eb01';
$glyph-icon-autoflow-tabular: '\eb02'; $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-on { @include glyphBefore($glyph-icon-grid-on); }
.icon-grid-off { @include glyphBefore($glyph-icon-grid-off); } .icon-grid-off { @include glyphBefore($glyph-icon-grid-off); }
.icon-camera { @include glyphBefore($glyph-icon-camera); } .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 { @include glyphBefore($glyph-icon-activity); }
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); } .icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); } .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": { "metadata": {
"name": "Open MCT Symbols 16px", "name": "Open MCT Symbols 16px",
"lastOpened": 0, "lastOpened": 0,
"created": 1602779919972 "created": 1621648023886
}, },
"iconSets": [ "iconSets": [
{ {
@ -847,13 +847,21 @@
"code": 59962, "code": 59962,
"tempChar": "" "tempChar": ""
}, },
{
"order": 196,
"id": 168,
"name": "icon-folders-collapse",
"prevSize": 24,
"code": 59963,
"tempChar": ""
},
{ {
"order": 144, "order": 144,
"id": 97, "id": 97,
"name": "icon-activity", "name": "icon-activity",
"prevSize": 24, "prevSize": 24,
"code": 60160, "code": 60160,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 104, "order": 104,
@ -861,7 +869,7 @@
"name": "icon-activity-mode", "name": "icon-activity-mode",
"prevSize": 24, "prevSize": 24,
"code": 60161, "code": 60161,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 137, "order": 137,
@ -869,7 +877,7 @@
"name": "icon-autoflow-tabular", "name": "icon-autoflow-tabular",
"prevSize": 24, "prevSize": 24,
"code": 60162, "code": 60162,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 115, "order": 115,
@ -877,7 +885,7 @@
"name": "icon-clock", "name": "icon-clock",
"prevSize": 24, "prevSize": 24,
"code": 60163, "code": 60163,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 2, "order": 2,
@ -885,7 +893,7 @@
"name": "icon-database", "name": "icon-database",
"prevSize": 24, "prevSize": 24,
"code": 60164, "code": 60164,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 3, "order": 3,
@ -893,7 +901,7 @@
"name": "icon-database-query", "name": "icon-database-query",
"prevSize": 24, "prevSize": 24,
"code": 60165, "code": 60165,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 67, "order": 67,
@ -901,7 +909,7 @@
"name": "icon-dataset", "name": "icon-dataset",
"prevSize": 24, "prevSize": 24,
"code": 60166, "code": 60166,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 59, "order": 59,
@ -909,7 +917,7 @@
"name": "icon-datatable", "name": "icon-datatable",
"prevSize": 24, "prevSize": 24,
"code": 60167, "code": 60167,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 136, "order": 136,
@ -917,7 +925,7 @@
"name": "icon-dictionary", "name": "icon-dictionary",
"prevSize": 24, "prevSize": 24,
"code": 60168, "code": 60168,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 51, "order": 51,
@ -925,7 +933,7 @@
"name": "icon-folder", "name": "icon-folder",
"prevSize": 24, "prevSize": 24,
"code": 60169, "code": 60169,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 147, "order": 147,
@ -933,7 +941,7 @@
"name": "icon-image", "name": "icon-image",
"prevSize": 24, "prevSize": 24,
"code": 60170, "code": 60170,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 4, "order": 4,
@ -941,7 +949,7 @@
"name": "icon-layout", "name": "icon-layout",
"prevSize": 24, "prevSize": 24,
"code": 60171, "code": 60171,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 24, "order": 24,
@ -949,7 +957,7 @@
"name": "icon-object", "name": "icon-object",
"prevSize": 24, "prevSize": 24,
"code": 60172, "code": 60172,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 52, "order": 52,
@ -957,7 +965,7 @@
"name": "icon-object-unknown", "name": "icon-object-unknown",
"prevSize": 24, "prevSize": 24,
"code": 60173, "code": 60173,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 105, "order": 105,
@ -965,7 +973,7 @@
"name": "icon-packet", "name": "icon-packet",
"prevSize": 24, "prevSize": 24,
"code": 60174, "code": 60174,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 126, "order": 126,
@ -973,7 +981,7 @@
"name": "icon-page", "name": "icon-page",
"prevSize": 24, "prevSize": 24,
"code": 60175, "code": 60175,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 130, "order": 130,
@ -981,7 +989,7 @@
"name": "icon-plot-overlay", "name": "icon-plot-overlay",
"prevSize": 24, "prevSize": 24,
"code": 60176, "code": 60176,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 80, "order": 80,
@ -989,7 +997,7 @@
"name": "icon-plot-stacked", "name": "icon-plot-stacked",
"prevSize": 24, "prevSize": 24,
"code": 60177, "code": 60177,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 134, "order": 134,
@ -997,7 +1005,7 @@
"name": "icon-session", "name": "icon-session",
"prevSize": 24, "prevSize": 24,
"code": 60178, "code": 60178,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 109, "order": 109,
@ -1005,7 +1013,7 @@
"name": "icon-tabular", "name": "icon-tabular",
"prevSize": 24, "prevSize": 24,
"code": 60179, "code": 60179,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 107, "order": 107,
@ -1013,7 +1021,7 @@
"name": "icon-tabular-lad", "name": "icon-tabular-lad",
"prevSize": 24, "prevSize": 24,
"code": 60180, "code": 60180,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 106, "order": 106,
@ -1021,7 +1029,7 @@
"name": "icon-tabular-lad-set", "name": "icon-tabular-lad-set",
"prevSize": 24, "prevSize": 24,
"code": 60181, "code": 60181,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 70, "order": 70,
@ -1029,7 +1037,7 @@
"name": "icon-tabular-realtime", "name": "icon-tabular-realtime",
"prevSize": 24, "prevSize": 24,
"code": 60182, "code": 60182,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 60, "order": 60,
@ -1037,7 +1045,7 @@
"name": "icon-tabular-scrolling", "name": "icon-tabular-scrolling",
"prevSize": 24, "prevSize": 24,
"code": 60183, "code": 60183,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 131, "order": 131,
@ -1045,7 +1053,7 @@
"name": "icon-telemetry", "name": "icon-telemetry",
"prevSize": 24, "prevSize": 24,
"code": 60184, "code": 60184,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 108, "order": 108,
@ -1053,7 +1061,7 @@
"name": "icon-timeline", "name": "icon-timeline",
"prevSize": 24, "prevSize": 24,
"code": 60185, "code": 60185,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 81, "order": 81,
@ -1061,7 +1069,7 @@
"name": "icon-timer", "name": "icon-timer",
"prevSize": 24, "prevSize": 24,
"code": 60186, "code": 60186,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 69, "order": 69,
@ -1069,7 +1077,7 @@
"name": "icon-topic", "name": "icon-topic",
"prevSize": 24, "prevSize": 24,
"code": 60187, "code": 60187,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 79, "order": 79,
@ -1077,7 +1085,7 @@
"name": "icon-box-with-dashed-lines-v2", "name": "icon-box-with-dashed-lines-v2",
"prevSize": 24, "prevSize": 24,
"code": 60188, "code": 60188,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 90, "order": 90,
@ -1085,7 +1093,7 @@
"name": "icon-summary-widget", "name": "icon-summary-widget",
"prevSize": 24, "prevSize": 24,
"code": 60189, "code": 60189,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 92, "order": 92,
@ -1093,7 +1101,7 @@
"name": "icon-notebook", "name": "icon-notebook",
"prevSize": 24, "prevSize": 24,
"code": 60190, "code": 60190,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 168, "order": 168,
@ -1101,7 +1109,7 @@
"name": "icon-tabs-view", "name": "icon-tabs-view",
"prevSize": 24, "prevSize": 24,
"code": 60191, "code": 60191,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 117, "order": 117,
@ -1109,7 +1117,7 @@
"name": "icon-flexible-layout", "name": "icon-flexible-layout",
"prevSize": 24, "prevSize": 24,
"code": 60192, "code": 60192,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 166, "order": 166,
@ -1117,7 +1125,7 @@
"name": "icon-generator-sine", "name": "icon-generator-sine",
"prevSize": 24, "prevSize": 24,
"code": 60193, "code": 60193,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 167, "order": 167,
@ -1125,7 +1133,7 @@
"name": "icon-generator-event", "name": "icon-generator-event",
"prevSize": 24, "prevSize": 24,
"code": 60194, "code": 60194,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 165, "order": 165,
@ -1133,7 +1141,7 @@
"name": "icon-gauge-v2", "name": "icon-gauge-v2",
"prevSize": 24, "prevSize": 24,
"code": 60195, "code": 60195,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 170, "order": 170,
@ -1141,7 +1149,7 @@
"name": "icon-spectra", "name": "icon-spectra",
"prevSize": 24, "prevSize": 24,
"code": 60196, "code": 60196,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 171, "order": 171,
@ -1149,7 +1157,7 @@
"name": "icon-telemetry-spectra", "name": "icon-telemetry-spectra",
"prevSize": 24, "prevSize": 24,
"code": 60197, "code": 60197,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 172, "order": 172,
@ -1157,7 +1165,7 @@
"name": "icon-pushbutton", "name": "icon-pushbutton",
"prevSize": 24, "prevSize": 24,
"code": 60198, "code": 60198,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 174, "order": 174,
@ -1165,7 +1173,7 @@
"name": "icon-conditional", "name": "icon-conditional",
"prevSize": 24, "prevSize": 24,
"code": 60199, "code": 60199,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 178, "order": 178,
@ -1173,7 +1181,7 @@
"name": "icon-condition-widget", "name": "icon-condition-widget",
"prevSize": 24, "prevSize": 24,
"code": 60200, "code": 60200,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 180, "order": 180,
@ -1181,7 +1189,7 @@
"name": "icon-alphanumeric", "name": "icon-alphanumeric",
"prevSize": 24, "prevSize": 24,
"code": 60201, "code": 60201,
"tempChar": "" "tempChar": ""
}, },
{ {
"order": 183, "order": 183,
@ -1189,7 +1197,7 @@
"name": "icon-image-telemetry", "name": "icon-image-telemetry",
"prevSize": 24, "prevSize": 24,
"code": 60202, "code": 60202,
"tempChar": "" "tempChar": ""
} }
], ],
"id": 0, "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, "id": 97,
"paths": [ "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="&#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="&#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="&#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="&#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="&#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" /> <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" label="Browse"
collapsable 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 <button
slot="controls" slot="controls"
class="c-icon-button l-shell__sync-tree-button icon-target" class="c-icon-button l-shell__sync-tree-button icon-target"
@ -63,6 +70,7 @@
</button> </button>
<mct-tree <mct-tree
:sync-tree-navigation="triggerSync" :sync-tree-navigation="triggerSync"
:reset-tree-navigation="triggerReset"
class="l-shell__tree" class="l-shell__tree"
/> />
</pane> </pane>
@ -148,6 +156,7 @@ export default {
hasToolbar: false, hasToolbar: false,
actionCollection: undefined, actionCollection: undefined,
triggerSync: false, triggerSync: false,
triggerReset: false,
headExpanded headExpanded
}; };
}, },
@ -228,6 +237,9 @@ export default {
}, },
handleSyncTreeNavigation() { handleSyncTreeNavigation() {
this.triggerSync = !this.triggerSync; this.triggerSync = !this.triggerSync;
},
handleTreeReset() {
this.triggerReset = !this.triggerReset;
} }
} }
}; };

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

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