ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-02 07:30:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Navigation Tree] Animation fixes (#3375)

Browse Source 
* added padding for loading indicator, updated no items logic and is loading logic, adding checks for loading to prevent navigation during loading

* updating style name that is used in more than one way

* moving indicator offset style to computed value

* lint fix
This commit is contained in:
Jamie V 2020-09-15 12:52:52 -07:00 committed by GitHub
parent 4a576321e3
commit 54ce86eff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,7 @@
<!-- loading --> <!-- loading -->
<li <li
v-if="isLoading" v-if="isLoading"
:style="indicatorLeftOffset"
class="c-tree__item c-tree-and-search__loading loading" class="c-tree__item c-tree-and-search__loading loading"
> >
<span class="c-tree__item__label">Loading...</span> <span class="c-tree__item__label">Loading...</span>
@ -77,7 +78,7 @@
/> />
<li <li
v-if="visibleItems.length === 0 && !noVisibleItems" v-if="visibleItems.length === 0 && !noVisibleItems"
:style="emptyStyles()" :style="indicatorLeftOffset"
class="c-tree__item c-tree__item--empty" class="c-tree__item c-tree__item--empty"
> >
No items No items
@ -167,10 +168,21 @@ export default {
}, },
itemLeftOffset() { itemLeftOffset() {
return this.activeSearch ? '0px' : this.ancestors.length * 10 + 'px'; return this.activeSearch ? '0px' : this.ancestors.length * 10 + 'px';
},
indicatorLeftOffset() {
let offset = ((this.ancestors.length + 1) * 10);
return {
paddingLeft: offset + 'px'
};
} }
}, },
watch: { watch: {
syncTreeNavigation() { syncTreeNavigation() {
if (this.isLoading) {
return;
}
const AND_SAVE_PATH = true; const AND_SAVE_PATH = true;
let currentLocationPath = this.openmct.router.currentLocation.path; let currentLocationPath = this.openmct.router.currentLocation.path;
let hasParent = this.currentlyViewedObjectParentPath() || (this.multipleRootChildren && !this.currentlyViewedObjectParentPath()); let hasParent = this.currentlyViewedObjectParentPath() || (this.multipleRootChildren && !this.currentlyViewedObjectParentPath());
@ -292,6 +304,7 @@ export default {
this.itemOffset = start; this.itemOffset = start;
this.visibleItems = this.focusedItems.slice(start, end); this.visibleItems = this.focusedItems.slice(start, end);
this.noVisibleItems = false;
this.updatingView = false; this.updatingView = false;
}); });
@ -319,7 +332,6 @@ export default {
this.noScroll = true; this.noScroll = true;
} }
this.noVisibleItems = false;
this.updatevisibleItems(); this.updatevisibleItems();
}); });
} else { } else {
@ -408,7 +420,9 @@ export default {
} }
}, },
async getAllChildren(node) { async getAllChildren(node) {
await this.clearVisibleItems();
this.isLoading = true; this.isLoading = true;
if (this.composition) { if (this.composition) {
this.composition.off('add', this.addChild); this.composition.off('add', this.addChild);
this.composition.off('remove', this.removeChild); this.composition.off('remove', this.removeChild);
@ -554,22 +568,21 @@ export default {
this.$refs.scrollable.scrollTop = 0; this.$refs.scrollable.scrollTop = 0;
this.setContainerHeight(); this.setContainerHeight();
}, },
async handleReset(node) { handleReset(node) {
this.visibleItems = []; if (this.isLoading) {
await this.$nextTick(); // prevents "ghost" image of visibleItems return;
}
this.childrenSlideClass = 'slide-right'; this.childrenSlideClass = 'slide-right';
this.ancestors.splice(this.ancestors.indexOf(node) + 1); this.ancestors.splice(this.ancestors.indexOf(node) + 1);
this.getAllChildren(node); this.getAllChildren(node);
this.setCurrentNavigatedPath(); this.setCurrentNavigatedPath();
}, },
async handleExpanded(node) { handleExpanded(node) {
if (this.activeSearch) { if (this.activeSearch || this.isLoading) {
return; return;
} }
this.noVisibleItems = true;
this.visibleItems = [];
await this.$nextTick(); // prevents "ghost" image of visibleItems
this.childrenSlideClass = 'slide-left'; this.childrenSlideClass = 'slide-left';
let newParent = this.buildTreeItem(node); let newParent = this.buildTreeItem(node);
this.ancestors.push(newParent); this.ancestors.push(newParent);
@ -605,6 +618,13 @@ export default {
return currentPath.join('/'); return currentPath.join('/');
} }
}, },
async clearVisibleItems() {
this.noVisibleItems = true;
this.visibleItems = [];
await this.$nextTick(); // prevents "ghost" image of visibleItems
return;
},
scrollItems(event) { scrollItems(event) {
if (!windowResizing) { if (!windowResizing) {
this.updatevisibleItems(); this.updatevisibleItems();
@ -619,13 +639,6 @@ export default {
overflow: this.noScroll ? 'hidden' : 'scroll' overflow: this.noScroll ? 'hidden' : 'scroll'
}; };
}, },
emptyStyles() {
let offset = ((this.ancestors.length + 1) * 10);
return {
paddingLeft: offset + 'px'
};
},
childrenIn(el, done) { childrenIn(el, done) {
// still needing this timeout for some reason // still needing this timeout for some reason
window.setTimeout(this.setContainerHeight, RECHECK_DELAY); window.setTimeout(this.setContainerHeight, RECHECK_DELAY);