New tree refactor (#3098)
* revised new tree refactor, moved most of the logic to mct-tree instead of tree-item * scrollTo set for sync, bug fixes, window resize handling * removing console logs * checking domainobject composition for length to verify children instead of composition object itself * added scrollTo on load if in viewed objects directory * loading, sync bug, search issues, opitmization * initial PR review updates * modified so search now uses the same container and virtual scroll * eslint fix * Adding new glyphs - Multiple new glyphs cherrypicked from branch `add-new-glyphs-062320`; * Styling for new-tree-refactor WIP - WIP! - New glyphs, markup changes in BrowseBar.vue; - Refinements to tree items, WIP; - TODO: move hard-coded CSS values into _constants, make theme-compatible; * Styling for new-tree-refactor WIP - WIP! - Added new `c-click-link` CSS class; - Move tree sync button into tree pane area; - Added named "controls" slot to pane.vue; - _up and _down arrows now use visibility instead of opacity to prevent accidental clicks; * Styling for new-tree-refactor WIP - WIP! - Significant mods and simplification in pane.vue and assoc CSS for expand/collapse functionality; - Wait spinner when in tree: cleanups, simplification; * More new glyphs, updated art - New glyphs: icon-unlocked and icon-target; - Updated art for icon-lock glyph; * remove arrows for search results, hightlight "my items" correctly, added empty folder notic * Styling for new-tree-refactor WIP - WIP! - Refinements to "empty" object element; - Changed sync-tree icon glyph; * Styling for new-tree-refactor WIP - Nav up arrows now left-align properly; * Styling for new-tree-refactor - Significant consolidation and cleanups in mct-tree.scss; - Normalize base and hover styles across new tree, legacy tree, list-items (used in Notebook) and Folder List View; - Class naming normalization, change `c-list-item__name-value` to `c-list-item__name`; - Add styling to override and remove `<a> outline: dotted` coming from normalize-min; - Removed too-broad `<a>` coloring in tables; * Styling for new-tree-refactor - Fix styles for Snow theme; - Sync Maelstrom and Espresso themes; - Remove too-broad `<a>` hover styling from global.scss; - Disallow pointer-events on `is-navigated` object's label (click on c-nav__down element still allowed); * Styling for new-tree-refactor - Normalizing status area expand/collapse iconography to match new approach in panes; * Adding new glyphs - Added `icon-items-collapse` and `icon-items-expand`; * Styling for new-tree-refactor - Using new glyphs for items expand/collapse in Status area; * dynamic item height for desktop and mobile views * lint fixes * updated addChild and removeChild functions as they were not working at all * some PR comment updates!; * Remove unneeded hard-coded CSS color property * fixed issues when multiple root children exist, added plugin to change the name of the default root object * removing "my other items" testing references * linting fixes * updating karma timeouts for testing purposes * eslint fixes * WIP: fixing linting issues * updating for testing * set root object provider to update root registry if called more than once * tweaking tests so that it passes both locally and on the serve tests * removing old css code preventing context clicks on active menu items * fixing testing errors * backwards compatible storage fix Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
Jamie V
@@ -12,10 +12,6 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__no-results {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
@@ -26,6 +22,33 @@
|
||||
height: 0; // Chrome 73 overflow bug fix
|
||||
padding-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.c-tree {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
transition: all;
|
||||
|
||||
.scrollable-children {
|
||||
.c-tree__item-h {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__item--empty {
|
||||
// Styling for empty tree items
|
||||
// Indent should allow for c-nav view-control width and icon spacing
|
||||
font-style: italic;
|
||||
padding: $interiorMarginSm * 2 1px;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: $treeNavArrowD + $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-tree,
|
||||
@@ -43,7 +66,6 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
$aPad: $interiorMarginSm;
|
||||
border-radius: $controlCr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -82,22 +104,9 @@
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.is-navigated-object,
|
||||
&.is-selected {
|
||||
.c-tree__item__type-icon:before {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-being-edited {
|
||||
background: $colorItemTreeEditingBg;
|
||||
.c-tree__item__type-icon:before {
|
||||
color: $colorItemTreeEditingIcon;
|
||||
}
|
||||
|
||||
.c-tree__item__name {
|
||||
color: $colorItemTreeEditingFg;
|
||||
font-style: italic;
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,10 +115,6 @@
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $colorItemTreeFg;
|
||||
}
|
||||
|
||||
&.is-alias {
|
||||
// Object is an alias to an original.
|
||||
[class*='__type-icon'] {
|
||||
@@ -125,6 +130,55 @@
|
||||
width: ceil($mobileTreeItemH * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-navigated-object,
|
||||
&.is-selected {
|
||||
background: $colorItemTreeSelectedBg;
|
||||
|
||||
[class*="__label"],
|
||||
[class*="__name"] {
|
||||
color: $colorItemTreeSelectedFg;
|
||||
}
|
||||
|
||||
[class*="__type-icon"]:before {
|
||||
color: $colorItemTreeSelectedIcon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item__label {
|
||||
@include desktop {
|
||||
&:hover {
|
||||
filter: $filterHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-editing .is-navigated-object {
|
||||
a[class*="__item__label"] {
|
||||
opacity: 0.4;
|
||||
|
||||
[class*="__name"] {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-tree {
|
||||
&__item {
|
||||
body.mobile & {
|
||||
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
|
||||
height: $mobileTreeItemH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
[class*="view-control"] {
|
||||
width: ceil($mobileTreeItemH * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-tree {
|
||||
margin-left: $treeItemIndent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,6 +195,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
.c-nav {
|
||||
$dimension: $treeNavArrowD;
|
||||
|
||||
&__up, &__down {
|
||||
flex: 0 0 auto;
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&.is-enabled {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Nav arrow
|
||||
$dimension: 9px;
|
||||
$width: 3px;
|
||||
border: solid $colorItemTreeVC;
|
||||
border-width: 0 $width $width 0;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%; top: 50%;
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
&:hover:before {
|
||||
border-color: $colorItemTreeHoverFg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__up:before {
|
||||
transform: translate(-30%, -50%) rotate(135deg);
|
||||
}
|
||||
|
||||
&__down:before {
|
||||
transform: translate(-70%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.c-selector {
|
||||
.c-tree-and-search__tree.c-tree {
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
@@ -148,3 +247,32 @@
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
// TRANSITIONS
|
||||
.slide-left,
|
||||
.slide-right {
|
||||
animation-duration: 500ms;
|
||||
animation-iteration-count: 1;
|
||||
transition: all;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.slide-left {
|
||||
animation-name: animSlideLeft;
|
||||
}
|
||||
|
||||
.slide-right {
|
||||
animation-name: animSlideRight;
|
||||
}
|
||||
|
||||
@keyframes animSlideLeft {
|
||||
0% {opactiy: 0; transform: translateX(100%);}
|
||||
10% {opacity: 1;}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes animSlideRight {
|
||||
0% {opactiy: 0; transform: translateX(-100%);}
|
||||
10% {opacity: 1;}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user