Skip to content

Commit e6e27f4

Browse files
rstoenescurstoenescu
committed
refactor: QTabs; new QToolbar component
1 parent b9b848c commit e6e27f4

File tree

20 files changed

+502
-365
lines changed

20 files changed

+502
-365
lines changed

‎dev/components/components/tabs-playground.vue‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,39 @@
2424
</div>
2525

2626
<q-tabs>
27-
<q-tab alert slot="title" v-if="third"label="Oaua" />
27+
<q-tab alert slot="title" v-if="third" label="Oaua" />
2828
<q-tab count="5" slot="title" label="Gogu" />
2929
<q-tab slot="title" label="Some Tab" />
3030
<q-tab slot="title" label="Other Tab" />
3131
<q-tab selected slot="title" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
3232
</q-tabs>
3333

34-
<q-tabs align="center" class="two-lines">
35-
<q-tab alert slot="title" v-if="third"label="Oaua" />
34+
<q-tabs inverted>
35+
<q-tab alert slot="title" v-if="third" label="Oaua" />
36+
<q-tab count="5" slot="title" label="Gogu" />
37+
<q-tab slot="title" label="Some Tab" />
38+
<q-tab slot="title" label="Other Tab" />
39+
<q-tab selected slot="title" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
40+
</q-tabs>
41+
42+
<p>Two lines</p>
43+
<q-tabs align="center" two-lines>
44+
<q-tab alert slot="title" v-if="third" label="Oaua" />
3645
<q-tab count="5" slot="title" label="Gogu" />
3746
<q-tab slot="title" label="Some Tab" />
3847
<q-tab slot="title" label="Other Tab" />
3948
<q-tab selected slot="title" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
4049
</q-tabs>
4150

4251
<q-tabs align="right">
43-
<q-tab alert slot="title" v-if="third"label="Oaua" />
52+
<q-tab alert slot="title" v-if="third" label="Oaua" />
4453
<q-tab count="5" slot="title" label="Gogu" />
4554
<q-tab slot="title" label="Some Tab" />
4655
<q-tab slot="title" label="Other Tab" />
4756
<q-tab selected slot="title" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
4857
</q-tabs>
4958

50-
<q-tabs class="brown" position="bottom">
59+
<q-tabs color="brown" position="bottom">
5160
<q-tab selected slot="title" v-if="third" name="three" label="Oaua" />
5261
<q-tab slot="title" name="one" label="Gogu" />
5362
<q-tab slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
@@ -72,7 +81,7 @@
7281
:key="align"
7382
v-model="tab"
7483
:align="align"
75-
class="purple"
84+
color="purple"
7685
>
7786
<q-tab slot="title" v-if="third" name="three" label="Oaua" />
7887
<q-tab slot="title" name="one" label="Gogu" />
@@ -87,7 +96,7 @@
8796
v-for="align in ['left', 'center', 'right', 'justify']"
8897
:key="align"
8998
:align="align"
90-
class="secondary"
99+
color="secondary"
91100
>
92101
<q-tab :alert="alert" selected slot="title" v-if="third" name="three" icon="bluetooth" />
93102
<q-tab count="22" alert slot="title" name="one" icon="wifi" />
@@ -102,28 +111,28 @@
102111
v-for="align in ['left', 'center', 'right', 'justify']"
103112
:key="align"
104113
:align="align"
105-
class="amber"
114+
color="amber"
106115
>
107116
<q-tab :alert="alert" selected slot="title" v-if="third" name="three" label="Oaua" icon="bluetooth" />
108-
<q-tab alert slot="title" name="one" label="Gogu" icon="wifi" />
109-
<q-tab alert slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" icon="important_devices" />
117+
<q-tab color="red" alert slot="title" name="one" label="Gogu" icon="wifi" />
118+
<q-tab color="black" alert slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" icon="important_devices" />
110119

111120
<q-tab-pane name="one">Tab One</q-tab-pane>
112121
<q-tab-pane name="two">Tab Two</q-tab-pane>
113122
<q-tab-pane name="three">Tab Three</q-tab-pane>
114123
</q-tabs>
115124

116-
<q-tabs v-model="tab" class="inverted">
125+
<q-tabs v-model="tab" inverted>
117126
<q-tab alert slot="title" v-if="third" name="three" label="Oaua" />
118127
<q-tab count="5" slot="title" name="one" label="Gogu" />
119-
<q-tab selected slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
128+
<q-tab color="red" selected slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
120129

121130
<q-tab-pane name="one">Tab One</q-tab-pane>
122131
<q-tab-pane name="two">Tab Two</q-tab-pane>
123132
<q-tab-pane name="three">Tab Three</q-tab-pane>
124133
</q-tabs>
125134

126-
<q-tabs class="inverted" position="bottom">
135+
<q-tabs inverted position="bottom">
127136
<q-tab alert slot="title" v-if="third" name="three" label="Oaua" />
128137
<q-tab count="5" slot="title" name="one" label="Gogu" />
129138
<q-tab selected slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
@@ -138,11 +147,12 @@
138147
:key="align"
139148
v-model="tab"
140149
:align="align"
141-
class="purple inverted"
150+
color="purple"
151+
inverted
142152
>
143153
<q-tab slot="title" v-if="third" name="three" label="Oaua" />
144154
<q-tab slot="title" name="one" label="Gogu" />
145-
<q-tab slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
155+
<q-tab color="red" slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" />
146156

147157
<q-tab-pane name="one">Tab One</q-tab-pane>
148158
<q-tab-pane name="two">Tab Two</q-tab-pane>
@@ -153,11 +163,12 @@
153163
v-for="align in ['left', 'center', 'right', 'justify']"
154164
:key="align"
155165
:align="align"
156-
class="secondary inverted"
166+
color="secondary"
167+
inverted
157168
>
158169
<q-tab :alert="alert" selected slot="title" v-if="third" name="three" icon="bluetooth" />
159170
<q-tab count="22" alert slot="title" name="one" icon="wifi" />
160-
<q-tab alert slot="title" name="two" icon="important_devices" />
171+
<q-tab color="red" alert slot="title" name="two" icon="important_devices" />
161172

162173
<q-tab-pane name="one">Tab One</q-tab-pane>
163174
<q-tab-pane name="two">Tab Two</q-tab-pane>
@@ -168,11 +179,12 @@
168179
v-for="align in ['left', 'center', 'right', 'justify']"
169180
:key="align"
170181
:align="align"
171-
class="amber inverted"
182+
color="amber"
183+
inverted
172184
>
173185
<q-tab :alert="alert" selected slot="title" v-if="third" name="three" label="Oaua" icon="bluetooth" />
174186
<q-tab alert slot="title" name="one" label="Gogu" icon="wifi" />
175-
<q-tab alert slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" icon="important_devices" />
187+
<q-tab color="red" alert slot="title" name="two" label="Gigiiiiiiiii sdfsdfs aadsf asfsda" icon="important_devices" />
176188

177189
<q-tab-pane name="one">Tab One</q-tab-pane>
178190
<q-tab-pane name="two">Tab Two</q-tab-pane>

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<q-layout ref="layout" view="hHr LpR lFf" v-model="sides" :right-breakpoint="900">
3-
<div slot="header" class="q-toolbar">
3+
<q-toolbar slot="header">
44
<q-btn flat @click="$refs.layout.toggleLeft()">
55
<q-icon name="menu" />
66
</q-btn>
@@ -18,11 +18,11 @@
1818
</q-btn>
1919
<q-checkbox v-model="todo" />
2020
<q-checkbox v-model="right" />
21-
</div>
21+
</q-toolbar>
2222

23-
<div v-if="todo" slot="header" class="q-toolbar bg-amber">
23+
<q-toolbar v-if="todo" slot="header" color="amber">
2424
<q-search v-model="search" class="text-black auto"></q-search>
25-
</div>
25+
</q-toolbar>
2626

2727
<q-tabs slot="navigation">
2828
<q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon">About</q-route-tab>
@@ -53,15 +53,14 @@
5353

5454
<router-view></router-view>
5555

56-
<div v-if="todo" slot="footer" class="q-toolbar">
56+
<q-toolbar v-if="todo" slot="footer" color="secondary">
5757
sdsfssdfs
58-
</div>
59-
<div slot="footer" class="q-toolbar">
60-
<router-link tag="button" to="/" exact>
61-
<q-icon name="keyboard arrow left" class="on-left" />
58+
</q-toolbar>
59+
<q-toolbar slot="footer">
60+
<q-btn flat @click="$router.push('/')" icon="keyboard arrow left">
6261
Back to Index
63-
</router-link>
64-
</div>
62+
</q-btn>
63+
</q-toolbar>
6564
</q-layout>
6665
</template>
6766

‎dev/components/test-layout/toolbar.vue‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,27 @@
1212
<span v-else-if="sel === 'b'" v-move="'#gigi'" tag="span">
1313
Toolbar B
1414
</span>
15-
<!--
16-
<span v-else-if="sel === 'c'" v-move="'#gigi'" tag="span">
17-
Toolbar C ggg <span class="bg-yellow">Vivi</span>
18-
</span>
19-
-->
2015

2116
<p class="caption">
2217
Toolbars are mainly used in Layout headers and footers, but they can be used
2318
in your Page view too.
2419
</p>
2520

26-
<div class="q-toolbar">
21+
<q-toolbar>
22+
<q-btn flat>
23+
<q-icon name="menu" />
24+
</q-btn>
25+
<div class="q-toolbar-title">
26+
Toolbar
27+
</div>
28+
<q-btn flat>
29+
<q-icon name="more_vert" />
30+
</q-btn>
31+
</q-toolbar>
32+
33+
<br>
34+
35+
<q-toolbar inverted>
2736
<q-btn flat>
2837
<q-icon name="menu" />
2938
</q-btn>
@@ -33,44 +42,69 @@
3342
<q-btn flat>
3443
<q-icon name="more_vert" />
3544
</q-btn>
36-
</div>
45+
</q-toolbar>
3746

3847
<p class="caption">
3948
They come in all colors.
4049
</p>
4150

42-
<!--
43-
<q-move selector="#gogu" tag="span">
44-
Gogu
45-
</q-move>
46-
-->
51+
<q-toolbar color="secondary">
52+
<q-btn flat><q-icon name="assignment_ind" /></q-btn>
53+
<div class="q-toolbar-title">
54+
Toolbar
55+
</div>
56+
<q-btn flat><q-icon name="sim_card" /></q-btn>
57+
<q-btn flat><q-icon name="gamepad" /></q-btn>
58+
</q-toolbar>
59+
<q-toolbar color="orange">
60+
<q-btn flat><q-icon name="mail" /></q-btn>
61+
<div class="q-toolbar-title">
62+
Long title for Toolbar. Very very very very very very long title.
63+
</div>
64+
<q-btn flat><q-icon name="alarm" /></q-btn>
65+
<q-btn flat><q-icon name="router" /></q-btn>
66+
<q-btn flat><q-icon name="keyboard" /></q-btn>
67+
</q-toolbar>
68+
<q-toolbar color="dark">
69+
<q-btn flat><q-icon name="menu" /></q-btn>
70+
<q-btn flat><q-icon name="security" /></q-btn>
71+
<div class="q-toolbar-title">
72+
Toolbar
73+
</div>
74+
<q-btn flat><q-icon name="headset" /></q-btn>
75+
<q-btn flat><q-icon name="tv" /></q-btn>
76+
</q-toolbar>
77+
78+
<p class="caption">
79+
And inverted:
80+
</p>
4781

48-
<div class="q-toolbar bg-secondary">
82+
<q-toolbar inverted color="secondary">
4983
<q-btn flat><q-icon name="assignment_ind" /></q-btn>
5084
<div class="q-toolbar-title">
5185
Toolbar
5286
</div>
5387
<q-btn flat><q-icon name="sim_card" /></q-btn>
5488
<q-btn flat><q-icon name="gamepad" /></q-btn>
55-
</div>
56-
<div class="q-toolbar bg-orange">
89+
</q-toolbar>
90+
<q-toolbar inverted color="orange">
5791
<q-btn flat><q-icon name="mail" /></q-btn>
5892
<div class="q-toolbar-title">
5993
Long title for Toolbar. Very very very very very very long title.
6094
</div>
6195
<q-btn flat><q-icon name="alarm" /></q-btn>
6296
<q-btn flat><q-icon name="router" /></q-btn>
6397
<q-btn flat><q-icon name="keyboard" /></q-btn>
64-
</div>
65-
<div class="q-toolbar bg-dark">
98+
</q-toolbar>
99+
<q-toolbar inverted color="dark">
66100
<q-btn flat><q-icon name="menu" /></q-btn>
67101
<q-btn flat><q-icon name="security" /></q-btn>
68102
<div class="q-toolbar-title">
69103
Toolbar
70104
</div>
71105
<q-btn flat><q-icon name="headset" /></q-btn>
72106
<q-btn flat><q-icon name="tv" /></q-btn>
73-
</div>
107+
</q-toolbar>
74108
</div>
75109
</div>
76110
</template>

‎dev/components/web-tests/layout.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
22
<div>
3-
<q-tabs class="secondary" inverted>
3+
<q-tabs color="secondary" inverted>
44
<q-route-tab
55
v-for="route in ['a', 'b', 'c']"
66
:key="route"
77
slot="title"
88
:name="route"
99
:to="`/lay/${route}`"
1010
:label="`Route ${route}`"
11+
replace
1112
icon="receipt"
1213
/>
13-
<q-tab slot="title" name="link" label="Link" icon="cloud" />
14+
<q-tab slot="title" name="link" label="Link" icon="cloud" color="amber" />
1415

1516
<q-tab-pane name="link">
1617
Link Tab

‎src/components/data-table/TableContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
:sorting="sorting"
2020
></sort-icon>
2121
<span v-html="col.label"></span>
22-
<q-tooltip v-html="col.label"></q-tooltip>
22+
<q-tooltip v-if="col.label" v-html="col.label"></q-tooltip>
2323
</th>
2424
<th v-if="head && scroll.horiz"></th>
2525
</tr>

‎src/components/data-table/plugins/sticky-cols/TableSticky.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
:sorting="sorting"
2020
></sort-icon>
2121
<span v-html="col.label"></span>
22-
<q-tooltip v-html="col.label"></q-tooltip>
22+
<q-tooltip v-if="col.label" v-html="col.label"></q-tooltip>
2323
</template>
2424
</th>
2525
</tr>

‎src/components/layout/QToolbar.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="q-toolbar" :class="classes">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'q-toolbar',
10+
props: {
11+
color: String,
12+
inverted: Boolean
13+
},
14+
computed: {
15+
classes () {
16+
const
17+
inv = this.inverted,
18+
cls = []
19+
20+
cls.push(`q-toolbar-${inv ? 'inverted' : 'normal'}`)
21+
if (this.color) {
22+
cls.push(`${inv ? 'text' : 'bg'}-${this.color}`)
23+
}
24+
25+
return cls
26+
}
27+
}
28+
}
29+
</script>

‎src/components/layout/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import QLayout from './QLayout.vue'
22
import QFixedPosition from './QFixedPosition.vue'
33
import QSideLink from './QSideLink.vue'
4+
import QToolbar from './QToolbar.vue'
45

56
export {
67
QLayout,
78
QFixedPosition,
8-
QSideLink
9+
QSideLink,
10+
QToolbar
911
}

0 commit comments

Comments
 (0)