QLayout: fixes for container (quasarframework#2452)

* QLayout: fixes for container

* Update QLayoutDrawer.js

Author: pdanpdan

dev/components/components/layout-container.vue

@@ -53,6 +53,57 @@
       </q-page-container>
     </q-layout>
 
+    <q-layout view="Lhh lpR fff" container style="height: 500px; width: 900px" class="q-mt-xl shadow-2">
+      <q-layout-header reveal>
+        <q-toolbar>
+          <q-btn flat @click="drawer3 = !drawer3" round dense icon="menu" />
+          <q-toolbar-title>Header</q-toolbar-title>
+          <q-btn flat @click="drawer3R = !drawer3R" round dense icon="menu" />
+        </q-toolbar>
+      </q-layout-header>
+
+      <q-layout-footer reveal>
+        <q-toolbar>
+          <q-btn flat @click="drawer3 = !drawer3" round dense icon="menu" />
+          <q-toolbar-title>Footer</q-toolbar-title>
+          <q-btn flat @click="drawer3R = !drawer3R" round dense icon="menu" />
+        </q-toolbar>
+      </q-layout-footer>
+
+      <q-layout-drawer v-model="drawer3" :width="200" :breakpoint="300">
+        <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
+      </q-layout-drawer>
+      <q-layout-drawer side="right" v-model="drawer3R" :width="200" :breakpoint="300">
+        <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
+      </q-layout-drawer>
+      <q-page-container>
+        <q-page style="padding-top: 50px" class="bg-yellow">
+          <div v-for="n in contentSize" :key="n">My page My page My page My page My page My page My page My page My page {{ n }} / {{ contentSize }}</div>
+
+          <q-page-sticky position="top-left" :offset="[18, 58]">
+            <q-btn round color="primary" icon="arrow_back" class="rotate-45" />
+          </q-page-sticky>
+          <q-page-sticky position="top-right" :offset="[18, 58]">
+            <q-btn round color="primary" icon="arrow_upward" class="rotate-45" />
+          </q-page-sticky>
+          <q-page-sticky position="bottom-left" :offset="[18, 18]">
+            <q-btn round color="primary" icon="arrow_forward" class="rotate-135" />
+          </q-page-sticky>
+          <q-page-sticky position="bottom-right" :offset="[18, 18]">
+            <q-btn round color="primary" icon="arrow_forward" class="rotate-45" />
+          </q-page-sticky>
+
+          <q-page-sticky position="top" expand>
+            <q-toolbar>
+              <q-btn flat round dense icon="map" />
+              <q-toolbar-title>Title</q-toolbar-title>
+              <q-checkbox color="white" v-model="moreContent" label="Scroll" />
+            </q-toolbar>
+          </q-page-sticky>
+        </q-page>
+      </q-page-container>
+    </q-layout>
+
     <q-modal v-model="modal" no-backdrop-dismiss>
       <q-layout view="LHh lpR fff" container style="min-height: 60vh; min-width: 60vw;">
         <q-layout-header reveal>
@@ -119,9 +170,11 @@ export default {
     return {
       modal: false,
       drawer: false,
-      drawerR: false,
+      drawerR: true,
       drawer2: false,
-      drawer2R: false,
+      drawer2R: true,
+      drawer3: false,
+      drawer3R: true,
       moreContent: true
     }
   },

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

@@ -220,7 +220,7 @@
         <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
           <router-view />
         </transition>
-        <div class="fixed-bottom-right bg-grey-5 q-pa-sm z-max" style="bottom: 8px; right: 8px;">
+        <div class="fixed-bottom-right bg-grey-5 q-pa-sm z-max" style="bottom: 8px; right: 8px; left: auto;">
           <q-toggle v-model="showConfig" label="Config" />
         </div>
       </q-page-container>

src/components/layout/QLayoutDrawer.js

@@ -72,7 +72,7 @@ export default {
     }
   },
   watch: {
-    belowBreakpoint (val, old) {
+    belowBreakpoint (val) {
       if (this.mobileOpened) {
         return
       }
@@ -240,8 +240,7 @@ export default {
         `q-layout-drawer-${this.side}`,
         this.layout.container ? 'overflow-auto' : 'scroll',
         this.contentClass,
-        this.mobileView ? this.belowClass : this.aboveClass,
-        this.layout.container && !this.showing ? 'q-layout-drawer-invisible' : ''
+        this.mobileView ? this.belowClass : this.aboveClass
       ]
     },
     stateDirection () {
@@ -264,16 +263,14 @@ export default {
     applyPosition (position) {
       if (position === void 0) {
         this.$nextTick(() => {
-          position = this.showing
-            ? (this.layout.container ? this.layout.scrollbarWidth : 0)
-            : this.size
+          position = this.showing ? 0 : this.size
 
           this.applyPosition(this.stateDirection * position)
         })
       }
       else if (this.$refs.content) {
-        if (this.layout.container && this.mobileView && this.rightSide && position === 0) {
-          position = this.stateDirection * this.layout.scrollbarWidth
+        if (this.layout.container && this.rightSide && (this.mobileView || Math.abs(position) === this.size)) {
+          position += this.stateDirection * this.layout.scrollbarWidth
         }
         css(this.$refs.content, cssTransform(`translateX(${position}px)`))
       }
@@ -430,9 +427,7 @@ export default {
     this.__update('offset', this.offset)
   },
   mounted () {
-    if (this.showing) {
-      this.applyPosition(0)
-    }
+    this.applyPosition(this.showing ? 0 : void 0)
   },
   beforeDestroy () {
     clearTimeout(this.timer)

src/components/layout/layout.ios.styl

@@ -31,9 +31,6 @@ $layout-transition = all .12s ease-in
   z-index $z-side
   &.on-top
     z-index $z-fixed-drawer
-.q-layout-drawer-invisible:not(.no-transition)
-  pointer-events none
-  visibility hidden
 .q-layout-drawer-left
   left 0
   transform translateX(-100%)

src/components/layout/layout.mat.styl

@@ -33,9 +33,6 @@ $layout-transition = all .12s ease-in
     z-index $z-fixed-drawer
 .q-layout-drawer-delimiter
   box-shadow $layout-aside-shadow
-.q-layout-drawer-invisible:not(.no-transition)
-  pointer-events none
-  visibility hidden
 .q-layout-drawer-left
   left 0
   transform translateX(-100%)