fix: Opening Model / Drawer causes layout change quasarframework#1771

Author: rstoenescu

dev/components/components/modal.vue

@@ -110,6 +110,8 @@
       <h4>Modal</h4><p>This one gets displayed from {{position}}.</p>
       <q-btn color="orange" @click="$refs.positionModal.hide()">Close Me</q-btn>
     </q-modal>
+
+    <div style="height: 800px">&nbsp;</div>
   </div>
 </template>
 

dev/components/new-layout/new-layout.vue

@@ -203,7 +203,7 @@
       </div>
     </div>
   </div>
-  <q-modal v-model="toggle" :content-css="{padding: '50px', minWidth: '50vw'}">
+  <q-modal minimized v-model="toggle" :content-css="{padding: '50px', minWidth: '50vw'}">
     <h4>Basic Modal</h4>
     <p v-for="n in 25" :key="`basic-${n}`">Scroll down to close</p>
     <q-btn color="primary" @click="toggle = false">Close</q-btn>

src/components/layout/QLayoutDrawer.js

@@ -3,10 +3,10 @@ import { css, cssTransform } from '../../utils/dom'
 import { between } from '../../utils/format'
 import { QResizeObservable } from '../observables'
 import ModelToggleMixin from '../../mixins/model-toggle'
+import { stopAndPrevent, getMouseWheelDistance, wheelEvent } from '../../utils/event'
 
 const
-  bodyClassBelow = 'with-layout-drawer-opened',
-  bodyClassAbove = 'with-layout-drawer-opened-above',
+  bodyClass = 'q-drawer-scroll',
   duration = 150
 
 export default {
@@ -216,6 +216,11 @@ export default {
     },
     stateDirection () {
       return (this.$q.i18n.rtl ? -1 : 1) * (this.rightSide ? 1 : -1)
+    },
+    containerOn () {
+      if (this.$q.platform.is.desktop) {
+        return { [wheelEvent.name]: this.__onWheel }
+      }
     }
   },
   render (h) {
@@ -245,7 +250,10 @@ export default {
       }))
     }
 
-    return h('div', { staticClass: 'q-drawer-container' }, child.concat([
+    return h('div', {
+      staticClass: 'q-drawer-container',
+      on: this.containerOn
+    }, child.concat([
       h('aside', {
         ref: 'content',
         staticClass: `q-layout-drawer q-layout-transition q-layout-drawer-${this.side} scroll`,
@@ -307,6 +315,12 @@ export default {
     applyBackdrop (x) {
       this.$refs.backdrop && css(this.$refs.backdrop, { backgroundColor: `rgba(0,0,0,${x * 0.4})` })
     },
+    __onWheel (e) {
+      if (this.fixed) {
+        stopAndPrevent(e)
+        this.$refs.content.scrollTop += getMouseWheelDistance(e).pixelY
+      }
+    },
     __openByTouch (evt) {
       if (!this.belowBreakpoint) {
         return
@@ -330,7 +344,6 @@ export default {
             this.applyBackdrop(0)
             this.applyPosition(this.stateDirection * width)
             el.classList.remove('q-layout-drawer-delimiter')
-            document.body.classList.remove(bodyClassBelow)
           }
         })
         return
@@ -347,7 +360,6 @@ export default {
 
       if (evt.isFirst) {
         const el = this.$refs.content
-        document.body.classList.add(bodyClassBelow)
         el.classList.add('no-transition')
         el.classList.add('q-layout-drawer-delimiter')
       }
@@ -389,6 +401,7 @@ export default {
     },
     __show () {
       this.layout.__animate()
+      this.applyPosition(0)
 
       if (this.belowBreakpoint) {
         const otherSide = this.layout.instances[this.rightSide ? 'left' : 'right']
@@ -398,15 +411,15 @@ export default {
         this.mobileOpened = true
         this.applyBackdrop(1)
       }
-
-      this.applyPosition(0)
-      document.body.classList.add(this.belowBreakpoint ? bodyClassBelow : bodyClassAbove)
+      else {
+        document.body.classList.add(bodyClass)
+      }
 
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
         if (this.showPromise) {
           this.showPromise.then(() => {
-            document.body.classList.remove(bodyClassAbove)
+            document.body.classList.remove(bodyClass)
           })
           this.showPromiseResolve()
         }
@@ -420,8 +433,7 @@ export default {
       this.applyPosition((this.$q.i18n.rtl ? -1 : 1) * (this.rightSide ? 1 : -1) * this.size)
       this.applyBackdrop(0)
 
-      document.body.classList.remove(bodyClassAbove)
-      document.body.classList.remove(bodyClassBelow)
+      document.body.classList.remove(bodyClass)
 
       this.timer = setTimeout(() => {
         this.hidePromise && this.hidePromiseResolve()

src/components/layout/layout.ios.styl

@@ -59,18 +59,16 @@ body
   &.q-layout-animate .q-layout-transition
     transition $layout-transition
 
-  &.with-layout-drawer-opened
-    overflow hidden
-  &.with-layout-drawer-opened-above
-    overflow-x hidden
-
   &.cordova.platform-ios
     .q-layout-header > .q-toolbar:first-child,
     .q-layout-header > .q-tabs:first-child .q-tabs-head
     .q-layout-drawer.top-padding
       padding-top $ios-statusbar-height
       min-height ($toolbar-min-height + $ios-statusbar-height)
 
+.q-drawer-scroll
+  overflow-x hidden
+
 .layout-padding
   @media (max-width $breakpoint-sm-max)
     padding 1.5rem .5rem

src/components/layout/layout.mat.styl

@@ -57,18 +57,16 @@ body
   &.q-layout-animate .q-layout-transition
     transition $layout-transition
 
-  &.with-layout-drawer-opened
-    overflow hidden
-  &.with-layout-drawer-opened-above
-    overflow-x hidden
-
   &.cordova.platform-ios
     .q-layout-header > .q-toolbar:first-child,
     .q-layout-header > .q-tabs:first-child .q-tabs-head
     .q-layout-drawer.top-padding
       padding-top $ios-statusbar-height
       min-height ($toolbar-min-height + $ios-statusbar-height)
 
+.q-drawer-scroll
+  overflow-x hidden
+
 .layout-padding
   @media (max-width $breakpoint-sm-max)
     padding 1.5rem .5rem

src/components/modal/QModal.js

@@ -1,6 +1,7 @@
 import EscapeKey from '../../utils/escape-key'
 import extend from '../../utils/extend'
 import ModelToggleMixin from '../../mixins/model-toggle'
+import { stopAndPrevent, getMouseWheelDistance, wheelEvent } from '../../utils/event'
 
 const positions = {
   top: 'items-start justify-center with-backdrop',
@@ -43,7 +44,10 @@ function additionalCSS (position) {
   return css
 }
 
-let openedModalNumber = 0
+let modals = {
+  responsive: 0,
+  maximized: 0
+}
 
 export default {
   name: 'QModal',
@@ -130,6 +134,19 @@ export default {
       }
 
       return this.contentCss
+    },
+    contentOn () {
+      const evt = {
+        click: this.__stopPropagation,
+        touchstart: this.__stopPropagation
+      }
+      if (this.$q.platform.is.desktop) {
+        evt[wheelEvent.name] = e => {
+          stopAndPrevent(e)
+          this.$refs.content.scrollTop += getMouseWheelDistance(e).pixelY
+        }
+      }
+      return evt
     }
   },
   methods: {
@@ -145,9 +162,7 @@ export default {
       const body = document.body
 
       body.appendChild(this.$el)
-      if (openedModalNumber === 0) {
-        body.classList.add('with-modal')
-      }
+      this.__register(true)
 
       EscapeKey.register(() => {
         if (!this.noEscDismiss) {
@@ -157,8 +172,6 @@ export default {
         }
       })
 
-      openedModalNumber++
-
       let content = this.$refs.content
       if (this.$q.platform.is.ios) {
         // workaround the iOS hover/touch issue
@@ -173,10 +186,29 @@ export default {
     },
     __hide () {
       EscapeKey.pop()
-      openedModalNumber--
+      this.__register(false)
+    },
+    __stopPropagation (e) {
+      e.stopPropagation()
+    },
+    __register (opening) {
+      let state = opening
+        ? { action: 'add', step: 1 }
+        : { action: 'remove', step: -1 }
 
-      if (openedModalNumber === 0) {
-        document.body.classList.remove('with-modal')
+      if (this.maximized) {
+        modals.maximized += state.step
+        if (!opening && modals.maximized > 0) {
+          return
+        }
+        document.body.classList[state.action]('q-maximized-modal')
+      }
+      else if (!this.minimized) {
+        modals.responsive += state.step
+        if (!opening && modals.responsive > 0) {
+          return
+        }
+        document.body.classList[state.action]('q-responsive-modal')
       }
     }
   },
@@ -212,7 +244,8 @@ export default {
         staticClass: 'modal fullscreen row',
         'class': this.modalClasses,
         on: {
-          click: this.__dismiss
+          click: this.__dismiss,
+          [wheelEvent.name]: stopAndPrevent
         },
         directives: [{
           name: 'show',
@@ -224,14 +257,7 @@ export default {
           staticClass: 'modal-content scroll',
           style: this.modalCss,
           'class': this.contentClasses,
-          on: {
-            click (e) {
-              e.stopPropagation()
-            },
-            touchstart (e) {
-              e.stopPropagation()
-            }
-          }
+          on: this.contentOn
         }, [ this.$slots.default ])
       ])
     ])

src/components/modal/modal.ios.styl

@@ -1,6 +1,3 @@
-body.with-modal
-  overflow hidden !important
-
 minimized-modal()
   max-width 80vw
   max-height 80vh
@@ -47,6 +44,8 @@ maximized-modal()
         transform translateX(30%)
 
 @media (max-width $breakpoint-sm-max)
+  .q-responsive-modal
+    overflow hidden
   .modal:not(.minimized)
     .modal-content
       maximized-modal()
@@ -59,6 +58,9 @@ maximized-modal()
     &.q-modal-leave-active .modal-content
       transform scale(.8)
 
+.q-maximized-modal
+  overflow hidden
+
 .modal, .modal-content
   transition all .2s ease-in-out
 

src/components/modal/modal.mat.styl

@@ -1,6 +1,3 @@
-body.with-modal
-  overflow hidden !important
-
 minimized-modal()
   max-width 80vw
   max-height 80vh
@@ -45,6 +42,8 @@ maximized-modal()
         transform translateY(30%)
 
 @media (max-width $breakpoint-sm-max)
+  .q-responsive-modal
+    overflow hidden
   .modal:not(.minimized)
     .modal-content
       maximized-modal()
@@ -57,6 +56,9 @@ maximized-modal()
     &.q-modal-leave-active .modal-content
       transform scale(.8)
 
+.q-maximized-modal
+  overflow hidden
+
 .modal, .modal-content
   transition all .2s ease-in-out
 

src/components/scroll-area/QScrollArea.js

@@ -1,6 +1,6 @@
 import extend from '../../utils/extend'
 import { between } from '../../utils/format'
-import { getMouseWheelDistance } from '../../utils/event'
+import { stopAndPrevent, getMouseWheelDistance, wheelEvent } from '../../utils/event'
 import { setScrollPosition } from '../../utils/scroll'
 import { QResizeObservable, QScrollObservable } from '../observables'
 import TouchPan from '../../directives/touch-pan'
@@ -122,7 +122,7 @@ export default {
       const el = this.$refs.target
       el.scrollTop += getMouseWheelDistance(e).pixelY
       if (el.scrollTop > 0 && el.scrollTop + this.containerHeight < this.scrollHeight) {
-        e.preventDefault()
+        stopAndPrevent(e)
       }
     },
     __setActive (active, timer) {
@@ -173,9 +173,7 @@ export default {
         ref: 'target',
         staticClass: 'scroll relative-position overflow-hidden fit',
         on: {
-          wheel: this.__mouseWheel,
-          mousewheel: this.__mouseWheel,
-          DOMMouseScroll: this.__mouseWheel
+          [wheelEvent.name]: this.__mouseWheel
         },
         directives: [{
           name: 'touch-pan',