Skip to content

Commit c59b3cd

Browse files
rstoenescurstoenescu
committed
feat: [request] Mini-drawer (closes quasarframework#661)
1 parent 1545f5e commit c59b3cd

File tree

4 files changed

+219
-16
lines changed

4 files changed

+219
-16
lines changed

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

Lines changed: 159 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,13 @@
4949
</q-toolbar>
5050
</q-layout-footer>
5151

52-
<q-layout-drawer v-model="left" :overlay="leftOverlay" :behavior="leftBehavior" :breakpoint="leftBreakpoint">
52+
<q-layout-drawer
53+
v-model="left"
54+
:overlay="leftOverlay"
55+
:behavior="leftBehavior"
56+
:breakpoint="leftBreakpoint"
57+
content-class="bg-grey-3"
58+
>
5359
<q-scroll-area class="fit" :thumb-style="{right: '4px', borderRadius: '2px', background: 'blue', opacity: .6, width: '4px'}">
5460
<q-btn @click="$router.push('/layout-quick/a')">Go to A</q-btn>
5561
<q-btn @click="$router.push('/layout-quick/b')">Go to B</q-btn>
@@ -64,26 +70,147 @@
6470
</q-scroll-area>
6571
</q-layout-drawer>
6672

73+
/*
74+
@mouseover="rightMini = false"
75+
@mouseout="rightMini = true"
76+
...or
77+
@click.capture="e => {
78+
if (rightMini) {
79+
rightMini = false
80+
e.preventDefault()
81+
e.stopPropagation()
82+
}
83+
}"
84+
*/
6785
<q-page-container>
6886
<q-layout-drawer
6987
side="right"
88+
:mini="rightMini"
89+
@click.capture="e => {
90+
if (rightMini) {
91+
rightMini = false
92+
e.preventDefault()
93+
e.stopPropagation()
94+
}
95+
}"
7096
v-model="right"
7197
:overlay="rightOverlay"
7298
:behavior="rightBehavior"
7399
:breakpoint="rightBreakpoint"
74-
content-class="bg-orange-3 q-pa-sm"
75100
:content-style="{'font-size': '16px'}"
76101
>
77-
<q-btn @click="$router.push('/layout-quick/a')">Go to A</q-btn>
78-
<q-btn @click="$router.push('/layout-quick/b')">Go to B</q-btn>
79-
<q-btn @click="$router.push('/layout-quick/c')">Go to C</q-btn>
80-
81-
<br><br>
102+
<!--
103+
<div slot="mini">
104+
<q-btn
105+
class="q-mini-drawer-hide"
106+
icon="keyboard_arrow_right"
107+
@click="goMini"
108+
/>
109+
<div>mini</div>
110+
</div>
111+
-->
112+
<q-btn
113+
class="q-mini-drawer-hide"
114+
icon="keyboard_arrow_right"
115+
@click="rightMini = true"
116+
/>
117+
<div class="q-mini-drawer-hide">Maxi only</div>
118+
<div class="q-mini-drawer-only">Mini only</div>
119+
<q-collapsible
120+
icon="perm_identity"
121+
label="With a model and events"
122+
>
123+
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse, fuga voluptatem! Debitis, numquam! Velit excepturi harum sint explicabo, rerum dolores illum nihil aperiam praesentium, consectetur delectus sapiente in sed provident.</div>
124+
</q-collapsible>
125+
<q-list link no-border>
126+
<q-list-header>Folders</q-list-header>
127+
<q-item>
128+
<q-item-side icon="folder" inverted color="primary" />
129+
<q-item-main>
130+
<q-item-tile label>Photos</q-item-tile>
131+
<q-item-tile sublabel>February 22, 2016</q-item-tile>
132+
</q-item-main>
133+
<q-item-side right icon="info" color="green" />
134+
</q-item>
135+
<q-item>
136+
<q-item-side icon="folder" inverted color="secondary" />
137+
<q-item-main>
138+
<q-item-tile label>Movies</q-item-tile>
139+
<q-item-tile sublabel>March 1st, 2017</q-item-tile>
140+
</q-item-main>
141+
<q-item-side right icon="info" />
142+
</q-item>
143+
<q-item>
144+
<q-item-side icon="folder" inverted color="amber" />
145+
<q-item-main>
146+
<q-item-tile label>Games</q-item-tile>
147+
<q-item-tile sublabel>Latest</q-item-tile>
148+
</q-item-main>
149+
<q-item-side right icon="info" />
150+
</q-item>
151+
<q-item-separator />
152+
<q-list-header>Files</q-list-header>
153+
<q-item>
154+
<q-item-side icon="assignment" inverted color="grey-6" />
155+
<q-item-main>
156+
<q-item-tile label>Expenses spreadsheet</q-item-tile>
157+
<q-item-tile sublabel>March 2nd, 2016</q-item-tile>
158+
</q-item-main>
159+
<q-item-side right icon="info" />
160+
</q-item>
161+
<q-item>
162+
<q-item-side icon="place" inverted color="grey-6" />
163+
<q-item-main>
164+
<q-item-tile label>Places to visit</q-item-tile>
165+
<q-item-tile sublabel>February 22, 2016</q-item-tile>
166+
</q-item-main>
167+
<q-item-side right icon="info" color="amber" />
168+
</q-item>
169+
<q-item>
170+
<q-item-side icon="library_music" inverted color="grey-6" />
171+
<q-item-main>
172+
<q-item-tile label>My favorite song</q-item-tile>
173+
<q-item-tile sublabel>Singing it all day</q-item-tile>
174+
</q-item-main>
175+
<q-item-side right icon="info" />
176+
</q-item>
177+
<q-item>
178+
<q-item-side icon="videogame_asset" inverted color="grey-6" />
179+
<q-item-main>
180+
<q-item-tile label>Quasar Game</q-item-tile>
181+
<q-item-tile sublabel>Have fun while building apps</q-item-tile>
182+
</q-item-main>
183+
<q-item-side right icon="info" />
184+
</q-item>
82185

83-
<q-btn @click="$router.replace('/layout-quick/a')">Replace Go to A</q-btn>
84-
<q-btn @click="$router.replace('/layout-quick/b')">Replace Go to B</q-btn>
85-
<q-btn @click="$router.replace('/layout-quick/c')">Replace Go to C</q-btn>
86-
<div v-for="n in 60" :key="n">{{n}} Right drawer</div>
186+
<q-item-separator />
187+
<q-list-header>People</q-list-header>
188+
<q-item>
189+
<q-item-side avatar="/statics/boy-avatar.png" />
190+
<q-item-main>
191+
<q-item-tile label>John</q-item-tile>
192+
</q-item-main>
193+
<q-item-side right>
194+
<q-item-tile icon="chat_bubble" color="green" />
195+
</q-item-side>
196+
</q-item>
197+
<q-item>
198+
<q-item-side avatar="/statics/boy-avatar.png" />
199+
<q-item-main>
200+
<q-item-tile label>Jim</q-item-tile>
201+
<q-item-tile sublabel>Javascript wiz kid</q-item-tile>
202+
</q-item-main>
203+
<q-item-side right icon="chat_bubble" />
204+
</q-item>
205+
<q-item>
206+
<q-item-side avatar="/statics/boy-avatar.png" />
207+
<q-item-main>
208+
<q-item-tile label>Jake</q-item-tile>
209+
<q-item-tile sublabel>Passionate about Quasar</q-item-tile>
210+
</q-item-main>
211+
<q-item-side right icon="chat_bubble" />
212+
</q-item>
213+
</q-list>
87214
</q-layout-drawer>
88215

89216
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
@@ -200,6 +327,8 @@
200327
<q-radio color="secondary" v-model="bottomright" val="f" label="f" />
201328
</div>
202329
</div>
330+
<q-toggle v-model="leftMini" label="Left mini drawer" />
331+
<q-toggle v-model="rightMini" label="Right mini drawer" />
203332
</div>
204333
</div>
205334
</div>
@@ -222,7 +351,7 @@ import { colors } from 'quasar'
222351
223352
export default {
224353
data () {
225-
const v = 'lHh Lpr fFf'
354+
const v = 'lHh LpR fFf'
226355
return {
227356
mainColor: '#027be3',
228357
extraRow: true,
@@ -236,11 +365,13 @@ export default {
236365
headerReveal: false,
237366
footerReveal: false,
238367
leftOverlay: false,
239-
rightOverlay: true,
368+
rightOverlay: false,
240369
leftBehavior: 'default',
241370
rightBehavior: 'default',
242371
leftBreakpoint: 992,
243372
rightBreakpoint: 992,
373+
leftMini: false,
374+
rightMini: true,
244375
245376
scrolling: true,
246377
@@ -280,6 +411,21 @@ export default {
280411
methods: {
281412
onScroll (data) {
282413
// console.log('scroll', data.position)
414+
},
415+
goMini () {
416+
console.log('goMini')
417+
this.rightMini = true
418+
},
419+
goNormal (e) {
420+
if (this.rightMini) {
421+
console.log('goNormal')
422+
this.rightMini = false
423+
e.preventDefault()
424+
e.stopPropagation()
425+
}
426+
else {
427+
console.log('goNormal abort')
428+
}
283429
}
284430
}
285431
}

‎src/components/layout/QLayoutDrawer.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ export default {
2929
default: 'left',
3030
validator: v => ['left', 'right'].includes(v)
3131
},
32+
mini: Boolean,
33+
miniWidth: {
34+
type: String,
35+
default: '60px'
36+
},
3237
breakpoint: {
3338
type: Number,
3439
default: 992
@@ -63,7 +68,6 @@ export default {
6368
),
6469
largeScreenState,
6570
mobileOpened: false,
66-
6771
size: 300
6872
}
6973
},
@@ -126,6 +130,9 @@ export default {
126130
},
127131
'$q.i18n.rtl' () {
128132
this.applyPosition()
133+
},
134+
mini () {
135+
this.layout.__animate()
129136
}
130137
},
131138
computed: {
@@ -175,12 +182,15 @@ export default {
175182
'fixed': true,
176183
'on-top': true,
177184
'q-layout-drawer-delimiter': this.fixed && this.showing,
185+
'q-layout-drawer-mobile': true,
178186
'top-padding': true
179187
}
180188
},
181189
aboveClass () {
182190
return {
183191
'fixed': this.fixed || !this.onLayout,
192+
'q-layout-drawer-mini': this.isMini,
193+
'q-layout-drawer-normal': !this.isMini,
184194
'q-layout-drawer-delimiter': this.fixed && this.showing,
185195
'top-padding': this.headerSlot
186196
}
@@ -206,6 +216,10 @@ export default {
206216
}
207217
}
208218

219+
if (this.isMini) {
220+
css.width = this.miniWidth
221+
}
222+
209223
return css
210224
},
211225
computedStyle () {
@@ -216,6 +230,9 @@ export default {
216230
},
217231
stateDirection () {
218232
return (this.$q.i18n.rtl ? -1 : 1) * (this.rightSide ? 1 : -1)
233+
},
234+
isMini () {
235+
return this.mini && !this.mobileView
219236
}
220237
},
221238
render (h) {
@@ -254,7 +271,7 @@ export default {
254271
'class': this.computedClass,
255272
style: this.computedStyle,
256273
attrs: this.$attrs,
257-
listeners: this.$listeners,
274+
on: !this.mobileView ? this.$listeners : null,
258275
directives: this.mobileView && !this.noSwipeClose ? [{
259276
name: 'touch-pan',
260277
modifiers: { horizontal: true },
@@ -265,7 +282,9 @@ export default {
265282
props: { debounce: 0 },
266283
on: { resize: this.__onResize }
267284
}),
268-
this.$slots.default
285+
this.mini && this.$slots.mini && !this.mobileView
286+
? this.$slots.mini
287+
: this.$slots.default
269288
])
270289
]))
271290
},

‎src/components/layout/layout.ios.styl‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,25 @@ $layout-transition = all .12s ease-in
4545
z-index ($z-fixed-drawer - 1) !important
4646
will-change background-color
4747

48+
49+
.q-layout-drawer-mini
50+
padding 0 !important
51+
.q-item, .q-item-side
52+
text-align center
53+
justify-content center
54+
.q-mini-drawer-hide,
55+
.q-collapsible-inner > div:last-of-type, .q-list-header, .q-item-main, .q-item-side-right
56+
display none
57+
58+
.q-layout-drawer-normal
59+
.q-mini-drawer-only
60+
display none
61+
62+
.q-layout-drawer-mobile
63+
.q-mini-drawer-only, .q-mini-drawer-hide
64+
display none
65+
66+
4867
.q-layout-drawer-opener
4968
z-index ($z-marginals + 1)
5069
height 100vh

‎src/components/layout/layout.mat.styl‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,25 @@ $layout-transition = all .12s ease-in
4343
z-index ($z-fixed-drawer - 1) !important
4444
will-change background-color
4545

46+
47+
.q-layout-drawer-mini
48+
padding 0 !important
49+
.q-item, .q-item-side
50+
text-align center
51+
justify-content center
52+
.q-mini-drawer-hide,
53+
.q-collapsible-inner > div:last-of-type, .q-list-header, .q-item-main, .q-item-side-right
54+
display none
55+
56+
.q-layout-drawer-normal
57+
.q-mini-drawer-only
58+
display none
59+
60+
.q-layout-drawer-mobile
61+
.q-mini-drawer-only, .q-mini-drawer-hide
62+
display none
63+
64+
4665
.q-layout-drawer-opener
4766
z-index ($z-marginals + 1)
4867
height 100vh

0 commit comments

Comments
 (0)