Skip to content

Commit b27d161

Browse files
rstoenescurstoenescu
committed
feat(Notify): New props -> icon-color, icon-size, spinner-color, spinner-size #12417 
1 parent 2b9b2c0 commit b27d161

File tree

3 files changed

+120
-8
lines changed

3 files changed

+120
-8
lines changed

‎ui/dev/src/pages/global/notify.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,9 @@ export default {
190190
191191
this.$q.notify.registerType('my-error', {
192192
icon: 'warning',
193-
color: 'purple',
193+
color: 'yellow',
194+
textColor: 'black',
195+
iconColor: 'blue',
194196
position: 'top'
195197
})
196198
@@ -263,7 +265,8 @@ export default {
263265
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
264266
attrs: {
265267
role: 'alertdialog'
266-
}
268+
},
269+
position: 'bottom-right'
267270
})
268271
this.$q.notify({
269272
message: 'You need to know about this!',
@@ -273,15 +276,17 @@ export default {
273276
textColor: 'black',
274277
multiLine: true,
275278
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
276-
actions: [ { label: 'Reply', handler: () => console.log('wooow'), attrs: { 'aria-label': 'Reply' } } ]
279+
actions: [ { label: 'Reply', handler: () => console.log('wooow'), attrs: { 'aria-label': 'Reply' } } ],
280+
position: 'bottom-right'
277281
})
278282
this.$q.notify({
279283
html: true,
280284
icon: 'map',
281285
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
282286
message: 'HTML; You need to know about this!',
283287
caption: 'This is a caption',
284-
timeout: 0
288+
timeout: 0,
289+
position: 'bottom-right'
285290
})
286291
this.$q.notify({
287292
html: true,
@@ -293,7 +298,8 @@ export default {
293298
textColor: 'black',
294299
multiLine: true,
295300
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
296-
actions: [ { label: 'Reply', handler: () => console.log('wooow') } ]
301+
actions: [ { label: 'Reply', handler: () => console.log('wooow') } ],
302+
position: 'bottom-right'
297303
})
298304
}
299305
}

‎ui/src/plugins/Notify.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,14 +397,20 @@ function getComponent () {
397397
if (meta.hasMedia === true) {
398398
if (notif.spinner !== false) {
399399
mainChild.push(
400-
h(notif.spinner, { class: 'q-notification__spinner q-notification__spinner--' + meta.leftClass })
400+
h(notif.spinner, {
401+
class: 'q-notification__spinner q-notification__spinner--' + meta.leftClass,
402+
color: notif.spinnerColor,
403+
size: notif.spinnerSize
404+
})
401405
)
402406
}
403407
else if (notif.icon) {
404408
mainChild.push(
405409
h(QIcon, {
406410
class: 'q-notification__icon q-notification__icon--' + meta.leftClass,
407411
name: notif.icon,
412+
color: notif.iconColor,
413+
size: notif.iconSize,
408414
role: 'img'
409415
})
410416
)

‎ui/src/plugins/Notify.json‎

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,16 @@
4343
"extends": "icon"
4444
},
4545

46+
"iconColor": {
47+
"extends": "color",
48+
"addedIn": "v2.5.5"
49+
},
50+
51+
"iconSize": {
52+
"extends": "size",
53+
"addedIn": "v2.5.5"
54+
},
55+
4656
"avatar": {
4757
"type": "String",
4858
"desc": "URL to an avatar/image; Suggestion: use public folder",
@@ -58,6 +68,16 @@
5868
"desc": "Useful for notifications that are updated; Displays the default Quasar spinner instead of an avatar or icon"
5969
},
6070

71+
"spinnerColor": {
72+
"extends": "color",
73+
"addedIn": "v2.5.5"
74+
},
75+
76+
"spinnerSize": {
77+
"extends": "size",
78+
"addedIn": "v2.5.5"
79+
},
80+
6181
"position": {
6282
"type": "String",
6383
"desc": "Window side/corner to stick to",
@@ -202,6 +222,16 @@
202222
"extends": "icon"
203223
},
204224

225+
"iconColor": {
226+
"extends": "color",
227+
"addedIn": "v2.5.5"
228+
},
229+
230+
"iconSize": {
231+
"extends": "size",
232+
"addedIn": "v2.5.5"
233+
},
234+
205235
"avatar": {
206236
"type": "String",
207237
"desc": "URL to an avatar/image; Suggestion: public folder",
@@ -218,6 +248,16 @@
218248
"examples": [ true, "QSpinnerBars" ]
219249
},
220250

251+
"spinnerColor": {
252+
"extends": "color",
253+
"addedIn": "v2.5.5"
254+
},
255+
256+
"spinnerSize": {
257+
"extends": "size",
258+
"addedIn": "v2.5.5"
259+
},
260+
221261
"position": {
222262
"type": "String",
223263
"desc": "Window side/corner to stick to",
@@ -388,6 +428,16 @@
388428
"extends": "icon"
389429
},
390430

431+
"iconColor": {
432+
"extends": "color",
433+
"addedIn": "v2.5.5"
434+
},
435+
436+
"iconSize": {
437+
"extends": "size",
438+
"addedIn": "v2.5.5"
439+
},
440+
391441
"avatar": {
392442
"type": "String",
393443
"desc": "URL to an avatar/image; Suggestion: use public folder",
@@ -404,6 +454,16 @@
404454
"__exemption": [ "examples" ]
405455
},
406456

457+
"spinnerColor": {
458+
"extends": "color",
459+
"addedIn": "v2.5.5"
460+
},
461+
462+
"spinnerSize": {
463+
"extends": "size",
464+
"addedIn": "v2.5.5"
465+
},
466+
407467
"progress": {
408468
"type": "Boolean",
409469
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)"
@@ -523,6 +583,16 @@
523583
"extends": "icon"
524584
},
525585

586+
"iconColor": {
587+
"extends": "color",
588+
"addedIn": "v2.5.5"
589+
},
590+
591+
"iconSize": {
592+
"extends": "size",
593+
"addedIn": "v2.5.5"
594+
},
595+
526596
"avatar": {
527597
"type": "String",
528598
"desc": "URL to an avatar/image; Suggestion: use public folder",
@@ -531,14 +601,24 @@
531601
"(relative path format) require('./my_img.jpg')",
532602
"(URL) https://some-site.net/some-img.gif"
533603
]
534-
},
604+
},
535605

536606
"spinner": {
537607
"type": [ "Boolean", "Component" ],
538608
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
539609
"__exemption": [ "examples" ]
540610
},
541611

612+
"spinnerColor": {
613+
"extends": "color",
614+
"addedIn": "v2.5.5"
615+
},
616+
617+
"spinnerSize": {
618+
"extends": "size",
619+
"addedIn": "v2.5.5"
620+
},
621+
542622
"position": {
543623
"type": "String",
544624
"desc": "Window side/corner to stick to",
@@ -706,6 +786,16 @@
706786
"extends": "icon"
707787
},
708788

789+
"iconColor": {
790+
"extends": "color",
791+
"addedIn": "v2.5.5"
792+
},
793+
794+
"iconSize": {
795+
"extends": "size",
796+
"addedIn": "v2.5.5"
797+
},
798+
709799
"avatar": {
710800
"type": "String",
711801
"desc": "URL to an avatar/image; Suggestion: use public folder",
@@ -714,14 +804,24 @@
714804
"(relative path format) require('./my_img.jpg')",
715805
"(URL) https://some-site.net/some-img.gif"
716806
]
717-
},
807+
},
718808

719809
"spinner": {
720810
"type": [ "Boolean", "Component" ],
721811
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
722812
"__exemption": [ "examples" ]
723813
},
724814

815+
"spinnerColor": {
816+
"extends": "color",
817+
"addedIn": "v2.5.5"
818+
},
819+
820+
"spinnerSize": {
821+
"extends": "size",
822+
"addedIn": "v2.5.5"
823+
},
824+
725825
"position": {
726826
"type": "String",
727827
"desc": "Window side/corner to stick to",

0 commit comments

Comments
 (0)