Skip to content

Commit b0c782a

Browse files
rstoenescurstoenescu
committed
feat: [WIP] New QLayout -- many many new features
1 parent 9d86919 commit b0c782a

File tree

13 files changed

+1150
-4
lines changed

13 files changed

+1150
-4
lines changed

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<template>
2+
<q-new-layout :view="view">
3+
<q-layout-header v-model="header" :reveal="headerReveal">
4+
<q-toolbar>
5+
<q-btn flat icon="menu" />
6+
<q-toolbar-title>
7+
Header
8+
<span slot="subtitle">The Subtiiiitleeee</span>
9+
</q-toolbar-title>
10+
<q-btn flat icon="menu" />
11+
</q-toolbar>
12+
<q-toolbar>
13+
<q-btn flat icon="menu" />
14+
<q-toolbar-title>
15+
Header
16+
<span slot="subtitle">The Subtiiiitleeee</span>
17+
</q-toolbar-title>
18+
<q-btn flat icon="menu" />
19+
</q-toolbar>
20+
<q-toolbar>
21+
<q-btn flat icon="menu" />
22+
<q-toolbar-title>
23+
Header
24+
<span slot="subtitle">The Subtiiiitleeee</span>
25+
</q-toolbar-title>
26+
<q-btn flat icon="menu" />
27+
</q-toolbar>
28+
</q-layout-header>
29+
30+
<q-layout-footer v-model="footer" :reveal="footerReveal">
31+
<q-toolbar>
32+
<q-btn flat icon="menu" />
33+
<q-toolbar-title>
34+
Footer
35+
</q-toolbar-title>
36+
<q-btn flat icon="menu" />
37+
</q-toolbar>
38+
<q-toolbar>
39+
<q-btn flat icon="menu" />
40+
<q-toolbar-title>
41+
Footer
42+
</q-toolbar-title>
43+
<q-btn flat icon="menu" />
44+
</q-toolbar>
45+
<q-toolbar>
46+
<q-btn flat icon="menu" />
47+
<q-toolbar-title>
48+
Footer
49+
</q-toolbar-title>
50+
<q-btn flat icon="menu" />
51+
</q-toolbar>
52+
</q-layout-footer>
53+
54+
<q-layout-drawer v-model="left">
55+
<div v-for="n in 10">{{n}} Left drawer</div>
56+
</q-layout-drawer>
57+
58+
59+
<q-page-container>
60+
<q-layout-drawer right-side v-model="right" class="bg-teal">
61+
sdsfs
62+
<div v-for="n in 60">{{n}} Right drawer</div>
63+
</q-layout-drawer>
64+
<q-page padding class="bg-yellow text-right">
65+
<q-toggle v-model="header" label="Header" /><br>
66+
<q-toggle v-model="footer" label="Footer" /><br>
67+
<q-toggle v-model="left" label="Left Drawer" /><br>
68+
<q-toggle v-model="right" label="Right Drawer" /><br>
69+
<q-toggle v-model="headerReveal" label="Header Reveal" /><br>
70+
<q-toggle v-model="footerReveal" label="Footer Reveal" /><br>
71+
<q-toggle v-model="scrolling" label="Scrolling Page" /><br>
72+
73+
<div class="flex justify-center">
74+
<div style="width: 400px; max-width: 90vw">
75+
<q-card>
76+
<q-card-title class="text-center">
77+
Layout View
78+
<q-chip slot="subtitle" tag color="primary" style="margin-top: 15px">
79+
view: {{ view }}
80+
</q-chip>
81+
</q-card-title>
82+
<q-card-separator />
83+
<q-card-main>
84+
<div class="doc-layout-grid row justify-center">
85+
<div class="doc-row-definition row flex-center no-border">
86+
Header
87+
</div>
88+
<div class="col column group flex-center">
89+
<q-radio color="orange" v-model="topleft" val="l" label="l" />
90+
<q-radio color="orange" v-model="topleft" val="h" label="h" />
91+
</div>
92+
<div class="col column group flex-center">
93+
<q-radio v-model="topcenter" val="h" label="h" />
94+
<q-radio v-model="topcenter" val="H" label="H" />
95+
</div>
96+
<div class="col column group flex-center">
97+
<q-radio color="secondary" v-model="topright" val="r" label="r" />
98+
<q-radio color="secondary" v-model="topright" val="h" label="h" />
99+
</div>
100+
</div>
101+
102+
<div class="doc-layout-grid row justify-center">
103+
<div class="doc-row-definition row flex-center no-border">
104+
Middle
105+
</div>
106+
<div class="col column group flex-center">
107+
<q-radio color="orange" v-model="middleleft" val="l" label="l" />
108+
<q-radio color="orange" v-model="middleleft" val="L" label="L" />
109+
</div>
110+
<div class="col column group flex-center">
111+
<q-radio v-model="middlecenter" val="p" label="p" />
112+
</div>
113+
<div class="col column group flex-center">
114+
<q-radio color="secondary" v-model="middleright" val="r" label="r" />
115+
<q-radio color="secondary" v-model="middleright" val="R" label="R" />
116+
</div>
117+
</div>
118+
119+
<div class="doc-layout-grid row justify-center">
120+
<div class="doc-row-definition row flex-center no-border">
121+
Footer
122+
</div>
123+
<div class="col column group flex-center">
124+
<q-radio color="orange" v-model="bottomleft" val="l" label="l" />
125+
<q-radio color="orange" v-model="bottomleft" val="f" label="f" />
126+
</div>
127+
<div class="col column group flex-center">
128+
<q-radio v-model="bottomcenter" val="f" label="f" />
129+
<q-radio v-model="bottomcenter" val="F" label="F" />
130+
</div>
131+
<div class="col column group flex-center">
132+
<q-radio color="secondary" v-model="bottomright" val="r" label="r" />
133+
<q-radio color="secondary" v-model="bottomright" val="f" label="f" />
134+
</div>
135+
</div>
136+
137+
<div class="doc-layout-grid row justify-center">
138+
<div class="doc-row-definition no-border">&nbsp;</div>
139+
<div class="col no-border row justify-center">
140+
Left
141+
</div>
142+
<div class="col no-border row justify-center">
143+
Center
144+
</div>
145+
<div class="col no-border row justify-center">
146+
Right
147+
</div>
148+
</div>
149+
</q-card-main>
150+
</q-card>
151+
</div>
152+
</div>
153+
<template v-if="scrolling">
154+
<div v-for="n in 50">
155+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
156+
</div>
157+
</template>
158+
159+
<q-page-sticky position="bottom-right" :offset="[18, 18]" class="bg-black">
160+
<q-btn round color="primary" icon="map" />
161+
</q-page-sticky>
162+
</q-page>
163+
</q-page-container>
164+
165+
<!--
166+
<q-layout-footer v-model="footer" :reveal="footerReveal">
167+
<q-toolbar>
168+
<q-btn flat icon="menu" />
169+
<q-toolbar-title>
170+
Footer
171+
<span slot="subtitle">The Subtiiiitleeee</span>
172+
</q-toolbar-title>
173+
<q-btn flat icon="menu" />
174+
</q-toolbar>
175+
</q-layout-footer>
176+
-->
177+
</q-new-layout>
178+
</template>
179+
180+
<script>
181+
export default {
182+
data () {
183+
const v = 'hHh lpr fFf'
184+
return {
185+
header: true,
186+
footer: true,
187+
left: true,
188+
right: true,
189+
190+
headerReveal: false,
191+
footerReveal: false,
192+
193+
scrolling: true,
194+
195+
topleft: v[0],
196+
topcenter: v[1],
197+
topright: v[2],
198+
middleleft: v[4],
199+
middlecenter: v[5],
200+
middleright: v[6],
201+
bottomleft: v[8],
202+
bottomcenter: v[9],
203+
bottomright: v[10]
204+
}
205+
},
206+
computed: {
207+
view () {
208+
const
209+
top = `${this.topleft}${this.topcenter}${this.topright}`,
210+
middle = `${this.middleleft}${this.middlecenter}${this.middleright}`,
211+
bottom = `${this.bottomleft}${this.bottomcenter}${this.bottomright}`
212+
213+
return `${top} ${middle} ${bottom}`
214+
}
215+
}
216+
}
217+
</script>

‎src/components.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
export * from './components/new-layout'
2+
13
export * from './components/ajax-bar'
24
export * from './components/alert'
35
export * from './components/autocomplete'

0 commit comments

Comments
 (0)