Skip to content
Permalink
Browse files

feat(QDrawer): Bring back show-if-above and fix various QDrawer bugs

  • Loading branch information...
rstoenescu committed Aug 14, 2019
1 parent 7747e89 commit f8df553fe3414e164b877abfc9a83956668eadd8
@@ -19,6 +19,7 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")

q-drawer(
v-model="leftDrawerState"
show-if-above
bordered
content-class="doc-left-drawer"
)
@@ -59,8 +60,9 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
)

q-drawer(
v-model="rightDrawerState"
v-if="hasRightDrawer"
v-model="rightDrawerState"
show-if-above
side="right"
content-class="bg-grey-1"
:width="180"
@@ -6,6 +6,7 @@
:reveal="cfg.headerReveal"
:elevated="cfg.headerSep === 'elevated'"
:bordered="cfg.headerSep === 'bordered'"
height-hint="98"
>
<q-toolbar>
<q-btn v-if="pick.left" dense flat round icon="menu" @click="play.left = !play.left" />
@@ -341,6 +342,7 @@
<q-drawer
v-if="pick.left"
v-model="play.left"
show-if-above
:behavior="cfg.leftBehavior"
:overlay="cfg.leftOverlay"
:elevated="cfg.leftSep === 'elevated'"
@@ -360,6 +362,7 @@
<q-drawer
v-if="pick.right"
v-model="play.right"
show-if-above
side="right"
:behavior="cfg.rightBehavior"
:overlay="cfg.rightOverlay"
@@ -475,8 +478,8 @@ export default {
play: {
header: true,
footer: true,
left: true,
right: true,
left: false,
right: false,
scroll: true
}
@@ -526,7 +529,7 @@ export default {
if (this.pick.header) {
code += `
<q-header ${this.cfg.headerReveal ? 'reveal ' : ''}${this.cfg.headerSep !== 'none' ? this.cfg.headerSep + ' ' : ''}class="bg-primary text-white">
<q-header ${this.cfg.headerReveal ? 'reveal ' : ''}${this.cfg.headerSep !== 'none' ? this.cfg.headerSep + ' ' : ''}class="bg-primary text-white"${this.pick.navtabs ? ' height-hint="98"' : ''}>
<q-toolbar>${this.pick.left ? `
<q-btn dense flat round icon="menu" @click="left = !left" />
` : ''}
@@ -551,15 +554,15 @@ export default {
if (this.pick.left) {
code += `
<q-drawer v-model="left" side="left"${this.cfg.leftOverlay ? ' overlay' : ''}${this.cfg.leftBehavior !== 'default' ? ` behavior="${this.cfg.leftBehavior}"` : ''}${this.cfg.leftSep !== 'none' ? ' ' + this.cfg.leftSep : ''}>
<q-drawer ${this.cfg.leftBehavior !== 'mobile' && !this.cfg.leftOverlay ? 'show-if-above ' : ''}v-model="left" side="left"${this.cfg.leftOverlay ? ' overlay' : ''}${this.cfg.leftBehavior !== 'default' ? ` behavior="${this.cfg.leftBehavior}"` : ''}${this.cfg.leftSep !== 'none' ? ' ' + this.cfg.leftSep : ''}>
<!-- drawer content -->
</q-drawer>
`
}
if (this.pick.right) {
code += `
<q-drawer v-model="right" side="right"${this.cfg.rightOverlay ? ' overlay' : ''}${this.cfg.rightBehavior !== 'default' ? ` behavior="${this.cfg.rightBehavior}"` : ''}${this.cfg.rightSep !== 'none' ? ' ' + this.cfg.rightSep : ''}>
<q-drawer ${this.cfg.rightBehavior !== 'mobile' && !this.cfg.rightOverlay ? 'show-if-above ' : ''}v-model="right" side="right"${this.cfg.rightOverlay ? ' overlay' : ''}${this.cfg.rightBehavior !== 'default' ? ` behavior="${this.cfg.rightBehavior}"` : ''}${this.cfg.rightSep !== 'none' ? ' ' + this.cfg.rightSep : ''}>
<!-- drawer content -->
</q-drawer>
`
@@ -594,8 +597,8 @@ export default {
export default {
data () {
return {${this.pick.left ? `
left: true${this.pick.right ? ',' : ''}` : ''}${this.pick.right ? `
right: true` : ''}
left: false${this.pick.right ? ',' : ''}` : ''}${this.pick.right ? `
right: false` : ''}
}
}
}
@@ -1,6 +1,6 @@
<template>
<q-layout>
<q-header elevated class="text-white" style="background: #24292e">
<q-header elevated class="text-white" style="background: #24292e" height-hint="61.59">
<q-toolbar class="q-py-sm q-px-md">
<q-btn round dense flat :ripple="false" icon="fab fa-github" size="19px" color="white" class="q-mr-sm" no-caps />

@@ -1,6 +1,6 @@
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-white text-grey-8">
<q-header elevated class="bg-white text-grey-8" height-hint="64">
<q-toolbar class="GNL__toolbar">
<q-btn
flat
@@ -102,6 +102,7 @@

<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-white"
:width="280"
@@ -161,7 +162,7 @@ export default {
data () {
return {
leftDrawerOpen: this.$q.screen.width > 1023,
leftDrawerOpen: false,
search: '',
showAdvanced: false,
showDateOptions: false,
@@ -1,6 +1,6 @@
<template>
<q-layout view="lHh Lpr fff">
<q-header elevated class="bg-white text-grey-8">
<q-header elevated class="bg-white text-grey-8" height-hint="64">
<q-toolbar class="GPL__toolbar" style="height: 64px">
<q-btn
flat
@@ -1,6 +1,6 @@
<template>
<q-layout view="hHh LpR fFf" class="bg-grey-3">
<q-header class="bg-grey-3 text-grey-9" reveal>
<q-header class="bg-grey-3 text-grey-9" reveal height-hint="60">
<q-toolbar class="GPLAY__toolbar text-grey-6">
<q-btn
v-if="this.$q.platform.is.mobile || !leftDrawerOpen"
@@ -50,6 +50,7 @@

<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-3 text-grey-7"
:width="200"
@@ -140,7 +141,7 @@ export default {
data () {
return {
leftDrawerOpen: this.$q.screen.width > 1023,
leftDrawerOpen: false,
search: '',
storage: 0.26,
links1: [
@@ -19,6 +19,7 @@

<q-drawer
v-model="leftDrawerOpen"
show-if-above
content-class="bg-grey-8"
>
<q-list dark>
@@ -92,7 +93,7 @@ export default {
data () {
return {
leftDrawerOpen: this.$q.screen.width > 1023
leftDrawerOpen: false
}
}
}
@@ -19,6 +19,7 @@

<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-2"
>
@@ -93,7 +94,7 @@ export default {
data () {
return {
leftDrawerOpen: this.$q.screen.width > 1023
leftDrawerOpen: false
}
}
}
@@ -1,6 +1,6 @@
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-white text-grey-8 q-py-xs">
<q-header elevated class="bg-white text-grey-8 q-py-xs" height-hint="58">
<q-toolbar>
<q-btn
flat
@@ -1,8 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'

import { Screen } from 'quasar'

Vue.use(Vuex)

/*
@@ -13,8 +11,8 @@ Vue.use(Vuex)
export default function (/* { ssrContext } */) {
const Store = new Vuex.Store({
state: {
leftDrawerState: Screen.width > 1023,
rightDrawerState: Screen.width > 1023,
leftDrawerState: false,
rightDrawerState: false,
toc: []
},

0 comments on commit f8df553

Please sign in to comment.
You can’t perform that action at this time.