Skip to content

Commit e22b9e8

Browse files
rstoenescurstoenescu
committed
refactor(QBtn): Size prop, dense prop, fab & fab-mini prop
1 parent 7b46d66 commit e22b9e8

36 files changed

+220
-296
lines changed

‎dev/components/components/button-dropdown.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div style="padding: 25px">
3-
<div v-for="(cfg, index1) in conf" :key="`${cfg.split}-${cfg.compact}`">
3+
<div v-for="(cfg, index1) in conf" :key="`${cfg.split}-${cfg.dense}`">
44
<div v-for="(size, index2) in sizes" :key="size">
55
<p class="caption">{{ label(cfg) }} - {{ size }}</p>
6-
<q-btn-dropdown ref="first" :size="size" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
6+
<q-btn-dropdown ref="first" :size="size" :split="cfg.split" :dense="cfg.dense" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
77
<q-list link>
88
<q-list-header inset>Folders X</q-list-header>
99
<q-item v-for="n in 3" :key="`1.${n}`" @click="hideDropdown(index1 * 3 + index2)">
@@ -26,7 +26,7 @@
2626
</q-item>
2727
</q-list>
2828
</q-btn-dropdown>
29-
<q-btn-dropdown ref="second" :size="size" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
29+
<q-btn-dropdown ref="second" :size="size" :split="cfg.split" :dense="cfg.dense" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy label="Dropdown Button" style="margin: 15px">
3030
<q-list link>
3131
<q-list-header inset>Folders</q-list-header>
3232
<q-item v-for="n in 3" :key="`1.${n}`" @click="$refs.second[index1 * 3 + index2].hide()">
@@ -49,7 +49,7 @@
4949
</q-item>
5050
</q-list>
5151
</q-btn-dropdown>
52-
<q-btn-dropdown ref="third" :size="size" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
52+
<q-btn-dropdown ref="third" :size="size" :split="cfg.split" :dense="cfg.dense" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" icon="map" glossy style="margin: 15px">
5353
<q-list link>
5454
<q-list-header inset>Folders</q-list-header>
5555
<q-item v-for="n in 3" :key="`1.${n}`" @click="$refs.third[index1 * 3 + index2].hide()">
@@ -72,7 +72,7 @@
7272
</q-item>
7373
</q-list>
7474
</q-btn-dropdown>
75-
<q-btn-dropdown ref="fourth" :size="size" :split="cfg.split" :compact="cfg.compact" @show="log('open')" @hide="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
75+
<q-btn-dropdown ref="fourth" :size="size" :split="cfg.split" :dense="cfg.dense" @show="log('open')" @hide="log('close')" @click="log('click')" color="yellow" glossy icon="map" label="Dropdown Button" style="margin: 15px">
7676
<q-list link>
7777
<q-list-header inset>Folders</q-list-header>
7878
<q-item v-for="n in 3" :key="`1.${n}`" @click="$refs.fourth[index1 * 3 + index2].hide()">
@@ -105,10 +105,10 @@ export default {
105105
data () {
106106
return {
107107
conf: [
108-
{split: false, compact: false},
109-
{split: false, compact: true},
110-
{split: true, compact: false},
111-
{split: true, compact: true}
108+
{split: false, dense: false},
109+
{split: false, dense: true},
110+
{split: true, dense: false},
111+
{split: true, dense: true}
112112
],
113113
sizes: ['sm', 'md', 'lg']
114114
}
@@ -122,8 +122,8 @@ export default {
122122
if (cfg.split) {
123123
label += ' Split'
124124
}
125-
if (cfg.compact) {
126-
label += ' Compact'
125+
if (cfg.dense) {
126+
label += ' dense'
127127
}
128128
return label
129129
},

‎dev/components/components/button-toggle.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@
2929

3030
<div style="margin-top: 25px">
3131
<q-btn-toggle
32-
compact
32+
dense
3333
v-model="toggled"
3434
toggle-color="primary"
3535
>
3636
Toggle me
3737
</q-btn-toggle>
3838

3939
<q-btn-toggle
40-
compact
40+
dense
4141
v-model="toggled"
4242
color="green"
4343
toggle-color="red"
@@ -46,7 +46,7 @@
4646
</q-btn-toggle>
4747

4848
<q-btn-toggle
49-
compact
49+
dense
5050
v-model="toggled"
5151
color="green"
5252
toggle-color="red"

‎dev/components/components/button.vue‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
<template>
22
<div>
33
<div class="layout-padding buttons-test">
4+
<p class="group">
5+
<template v-for="n in ['xs', 'sm', 'md', 'lg', 'xl']">
6+
<span>{{n}}</span>
7+
<q-btn :size="n" dense icon="android" color="primary" />
8+
<q-btn :size="n" icon="android" color="primary" />
9+
<q-btn :size="n" icon="android" color="primary" label="Test"/>
10+
<q-btn :size="n" round icon="android" color="primary" />
11+
<q-btn :size="n" round icon="android" color="primary" dense />
12+
<q-btn :size="n" label="Test" color="primary" />
13+
<br><br>
14+
</template>
15+
</p>
16+
<q-toolbar color="secondary" style="width: 500px">
17+
<q-btn flat dense round icon="menu" />
18+
<q-btn flat round dense icon="android" />
19+
<q-btn flat dense icon="assignment_ind" />
20+
<q-btn flat dense icon="android" />
21+
<q-toolbar-title>
22+
Toolbar
23+
</q-toolbar-title>
24+
<q-btn flat dense icon="sim_card" />
25+
<q-btn flat dense icon="gamepad" />
26+
</q-toolbar>
427
<p class="caption">Regular (rectangle) and Circular</p>
528
<q-btn color="primary">Some very, but very long button title that should wrap to the next line without any problems</q-btn>
629
<p class="group">
@@ -143,21 +166,21 @@
143166
<q-btn v-for="size in sizes" :key="'e' + size" icon="cloud" :label="`Size ${size}`" color="primary" :size="size" />
144167
</p>
145168

146-
<p class="caption">Compact - Small, Medium (default) and Big</p>
169+
<p class="caption">dense - Small, Medium (default) and Big</p>
147170
<p class="group">
148-
<q-btn compact size="sm" color="primary" label="Button" />
149-
<q-btn compact color="primary" label="Button" />
150-
<q-btn compact size="lg" color="primary" label="Button" />
171+
<q-btn dense size="sm" color="primary" label="Button" />
172+
<q-btn dense color="primary" label="Button" />
173+
<q-btn dense size="lg" color="primary" label="Button" />
151174
</p>
152175
<p class="group">
153-
<q-btn compact icon="check" size="sm" color="primary" label="Button" />
154-
<q-btn compact icon="cloud" color="primary" label="Button" />
155-
<q-btn compact icon="alarm" size="lg" color="primary" label="Button" />
176+
<q-btn dense icon="check" size="sm" color="primary" label="Button" />
177+
<q-btn dense icon="cloud" color="primary" label="Button" />
178+
<q-btn dense icon="alarm" size="lg" color="primary" label="Button" />
156179
</p>
157180
<p class="group">
158-
<q-btn compact round size="sm" icon="check" color="primary" />
159-
<q-btn compact round icon="cloud" color="primary" />
160-
<q-btn compact round size="lg" icon="alarm" color="primary" />
181+
<q-btn dense round size="sm" icon="check" color="primary" />
182+
<q-btn dense round icon="cloud" color="primary" />
183+
<q-btn dense round size="lg" icon="alarm" color="primary" />
161184
</p>
162185

163186
<p class="caption">Regular with Icons</p>

‎dev/components/components/card.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<img src="~assets/donuts.png">
77
</q-card-media>
88
<q-card-title class="relative-position">
9-
<q-btn round color="primary" icon="place" class="absolute" style="top: 0; right: 8px; transform: translateY(-50%);" />
9+
<q-btn fab color="primary" icon="place" class="absolute" style="top: 0; right: 8px; transform: translateY(-50%);" />
1010

1111
<div class="ellipsis">Cafe Basilico Cafe Basilico Cafe Basilico Cafe Basilico Cafe Basilico Cafe Basilico Cafe Basilico</div>
1212
<q-rating slot="subtitle" v-model="stars" :max="5" />
@@ -20,7 +20,7 @@
2020
</q-card-main>
2121
<q-card-separator />
2222
<q-card-actions>
23-
<q-btn flat round size="sm" icon="event" />
23+
<q-btn flat round icon="event" />
2424
<q-btn flat>5:30PM</q-btn>
2525
<q-btn flat>7:30PM</q-btn>
2626
<q-btn flat>9:00PM</q-btn>
@@ -64,7 +64,7 @@
6464
<q-card-title>
6565
Title
6666
<span slot="subtitle">Subtitle</span>
67-
<q-icon slot="right" name="more_vert">
67+
<q-btn round flat icon="more_vert" slot="right">
6868
<q-popover ref="popover">
6969
<q-list link class="no-border">
7070
<q-item @click="$refs.popover.hide()">
@@ -78,7 +78,7 @@
7878
</q-item>
7979
</q-list>
8080
</q-popover>
81-
</q-icon>
81+
</q-btn>
8282
</q-card-title>
8383
<q-card-main>
8484
{{lorem}}
@@ -326,9 +326,9 @@
326326
<img src="~assets/mountains.jpg">
327327
</q-card-media>
328328
<q-card-actions align="around">
329-
<q-btn flat round size="sm" color="red" icon="favorite" />
330-
<q-btn flat round size="sm" color="faded" icon="bookmark" />
331-
<q-btn flat round size="sm" color="primary" icon="share" />
329+
<q-btn flat round color="red" icon="favorite" />
330+
<q-btn flat round color="faded" icon="bookmark" />
331+
<q-btn flat round color="primary" icon="share" />
332332
</q-card-actions>
333333
</q-card>
334334

‎dev/components/components/carousel.vue‎

Lines changed: 4 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@
4141
</q-carousel-control>
4242

4343
<q-carousel-control slot="control-left" slot-scope="carousel" position="top-left" :offset="[18, 18]">
44-
<q-btn size="sm" round color="tertiary" :icon="carousel.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="carousel.toggleFullscreen()" />
44+
<q-btn round color="tertiary" :icon="carousel.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="carousel.toggleFullscreen()" />
4545
</q-carousel-control>
4646

4747
<q-carousel-control slot="control-nav" slot-scope="carousel" :offset="[18, 52]">
48-
<q-btn :disable="!carousel.canGoToPrevious" color="primary" icon="keyboard_arrow_left" round size="sm" @click="carousel.previous" class="q-mr-small" />
49-
<q-btn :disable="!carousel.canGoToNext" color="primary" icon="keyboard_arrow_right" round size="sm" @click="carousel.next" />
48+
<q-btn :disable="!carousel.canGoToPrevious" color="primary" icon="keyboard_arrow_left" round @click="carousel.previous" class="q-mr-small" />
49+
<q-btn :disable="!carousel.canGoToNext" color="primary" icon="keyboard_arrow_right" round @click="carousel.next" />
5050
</q-carousel-control>
5151

5252
<q-carousel-control slot="progress" slot-scope="carousel" position="top">
@@ -78,109 +78,12 @@
7878
slot-scope="props"
7979
color="white"
8080
flat
81-
size="sm"
81+
dense
8282
:label="`${props.slide + 1}`"
8383
@click="props.goToSlide()"
8484
:class="{inactive: !props.current}"
8585
/>
8686
</q-carousel>
87-
88-
<!--
89-
<p class="caption">
90-
Carousel with Arrows, Dots and Fullscreen controls.
91-
</p>
92-
<q-carousel arrows dots fullscreen class="text-white" handle-arrow-keys>
93-
<q-carousel-slide class="bg-primary">
94-
<div>Slide 1</div>
95-
<div v-for="n in 12">Line {{(n+2)}}</div>
96-
</q-carousel-slide>
97-
<q-carousel-slide class="bg-secondary">
98-
Slide 2
99-
</q-carousel-slide>
100-
<q-carousel-slide class="bg-tertiary">
101-
Slide 3
102-
</q-carousel-slide>
103-
</q-carousel>
104-
-->
105-
<!--
106-
<p class="caption">
107-
Carousel with Centered Content and Infinite Scroll
108-
</p>
109-
<q-carousel infinite arrows dots class="text-white">
110-
<q-carousel-slide class="bg-primary centered">
111-
Slide 1
112-
</div>
113-
<q-carousel-slide class="bg-secondary centered">
114-
Slide 2
115-
</div>
116-
<q-carousel-slide class="bg-tertiary centered">
117-
Slide 3
118-
</div>
119-
</q-carousel>
120-
121-
<p class="caption">
122-
Carousel with Infinite Scroll and Autoplay
123-
</p>
124-
<q-carousel infinite autoplay arrows dots class="text-white">
125-
<q-carousel-slide class="bg-primary centered">
126-
Slide 1
127-
</div>
128-
<q-carousel-slide class="bg-secondary centered">
129-
Slide 2
130-
</div>
131-
<q-carousel-slide class="bg-tertiary centered">
132-
Slide 3
133-
</div>
134-
</q-carousel>
135-
136-
<p class="caption">
137-
Carousel with Custom Actions as Controls and Overshoot Easing
138-
</p>
139-
<q-carousel
140-
arrows
141-
dots
142-
actions
143-
:swipe-easing="overshoot"
144-
:easing="overshoot"
145-
class="text-white"
146-
>
147-
<q-carousel-slide class="bg-primary">
148-
<div v-for="n in 20">Slide {{n}}</div>
149-
</div>
150-
<q-carousel-slide class="bg-secondary">
151-
Slide 2
152-
</div>
153-
<q-carousel-slide class="bg-tertiary">
154-
Slide 3
155-
</div>
156-
<q-icon slot="action" name="camera_enhance" />
157-
<q-icon slot="action" name="bookmark_border" />
158-
<q-icon slot="action" name="add_shopping_cart" />
159-
</q-carousel>
160-
161-
<p class="caption">
162-
Launch Carousel on Fullscreen
163-
</p>
164-
<q-btn color="primary" class="glossy" @click="$refs.modal.show()">
165-
Launch
166-
</q-btn>
167-
<q-modal ref="modal" maximized>
168-
<q-carousel arrows dots class="text-white full-height">
169-
<q-carousel-slide class="bg-primary centered">
170-
<h1>Slide 1</h1>
171-
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
172-
</div>
173-
<q-carousel-slide class="bg-secondary centered">
174-
<h1>Slide 2</h1>
175-
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
176-
</div>
177-
<q-carousel-slide class="bg-tertiary centered">
178-
<h1>Slide 3</h1>
179-
<q-btn color="dark" class="glossy" @click="$refs.modal.hide()">Close Me</q-btn>
180-
</div>
181-
</q-carousel>
182-
</q-modal>
183-
-->
18487
</div>
18588
</div>
18689
</template>

‎dev/components/components/data-table2.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@
8686
color="primary"
8787
>
8888
<template slot="top" slot-scope="props">
89-
<q-btn flat color="primary" icon="add" label="Add row" />
90-
<q-btn class="on-right" flat color="primary" icon="refresh" label="Refresh" />
89+
<q-btn flat dense color="primary" icon="add" label="Add row" />
90+
<q-btn class="on-right" flat dense color="primary" icon="refresh" label="Refresh" />
9191
</template>
9292
</q-table>
9393

‎dev/components/components/modal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
<q-modal-layout>
6868
<q-toolbar slot="header">
6969
<q-icon style="font-size: 500%" class="cursor-pointer" name="map" @click="closeMe" />
70-
<q-btn flat @click="$refs.layoutModal.hide()">
70+
<q-btn flat round dense @click="$refs.layoutModal.hide()">
7171
<q-icon name="keyboard_arrow_left" />
7272
</q-btn>
7373
<q-toolbar-title>

0 commit comments

Comments
 (0)