diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-04-24 16:58:31 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-04-24 16:58:31 +1000 |
| commit | 23436a9ad4c2a710c7f0d49a07a720e0153d8225 (patch) | |
| tree | 89187954aff21a3616a86b1fb7fcea50a2463be8 | |
| parent | 8dbbadcb334617ed537971dd9aead5910b715335 (diff) | |
Fix z-index not being higher for tiles being expanded/collapsed
| -rw-r--r-- | src/components/SettingsPane.vue | 2 | ||||
| -rw-r--r-- | src/components/Tile.vue | 9 |
2 files changed, 9 insertions, 2 deletions
diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue index 990d1f7..13a7f26 100644 --- a/src/components/SettingsPane.vue +++ b/src/components/SettingsPane.vue @@ -112,7 +112,7 @@ export default defineComponent({ </div> <hr class="border-stone-400"/> <div> - <label>Animation Duration <input type="range" min="0" max="1000" class="mx-2 w-[3cm]" + <label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]" v-model.number="uiOpts.tileChgDuration"/></label> </div> </div> diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 6860491..1a506d6 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -19,6 +19,7 @@ export default defineComponent({ return { highlight: false, // Used to draw a colored outline on mouse hover inTransition: false, // Used to prevent content overlap and overflow during transitions + wasClicked: false, // Used to increase z-index during transition after this tile (or a child) is clicked hasExpanded: false, // Set to true after an expansion transition ends, and false upon collapse // Used to hide overflow on tile expansion, but not hide a sepSweptArea on subsequent transitions clickHoldTimer: 0, // Used to recognise click-and-hold events @@ -72,7 +73,7 @@ export default defineComponent({ transitionDuration: this.uiOpts.tileChgDuration + 'ms', transitionProperty: 'left, top, width, height, visibility', transitionTimingFunction: 'ease-out', - zIndex: this.inTransition ? '1' : '0', + zIndex: this.inTransition && this.wasClicked ? '1' : '0', overflow: this.inTransition && !this.isLeaf && !this.hasExpanded ? 'hidden' : 'visible', // CSS variables '--nonleafBgColor': this.nonleafBgColor, @@ -239,6 +240,8 @@ export default defineComponent({ console.log('Ignored click on non-expandable node'); return; } + this.wasClicked = true; + setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration); this.$emit(this.isLeaf ? 'leaf-click' : 'nonleaf-click', this.layoutNode); }, onClickHold(){ @@ -262,9 +265,13 @@ export default defineComponent({ }, // Child event propagation onInnerLeafClick(node: LayoutNode){ + this.wasClicked = true; + setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration); this.$emit('leaf-click', node); }, onInnerNonleafClick(node: LayoutNode){ + this.wasClicked = true; + setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration); this.$emit('nonleaf-click', node); }, onInnerLeafClickHeld(node: LayoutNode){ |