package.json

@@ -23,7 +23,7 @@
     "quasar": "^2.3.3"
   },
   "devDependencies": {
-    "@flaschengeist/types": "^1.0.0-alpha.5",
+    "@flaschengeist/types": "^1.0.0-alpha.6",
     "@quasar/app": "^3.2.3",
     "@quasar/extras": "^1.12.1",
     "@types/node": "^14.17.34",

quasar.conf.js

@@ -132,6 +132,7 @@ module.exports = configure(function (/* ctx */) {
       plugins: [
         'LocalStorage',
         'SessionStorage',
+        'Dialog',
         'Loading',
         'Notify',
         'LoadingBar'

src/components/Notification.vue

@@ -1,34 +1,53 @@
 <template>
   <q-card
     bordered
-    class="row q-ma-xs q-pa-xs"
     style="position: relative; min-height: 3em"
     :class="{ 'cursor-pointer': modelValue.link }"
     @click="click"
   >
-    <div class="col-12 text-weight-light">{{ dateString }}</div>
-    <div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
-    <q-btn
-      round
-      dense
-      icon="mdi-close"
-      size="sm"
-      color="negative"
-      class="q-ma-xs"
-      style="position: absolute; top: 0; right: 0"
-      @click="remove"
-    />
     <q-btn
       v-if="modelValue.accept !== undefined"
       round
       dense
-      icon="mdi-check"
+      icon="mdi-trash-can"
       size="sm"
-      color="positive"
+      color="negative"
       class="q-ma-xs"
-      style="position: absolute; top: 0; right: 3em"
+      title="Löschen"
+      style="position: absolute; top: 0; right: 0"
+      @click="dismiss"
+    />
+    <q-card-section class="q-pa-xs">
+      <div class="text-overline">{{ dateString }}</div>
+      <q-item style="padding: 1px">
+        <q-item-section v-if="modelValue.icon" side
+          ><q-icon color="primary" :name="modelValue.icon"
+        /></q-item-section>
+        <q-item-section>{{ modelValue.text }}</q-item-section>
+      </q-item>
+    </q-card-section>
+    <q-card-actions v-if="modelValue.reject || modelValue.accept">
+      <q-btn
+        v-if="modelValue.accept"
+        icon="mdi-check"
+        color="positive"
+        label="Annehmen"
+        flat
+        dense
+        size="sm"
         @click="accept"
       />
+      <q-btn
+        v-if="modelValue.reject"
+        icon="mdi-close"
+        color="negative"
+        label="Ablehnen"
+        flat
+        dense
+        size="sm"
+        @click="reject"
+      />
+    </q-card-actions>
   </q-card>
 </template>
 
@@ -63,13 +82,19 @@ export default defineComponent({
       else emit('remove', props.modelValue.id);
     }
 
-    function remove() {
+    function reject() {
       if (typeof props.modelValue.reject === 'function')
         void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
       else emit('remove', props.modelValue.id);
     }
 
-    return { accept, click, dateString, remove };
+    function dismiss() {
+      if (typeof props.modelValue.dismiss === 'function')
+        void props.modelValue.dismiss().finally(() => emit('remove', props.modelValue.id));
+      else emit('remove', props.modelValue.id);
+    }
+
+    return { accept, click, dateString, dismiss, reject };
   },
 });
 </script>

src/layouts/MainLayout.vue

@@ -18,7 +18,7 @@
           <q-badge color="negative" floating>
             {{ notifications.length }}
           </q-badge>
-          <q-menu style="max-height: 400px; overflow: auto">
+          <q-menu max-height="400px" style="min-width: 290px" class="q-pa-xs">
             <q-btn
               v-if="useNative && noPermission"
               label="Benachrichtigungen erlauben"