Skip to content

Commit 7fb53c2

Browse files
rstoenescurstoenescu
committed
feat(QBanner): dark prop
1 parent e1768c4 commit 7fb53c2

File tree

7 files changed

+71
-60
lines changed

7 files changed

+71
-60
lines changed

‎ui/dev/components/components/banner.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="q-layout-padding bg-grey-3" style="min-height: 100vh">
2+
<div class="q-layout-padding" style="min-height: 100vh">
33
<div style="max-width: 500px">
44
<q-toggle v-model="dense" label="Dense banners" />
55

‎ui/dev/components/components/button-group.vue‎

Lines changed: 51 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -113,63 +113,59 @@
113113
</q-btn-group>
114114

115115
<div v-for="push in options" :key="push">
116-
<template v-if="!push || !flat">
117-
<div v-for="flat in options" :key="flat">
118-
<template v-if="!(push || flat) || !outline">
119-
<div v-for="outline in options" :key="outline">
120-
<div v-for="rounded in options" :key="rounded">
121-
<div v-for="size in sizes" :key="size" class="q-ma-sm">
122-
<p class="caption">
123-
{{ push ? 'push ' : '' }}
124-
{{ rounded ? 'rounded ' : '' }}
125-
{{ outline ? 'outline ' : '' }}
126-
{{ flat ? 'flat ' : '' }}
127-
{{ size }}
128-
</p>
129-
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
130-
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
131-
First
132-
</q-btn>
133-
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
134-
Second
135-
</q-btn>
136-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
137-
Third
138-
</q-btn>
139-
</q-btn-group>
140-
141-
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
142-
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
143-
First
144-
</q-btn>
145-
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
146-
Second
147-
</q-btn>
148-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
149-
Third
150-
</q-btn>
151-
</q-btn-group>
152-
153-
<q-btn-group :push="push" :rounded="rounded" :outline="outline" style="margin-left: 2em;">
154-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
155-
First
156-
</q-btn>
157-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
158-
Second
159-
</q-btn>
160-
161-
<q-separator vertical />
162-
163-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
164-
Separated
165-
</q-btn>
166-
</q-btn-group>
167-
</div>
168-
</div>
116+
<div v-for="flat in options" :key="flat">
117+
<div v-for="outline in options" :key="outline">
118+
<div v-for="rounded in options" :key="rounded">
119+
<div v-for="size in sizes" :key="size" class="q-ma-sm">
120+
<p class="caption">
121+
{{ push ? 'push ' : '' }}
122+
{{ rounded ? 'rounded ' : '' }}
123+
{{ outline ? 'outline ' : '' }}
124+
{{ flat ? 'flat ' : '' }}
125+
{{ size }}
126+
</p>
127+
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
128+
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
129+
First
130+
</q-btn>
131+
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
132+
Second
133+
</q-btn>
134+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
135+
Third
136+
</q-btn>
137+
</q-btn-group>
138+
139+
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
140+
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
141+
First
142+
</q-btn>
143+
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
144+
Second
145+
</q-btn>
146+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
147+
Third
148+
</q-btn>
149+
</q-btn-group>
150+
151+
<q-btn-group :push="push" :rounded="rounded" :outline="outline" style="margin-left: 2em;">
152+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
153+
First
154+
</q-btn>
155+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
156+
Second
157+
</q-btn>
158+
159+
<q-separator vertical />
160+
161+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
162+
Separated
163+
</q-btn>
164+
</q-btn-group>
169165
</div>
170-
</template>
166+
</div>
171167
</div>
172-
</template>
168+
</div>
173169
</div>
174170
</div>
175171
</template>

‎ui/dev/components/other/mutation.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="q-layout-padding q-gutter-md">
3-
<q-card>
3+
<q-card flat bordered>
44
<q-card-section>
55
<div class="text-h6">
66
no modifiers (equivalent to having them all)
@@ -28,7 +28,7 @@
2828
</q-card-section>
2929
</q-card>
3030

31-
<q-card>
31+
<q-card flat bordered>
3232
<q-card-section>
3333
<div class="text-h6">
3434
childList
@@ -43,7 +43,7 @@
4343
</q-card-section>
4444
</q-card>
4545

46-
<q-card>
46+
<q-card flat bordered>
4747
<q-card-section>
4848
<div class="text-h6">
4949
attributes
@@ -58,7 +58,7 @@
5858
</q-card-section>
5959
</q-card>
6060

61-
<q-card>
61+
<q-card flat bordered>
6262
<q-card-section>
6363
<div class="text-h6">
6464
characterData

‎ui/src/components/banner/QBanner.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import Vue from 'vue'
22

3+
import DarkMixin from '../../mixins/dark.js'
34
import slot from '../../utils/slot.js'
45

56
export default Vue.extend({
67
name: 'QBanner',
78

9+
mixins: [ DarkMixin ],
10+
811
props: {
912
inlineActions: Boolean,
1013
dense: Boolean,
@@ -19,6 +22,7 @@ export default Vue.extend({
1922
class: {
2023
'q-banner--top-padding': actions !== void 0 && !this.inlineActions,
2124
'q-banner--dense': this.dense,
25+
'q-banner--dark': this.isDark,
2226
'rounded-borders': this.rounded
2327
},
2428
on: this.$listeners

‎ui/src/components/banner/QBanner.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616

1717
"rounded": {
1818
"extends": "rounded"
19+
},
20+
21+
"dark": {
22+
"extends": "dark",
23+
"addedIn": "v1.3.0"
1924
}
2025
},
2126

‎ui/src/components/banner/QBanner.sass‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@
3636
.q-banner__actions
3737
&.col-auto
3838
padding-left: 8px
39+
40+
&--dark
41+
background: $grey-9

‎ui/src/components/banner/QBanner.styl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@
3636
.q-banner__actions
3737
&.col-auto
3838
padding-left 8px
39+
40+
&--dark
41+
background $grey-9

0 commit comments

Comments
 (0)