feat(panels): hide overflow on components that leave the transition

pdanpdan · Jan 15, 2023 · cbab440 · cbab440
1 parent ac9b90d
commit cbab440
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 3 deletions.
diff --git a/ui/dev/src/pages/components/tabs-in-tabs.vue b/ui/dev/src/pages/components/tabs-in-tabs.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="q-pa-md" style="max-width: 600px">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+      >
+        <q-tab name="mails" label="Mails" />
+        <q-tab name="alarms" label="Alarms" />
+        <q-tab name="movies" label="Movies" />
+      </q-tabs>
+
+      <q-separator />
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="mails" class="q-pa-none">
+
+          <q-splitter
+            v-model="splitterModel"
+            style="height: 250px"
+          >
+
+            <template v-slot:before>
+              <q-tabs
+                v-model="innerTab"
+                vertical
+                class="text-teal"
+              >
+                <q-tab name="innerMails" icon="mail" label="Mails" />
+                <q-tab name="innerAlarms" icon="alarm" label="Alarms" />
+                <q-tab name="innerMovies" icon="movie" label="Movies" />
+              </q-tabs>
+            </template>
+
+            <template v-slot:after>
+              <q-tab-panels
+                v-model="innerTab"
+                animated
+                transition-prev="slide-down"
+                transition-next="slide-up"
+              >
+                <q-tab-panel name="innerMails">
+                  <div class="text-h4 q-mb-md">Mails</div>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                </q-tab-panel>
+
+                <q-tab-panel name="innerAlarms">
+                  <div class="text-h4 q-mb-md">Alarms</div>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                </q-tab-panel>
+
+                <q-tab-panel name="innerMovies">
+                  <div class="text-h4 q-mb-md">Movies</div>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+                </q-tab-panel>
+              </q-tab-panels>
+            </template>
+
+          </q-splitter>
+        </q-tab-panel>
+
+        <q-tab-panel name="alarms">
+          <div class="text-h6">Alarms</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+
+        <q-tab-panel name="movies">
+          <div class="text-h6">Movies</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tab: 'mails',
+      innerTab: 'innerMails',
+      splitterModel: 20
+    }
+  }
+}
+</script>
diff --git a/ui/src/css/core/transitions.sass b/ui/src/css/core/transitions.sass
@@ -151,3 +151,7 @@ $transition-easing: cubic-bezier(0.215, 0.61, 0.355, 1) // easeOutCubic
       transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
     &-leave-to
       transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
+
+  &--hide-scroll,
+  &--hide-scroll > .q-panel:first-child
+    overflow: hidden !important
diff --git a/ui/src/css/core/transitions.styl b/ui/src/css/core/transitions.styl
@@ -151,3 +151,7 @@ $transition-easing = cubic-bezier(0.215, 0.61, 0.355, 1) // easeOutCubic
       transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
     &-leave-to
       transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
+
+  &--hide-scroll,
+  &--hide-scroll > .q-panel:first-child
+    overflow: hidden !important
diff --git a/ui/src/mixins/panel.js b/ui/src/mixins/panel.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
+import { onTransitionHideScroll } from '../mixins/transition'
+
 import TouchSwipe from '../directives/TouchSwipe.js'
 
 import ListenersMixin from './listeners.js'
@@ -245,9 +247,8 @@ export const PanelParentMixin = {
       return this.animated === true
         ? [
           h('transition', {
-            props: {
-              name: this.panelTransition
-            }
+            props: { name: this.panelTransition },
+            on: onTransitionHideScroll
           }, content)
         ]
         : content

diff --git a/ui/src/mixins/transition.js b/ui/src/mixins/transition.js
@@ -1,3 +1,26 @@
+const panelParents = new WeakMap()
+
+function hideScroll (el) {
+  if (el !== null && el !== void 0) {
+    const parent = el.closest('.q-panel-parent')
+    panelParents.set(el, parent)
+    parent !== null && parent.classList.add('q-transition--hide-scroll')
+  }
+}
+
+function restoreScroll (el) {
+  if (el !== null && el !== void 0) {
+    const parent = panelParents.get(el) || el.closest('.q-panel-parent')
+    parent !== null && parent.classList.remove('q-transition--hide-scroll')
+  }
+}
+
+export const onTransitionHideScroll = {
+  'before-leave': hideScroll,
+  'after-leave': restoreScroll,
+  'leave-cancelled': restoreScroll
+}
+
 export default {
   props: {
     transitionShow: {