|
@@ -3,14 +3,14 @@
|
|
|
class="node-book"
|
|
|
>
|
|
|
<section
|
|
|
- class="node-book-stack no-events-container"
|
|
|
+ class="node-book-stack"
|
|
|
:style="`--count: ${nodes.length - 1}; --h: ${stackHeight}px;`"
|
|
|
>
|
|
|
<div
|
|
|
v-for="({ parent, children }, i) in nodes" :key="parent.id"
|
|
|
class="node-book-stack-item node-book-stack-item-parent splitted no-events-container"
|
|
|
:class="{ active: i === nodes.length - 1 }"
|
|
|
- :style="`--nth: ${i}`"
|
|
|
+ :style="`--nth: ${i};`"
|
|
|
>
|
|
|
<node-view-child-list
|
|
|
v-if="parent.children && parent.children.length"
|
|
@@ -20,6 +20,7 @@
|
|
|
/>
|
|
|
|
|
|
<node-view
|
|
|
+ :ref="'parent-' + parent.id"
|
|
|
:node="parent"
|
|
|
type="ref"
|
|
|
mode="view"
|
|
@@ -36,10 +37,11 @@
|
|
|
<div
|
|
|
v-for="(child, j) in children" :key="child.id + '-cont'"
|
|
|
class="node-book-stack-item"
|
|
|
- :class="{ active: j === children.length - 1 }"
|
|
|
+ :class="{ active: j === children.length - 1 && i === nodes.length - 1 }"
|
|
|
:style="`--nth: ${j}`"
|
|
|
>
|
|
|
<node-view
|
|
|
+ :ref="'child-' + child.id"
|
|
|
:key="child.id"
|
|
|
:node="child"
|
|
|
mode="view"
|
|
@@ -84,15 +86,24 @@ export default {
|
|
|
|
|
|
onNodeViewClick (e, parentIndex, childIndex) {
|
|
|
if (e.target.classList.contains('btn') || window.innerWidth < 1024) return
|
|
|
+ const lastChildIndex = this.nodes[parentIndex].children.length - 1
|
|
|
const parentIsLast = parentIndex === this.nodes.length - 1
|
|
|
const childIsLast = childIndex !== undefined
|
|
|
- ? childIndex === this.nodes[parentIndex].children.length - 1
|
|
|
+ ? childIndex === lastChildIndex
|
|
|
: true
|
|
|
if (parentIsLast && childIsLast) return
|
|
|
const ids = { parentId: this.nodes[parentIndex].parent.id }
|
|
|
+ if (!parentIsLast) {
|
|
|
+ this.$refs['parent-' + ids.parentId][0].onScroll({}, true)
|
|
|
+ }
|
|
|
if (childIndex !== undefined) {
|
|
|
ids.childId = this.nodes[parentIndex].children[childIndex].id
|
|
|
}
|
|
|
+ if (childIndex !== undefined || lastChildIndex > -1) {
|
|
|
+ const childId = childIndex !== undefined ? ids.childId : this.nodes[parentIndex].children[lastChildIndex].id
|
|
|
+ console.log(childId)
|
|
|
+ this.$refs['child-' + childId][0].onScroll({}, true)
|
|
|
+ }
|
|
|
this.$emit('select-node', ids)
|
|
|
}
|
|
|
},
|
|
@@ -110,9 +121,7 @@ export default {
|
|
|
.node-book {
|
|
|
min-height: 100%;
|
|
|
|
|
|
- @include media-breakpoint-down($layout-bp-down) {
|
|
|
- background-color: $white;
|
|
|
- }
|
|
|
+ background-color: rgba($white, .5);
|
|
|
|
|
|
@include media-breakpoint-up($layout-bp) {
|
|
|
height: 100%;
|
|
@@ -135,98 +144,79 @@ export default {
|
|
|
top: calc(var(--h) * var(--nth));
|
|
|
height: calc(100% - (var(--h) * var(--nth)));
|
|
|
|
|
|
- &-parent > .node-view {
|
|
|
- border-right: $line;
|
|
|
- }
|
|
|
-
|
|
|
- &-parent > .node-view {
|
|
|
+ ::v-deep > .node-view {
|
|
|
border-top: $line;
|
|
|
}
|
|
|
|
|
|
- &:not(.node-book-stack-item-parent):first-child {
|
|
|
- border-top: $line;
|
|
|
+ &-parent > .node-view {
|
|
|
+ border-right: $line;
|
|
|
}
|
|
|
|
|
|
+ &:not(.active) {
|
|
|
+ ::v-deep > .node-view {
|
|
|
+ cursor: pointer;
|
|
|
+ overflow-y: hidden;
|
|
|
|
|
|
- // BLURS
|
|
|
- &-parent:not(.active) {
|
|
|
- &::before,
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- pointer-events: none;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- display: block;
|
|
|
- top: $border-width;
|
|
|
- height: calc(var(--h) - #{$border-width});
|
|
|
- background-color: rgba($white, .5);
|
|
|
- }
|
|
|
- &::before {
|
|
|
- width: calc(50% - #{$border-width});
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- width: 50%;
|
|
|
- left: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:not(:hover) {
|
|
|
+ .node-view-header-wrapper {
|
|
|
+ opacity: .5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .node-view-body-wrapper,
|
|
|
+ .node-view-footer-wrapper {
|
|
|
+ opacity: .5;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
|
|
|
- &-parent.active {
|
|
|
- background-color: rgba($white, .5);
|
|
|
- }
|
|
|
+ .node-view-header {
|
|
|
+ z-index: 0;
|
|
|
+ padding-top: $node-view-spacer-y * .75;
|
|
|
+ padding-bottom: $node-view-spacer-y * .75;
|
|
|
+ }
|
|
|
|
|
|
- &:not(.active) {
|
|
|
- .node-view {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .node-view-header-ref {
|
|
|
+ h4 {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep {
|
|
|
- .node-view {
|
|
|
- // overflow-y: hidden;
|
|
|
+ .edition {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- &-header {
|
|
|
- z-index: 0;
|
|
|
+ .btn-url {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.node-view-child-list {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
+ @each $color, $value in $theme-colors {
|
|
|
+ &-#{$color} {
|
|
|
+ background-color: lighten($value, 15%);
|
|
|
+
|
|
|
+ .node-view-header,
|
|
|
+ .node-view-footer {
|
|
|
+ background-color: lighten($value, 15%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .node-view-header {
|
|
|
+ z-index: 100;
|
|
|
+ border-bottom: $line !important;
|
|
|
+ padding-bottom: calc(#{$node-view-spacer-y * .75} - 2px);
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- // ::v-deep .node-view:not(:hover) {
|
|
|
- // .node-view-header {
|
|
|
- // padding-top: $node-view-spacer-sm-y;
|
|
|
- // padding-bottom: $node-view-spacer-sm-y;
|
|
|
- // }
|
|
|
- //
|
|
|
- // h4 {
|
|
|
- // font-size: 2rem;
|
|
|
- // > * {
|
|
|
- // display: inline !important;
|
|
|
- // }
|
|
|
- // .edition {
|
|
|
- // display: none !important;
|
|
|
- // }
|
|
|
- // display: block;
|
|
|
- // display: -webkit-box;
|
|
|
- // -webkit-line-clamp: 1;
|
|
|
- // -webkit-box-orient: vertical;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // overflow: hidden;
|
|
|
- // max-height: 1.5em;
|
|
|
- // }
|
|
|
- //
|
|
|
- // .node-view-header-prod h4 {
|
|
|
- // font-size: 1rem;
|
|
|
- // }
|
|
|
- // }
|
|
|
- //
|
|
|
- // &:hover {
|
|
|
- // ::v-deep .node-view:hover .node-view-header {
|
|
|
- // z-index: calc(var(--count) + 10);
|
|
|
- // border-bottom: $line;
|
|
|
- // }
|
|
|
- // }
|
|
|
}
|
|
|
|
|
|
&.splitted {
|