I want to replicate a notification function in DB2. I have a button with icon and badge teleported to the app-bar. The button is the activator to the menu that appears to show the notifications:
The notification area uses a v-card so I can also add buttons like the Dismiss All button. The issue is that the v-card picks up the navigation color as the background color from the DB2.
But this is something I noticed already when I was working on my weather cards, and I was able to fix it by manually setting the color="white". And I did the same here, but it seems to have no affect.
<template>
<Teleport v-if="mounted" to="#app-bar-actions">
<v-menu>
<template v-slot:activator="{ props }">
<v-btn variant="tonal" rounded="xl" size="large" v-bind="props">
<v-badge :content="counter" color="error" offset-x="-10" offset-y="-5">
<v-icon>mdi-message-badge-outline</v-icon>
</v-badge>
</v-btn>
</template>
<v-card min-width="300" color="white">
<v-list lines="two">
<v-list-item
v-for="(item, index) in items"
:key="index"
:value="index"
:title="item.title"
:subtitle="item.subtitle"
:prepend-icon="item.icon"
@click="send({topic: 'selected', payload: item})">
</v-list-item>
</v-list>
<v-divider inset></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn prepend-icon="mdi-check-all" @click="send({topic: 'dismissall', payload: ''})">Dismiss All</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</Teleport>
</template>
<script>
export default {
data() {
return {
mounted: false,
counter: 0,
items: [],
}
},
mounted() {
this.mounted = true,
this.counter = 0
},
watch: {
msg: function(){
if(this.msg.payload != undefined) {
this.items = this.msg.payload;
this.counter = this.items.length;
}
}
}
}
</script>
Is this related to the fact that the teleport ties these to the app-bar?
Here is the flow if you want to try:
[{"id":"740c215e596fd18a","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Settings button","order":0,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" @click=\"send({payload: 'clicked'})\">\n <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n <v-icon>mdi-wrench</v-icon>\n </v-badge>\n </v-btn>\n </Teleport>\n</template>\n<script>\n export default {\n data() {\n return {\n mounted: false,\n counter: 0\n }\n },\n mounted() {\n this.mounted = true,\n this.counter = 0\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined){ \n this.counter = this.msg.payload \n }\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":430,"y":4220,"wires":[["1c5e386ecbadd53c"]]},{"id":"1c5e386ecbadd53c","type":"debug","z":"0e3249ddee2000e3","name":"debug 351","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":4220,"wires":[]},{"id":"41867275b1c218b0","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":190,"y":4220,"wires":[["740c215e596fd18a"]]},{"id":"699a43faa5a7d694","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":190,"y":4260,"wires":[["740c215e596fd18a"]]},{"id":"aff916b303023c4c","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Notification button","order":0,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <v-menu>\n <template v-slot:activator=\"{ props }\">\n <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" v-bind=\"props\">\n <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n <v-icon>mdi-message-badge-outline</v-icon>\n </v-badge>\n </v-btn>\n </template>\n <v-card min-width=\"300\" color=\"white\">\n <v-list lines=\"two\">\n <v-list-item \n v-for=\"(item, index) in items\" \n :key=\"index\" \n :value=\"index\"\n :title=\"item.title\"\n :subtitle=\"item.subtitle\"\n :prepend-icon=\"item.icon\"\n @click=\"send({topic: 'selected', payload: item})\">\n </v-list-item>\n \n </v-list>\n <v-divider inset></v-divider>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn prepend-icon=\"mdi-check-all\" @click=\"send({topic: 'dismissall', payload: ''})\">Dismiss All</v-btn>\n </v-card-actions>\n </v-card>\n </v-menu>\n </Teleport>\n</template>\n<script>\n export default {\n data() {\n return {\n mounted: false,\n counter: 0,\n items: [],\n }\n },\n mounted() {\n this.mounted = true,\n this.counter = 0\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined) { \n this.items = this.msg.payload;\n this.counter = this.items.length; \n }\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":430,"y":4320,"wires":[["1c5e386ecbadd53c"]]},{"id":"823c370f6524821b","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":0,\"title\":\"Device offline\",\"subtitle\":\"Device ESP32 offline since 10:34\",\"icon\":\"mdi-rss-off\"},{\"id\":1,\"title\":\"Weather alert\",\"subtitle\":\"Thunderstorm alert between 20:00 and 22:00\",\"icon\":\"mdi-lightning-bolt\"},{\"id\":2,\"title\":\"Rain report\",\"subtitle\":\"14mm rain fell in the last 24 hours\",\"icon\":\"mdi-weather-pouring\",\"action\":\"dismiss\"}]","payloadType":"json","x":180,"y":4320,"wires":[["aff916b303023c4c"]]},{"id":"729ea5699cb6f3ac","type":"ui-page","name":"Template examples","ui":"cb79bc4520925e32","path":"/templates","icon":"home","layout":"notebook","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
