Skip to content

Commit 63a2140

Browse files
rstoenescurstoenescu
committed
Further Notify work
1 parent 8e58e9d commit 63a2140

30 files changed

+426
-1084
lines changed

‎dev/components/components/alert.vue‎

Lines changed: 28 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,40 @@
11
<template>
22
<div class="layout-padding">
3-
4-
<div style="margin-bottom: 25px">
5-
<q-btn color="primary" @click="alertAsMethod">Show Alert as Method</q-btn>
6-
<q-btn color="primary" @click="reset">Reset First 2 Alerts</q-btn>
7-
</div>
8-
9-
<q-alert
10-
color="brown"
11-
icon="cloud"
3+
<q-toggle v-model="visible" label="Show/hide next one" />
4+
<br><br>
5+
<q-transition
126
enter="bounceInLeft"
137
leave="bounceOutRight"
148
appear
15-
style="margin-bottom: 1.5rem"
16-
v-model="visible"
17-
dismissible
189
>
19-
Lorem ipsum dolor sit amet.
20-
</q-alert>
10+
<q-alert
11+
v-if="visible"
12+
color="brown"
13+
icon="cloud"
14+
style="margin-bottom: 1.5rem"
15+
>
16+
Lorem ipsum dolor sit amet.
17+
</q-alert>
18+
</q-transition>
2119

22-
<q-btn @click="visible2 = !visible2" label="Toggle HERE" />
23-
<q-alert
24-
type="negative"
25-
ref="destroyableAlert"
26-
v-model="visible2"
27-
dismissible
28-
style="margin-bottom: 1.5rem"
29-
:actions="[{label: 'Snooze', handler () {}}]"
30-
>
31-
Lorem ipsum dolor sit amet.
32-
</q-alert>
20+
<q-toggle v-model="visible2" label="Show/hide next one" />
21+
<br><br>
3322

34-
<q-toggle v-model="diss" label="Dismiss next one" />
35-
<q-alert
36-
type="negative"
37-
style="margin-bottom: 1.5rem"
38-
dismissible
39-
v-model="diss"
40-
@dismiss="dismissed"
41-
:actions="actions"
23+
<q-transition
24+
enter="bounceInLeft"
25+
leave="bounceOutRight"
26+
appear
4227
>
43-
No anim, dismiss test.
44-
</q-alert>
28+
<q-alert
29+
v-if="visible2"
30+
type="negative"
31+
dismissible
32+
style="margin-bottom: 1.5rem"
33+
:actions="[{label: 'Snooze', handler () {}}]"
34+
>
35+
Lorem ipsum dolor sit amet.
36+
</q-alert>
37+
</q-transition>
4538

4639
<q-alert
4740
v-for="type in ['positive', 'info', 'negative', 'warning']"
@@ -65,15 +58,11 @@
6558
</template>
6659

6760
<script>
68-
import { Alert } from 'quasar'
6961
// import 'quasar-extras/animate/bounceInLeft.css'
7062
// import 'quasar-extras/animate/bounceInRight.css'
7163
// import 'quasar-extras/animate/bounceOutRight.css'
7264
73-
Alert.create({html: 'Warning, warning Will Robinson!'})
74-
7565
export default {
76-
7766
data () {
7867
return {
7968
visible: true,
@@ -91,30 +80,6 @@ export default {
9180
dismissed () {
9281
console.log('@dismiss')
9382
},
94-
alertAsMethod () {
95-
Alert.create({
96-
enter: 'bounceInRight',
97-
leave: 'bounceOutRight',
98-
color: 'warning',
99-
icon: 'wifi',
100-
html: `A text with your alert's<br><strong>awesome</strong> message`,
101-
position: 'top-right',
102-
actions: [
103-
{
104-
label: 'Snooze',
105-
handler () {
106-
console.log('acting')
107-
}
108-
},
109-
{
110-
label: 'Abort',
111-
handler () {
112-
console.log('aborting')
113-
}
114-
}
115-
]
116-
})
117-
},
11883
reset () {
11984
this.visible = true
12085
this.visible2 = true

‎dev/components/components/context-menu.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<q-item
4141
v-for="n in 10"
4242
:key="n"
43-
@click="showToast(), $refs.context.hide()"
43+
@click="showNotify(), $refs.context.hide()"
4444
>
4545
<q-item-main label="Label" sublabel="Value" />
4646
</q-item>
@@ -53,7 +53,6 @@
5353

5454
<script>
5555
import {
56-
Toast,
5756
QContextMenu,
5857
QList,
5958
QItem,
@@ -62,15 +61,14 @@ import {
6261
6362
export default {
6463
components: {
65-
Toast,
6664
QContextMenu,
6765
QList,
6866
QItem,
6967
QItemMain
7068
},
7169
methods: {
72-
showToast () {
73-
Toast.create((this.$q.platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a context menu item.')
70+
showNotify () {
71+
this.$q.notify((this.$q.platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a context menu item.')
7472
}
7573
}
7674
}

‎dev/components/components/fab.vue‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,45 @@
1010

1111
<div class="column items-center" style="margin-top: 100px; margin-bottom: 100px;">
1212
<q-fab color="purple" icon="keyboard_arrow_up" direction="up">
13-
<q-fab-action @click="toast('mail')" icon="mail" />
14-
<q-fab-action @click="toast('alarm')" icon="alarm" />
15-
<q-fab-action @click="toast('alarm')" icon="alarm" />
16-
<q-fab-action @click="toast('alarm')" icon="alarm" />
17-
<q-fab-action @click="toast('alarm')" icon="alarm" />
13+
<q-fab-action @click="notify('mail')" icon="mail" />
14+
<q-fab-action @click="notify('alarm')" icon="alarm" />
15+
<q-fab-action @click="notify('alarm')" icon="alarm" />
16+
<q-fab-action @click="notify('alarm')" icon="alarm" />
17+
<q-fab-action @click="notify('alarm')" icon="alarm" />
1818
</q-fab>
1919

2020
<br>
2121

2222
<q-toggle v-model="toggle" class="z-max fixed-top" />
2323
<q-fab v-model="toggle" icon="keyboard_arrow_left" direction="left">
24-
<q-fab-action @click="toast('mail')" icon="mail" />
25-
<q-fab-action @click="toast('alarm')" icon="alarm" />
26-
<q-fab-action @click="toast('alarm')" icon="alarm" />
27-
<q-fab-action @click="toast('alarm')" icon="alarm" />
28-
<q-fab-action @click="toast('alarm')" icon="alarm" />
29-
<q-fab-action @click="toast('alarm')" icon="alarm" />
24+
<q-fab-action @click="notify('mail')" icon="mail" />
25+
<q-fab-action @click="notify('alarm')" icon="alarm" />
26+
<q-fab-action @click="notify('alarm')" icon="alarm" />
27+
<q-fab-action @click="notify('alarm')" icon="alarm" />
28+
<q-fab-action @click="notify('alarm')" icon="alarm" />
29+
<q-fab-action @click="notify('alarm')" icon="alarm" />
3030
</q-fab>
3131

3232
<br>
3333

3434
<q-fab color="secondary" push icon="keyboard_arrow_right" direction="right">
35-
<q-fab-action color="primary" @click="toast('mail')" icon="mail" />
36-
<q-fab-action @click="toast('alarm')" icon="alarm" />
37-
<q-fab-action @click="toast('alarm')" icon="alarm" />
38-
<q-fab-action @click="toast('alarm')" icon="alarm" />
39-
<q-fab-action @click="toast('alarm')" icon="alarm" />
40-
<q-fab-action @click="toast('alarm')" icon="alarm" />
35+
<q-fab-action color="primary" @click="notify('mail')" icon="mail" />
36+
<q-fab-action @click="notify('alarm')" icon="alarm" />
37+
<q-fab-action @click="notify('alarm')" icon="alarm" />
38+
<q-fab-action @click="notify('alarm')" icon="alarm" />
39+
<q-fab-action @click="notify('alarm')" icon="alarm" />
40+
<q-fab-action @click="notify('alarm')" icon="alarm" />
4141
</q-fab>
4242

4343
<br>
4444

4545
<q-fab color="tertiary" glossy icon="keyboard_arrow_down" direction="down">
46-
<q-fab-action color="amber" @click="toast('mail')" icon="mail" />
47-
<q-fab-action color="amber" @click="toast('alarm')" icon="alarm" />
48-
<q-fab-action color="amber" @click="toast('alarm')" icon="alarm" />
49-
<q-fab-action color="amber" @click="toast('alarm')" icon="alarm" />
50-
<q-fab-action color="amber" @click="toast('alarm')" icon="alarm" />
51-
<q-fab-action color="amber" @click="toast('alarm')" icon="alarm" />
46+
<q-fab-action color="amber" @click="notify('mail')" icon="mail" />
47+
<q-fab-action color="amber" @click="notify('alarm')" icon="alarm" />
48+
<q-fab-action color="amber" @click="notify('alarm')" icon="alarm" />
49+
<q-fab-action color="amber" @click="notify('alarm')" icon="alarm" />
50+
<q-fab-action color="amber" @click="notify('alarm')" icon="alarm" />
51+
<q-fab-action color="amber" @click="notify('alarm')" icon="alarm" />
5252
</q-fab>
5353
</div>
5454

@@ -86,10 +86,10 @@
8686
style="right: 18px; bottom: 18px;"
8787
>
8888
<q-tooltip ref="tooltip0" slot="tooltip" anchor="center left" self="center right" :offset="[20, 0]">Tooltip in FAB</q-tooltip>
89-
<q-fab-action color="purple" @click="toast('mail')" icon="mail">
89+
<q-fab-action color="purple" @click="notify('mail')" icon="mail">
9090
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Mail</q-tooltip>
9191
</q-fab-action>
92-
<q-fab-action color="secondary" @click="toast('alarm')" icon="alarm">
92+
<q-fab-action color="secondary" @click="notify('alarm')" icon="alarm">
9393
<q-tooltip anchor="center left" self="center right" :offset="[20, 0]">Alarm</q-tooltip>
9494
</q-fab-action>
9595
</q-fab>
@@ -98,8 +98,6 @@
9898
</template>
9999

100100
<script>
101-
import { Dialog, Toast } from 'quasar'
102-
103101
export default {
104102
data () {
105103
return {
@@ -108,15 +106,15 @@ export default {
108106
},
109107
methods: {
110108
alert () {
111-
Dialog.create({
109+
this.$q.dialog({
112110
title: 'FAB',
113111
message: 'Good job! Keep it going.'
114112
})
115113
},
116-
toast (icon) {
117-
Toast.create({
114+
notify (icon) {
115+
this.$q.notify({
118116
icon,
119-
html: 'So you want your ' + icon + 's, huh?'
117+
message: 'So you want your ' + icon + 's, huh?'
120118
})
121119
},
122120
openFab () {

‎dev/components/components/modal.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,6 @@
113113
</template>
114114

115115
<script>
116-
import { Toast } from 'quasar'
117-
118116
export default {
119117
data () {
120118
return {
@@ -148,7 +146,7 @@ export default {
148146
},
149147
methods: {
150148
notify (eventName) {
151-
Toast.create(`Event "${eventName}" was triggered.`)
149+
this.$q.notify(`Event "${eventName}" was triggered.`)
152150
},
153151
openSpecialPosition (position) {
154152
this.position = position

‎dev/components/components/popover.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<q-item
1616
v-for="n in 20"
1717
:key="n"
18-
@click="showToast(), $refs.popover1.hide()"
18+
@click="showNotify(), $refs.popover1.hide()"
1919
>
2020
<q-item-main label="Label" sublabel="Click me" />
2121
</q-item>
@@ -41,7 +41,7 @@
4141
<q-item
4242
v-for="n in 3"
4343
:key="n"
44-
@click="showToast(), $refs.popover2.hide()"
44+
@click="showNotify(), $refs.popover2.hide()"
4545
>
4646
<q-item-main label="Label" />
4747
</q-item>
@@ -101,17 +101,17 @@
101101
<img
102102
src="~assets/map.png"
103103
style="height: 150px; width: 200px;"
104-
@click="showToast(), $refs.popover3.hide()"
104+
@click="showNotify(), $refs.popover3.hide()"
105105
>
106106
</q-popover>
107107
</q-btn>
108108

109109
<q-btn color="tertiary" class="fixed-bottom-right" icon="plus_one" style="bottom: 10px; right: 16px;">
110110
<q-popover ref="popover4">
111111
<div class="group" style="width: 220px; text-align: center;">
112-
<q-btn icon="thumb_up" flat color="primary" @click="showToast(), $refs.popover4.hide()" />
113-
<q-btn icon="thumb_down" flat color="primary" @click="showToast(), $refs.popover4.hide()" />
114-
<q-btn icon="share" flat color="secondary" @click="showToast(), $refs.popover4.hide()" />
112+
<q-btn icon="thumb_up" flat color="primary" @click="showNotify(), $refs.popover4.hide()" />
113+
<q-btn icon="thumb_down" flat color="primary" @click="showNotify(), $refs.popover4.hide()" />
114+
<q-btn icon="share" flat color="secondary" @click="showNotify(), $refs.popover4.hide()" />
115115
</div>
116116
</q-popover>
117117
</q-btn>
@@ -123,7 +123,7 @@
123123
<q-item
124124
v-for="n in 20"
125125
:key="n"
126-
@click="showToast(), $refs.popover5.hide()"
126+
@click="showNotify(), $refs.popover5.hide()"
127127
>
128128
<q-item-main label="Label" sublabel="Click me" />
129129
</q-item>
@@ -135,8 +135,6 @@
135135
</template>
136136

137137
<script>
138-
import { Platform, Toast } from 'quasar'
139-
140138
export default {
141139
data () {
142140
return {
@@ -154,8 +152,8 @@ export default {
154152
}
155153
},
156154
methods: {
157-
showToast () {
158-
Toast.create((Platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a Popover item')
155+
showNotify () {
156+
this.$q.notify((this.$q.platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a Popover item')
159157
}
160158
}
161159
}

‎dev/components/components/pull-to-refresh.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@
2525
</template>
2626

2727
<script>
28-
import { Toast } from 'quasar'
29-
3028
export default {
3129
data () {
3230
return {
@@ -38,7 +36,7 @@ export default {
3836
setTimeout(() => {
3937
done()
4038
this.items.push({})
41-
Toast.create('Item #' + this.items.length + ' is new.')
39+
this.$q.notify('Item #' + this.items.length + ' is new.')
4240
}, 1000)
4341
}
4442
}

‎dev/components/components/tree.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
</template>
2323

2424
<script>
25-
import { Toast } from 'quasar'
26-
2725
export default {
2826
data () {
2927
return {
@@ -64,7 +62,7 @@ export default {
6462
title: 'Item 1.3',
6563
expanded: false,
6664
handler () {
67-
Toast.create('Tapped on item 1.3')
65+
this.$q.notify('Tapped on item 1.3')
6866
},
6967
children: []
7068
}

0 commit comments

Comments
 (0)