Resolve "[Vue] Notifications look ugly"

Closes #740 (closed)

aleksis/core/assets/components/notifications/NotificationItem.vue

@@ -4,13 +4,25 @@
     :variables="{ id: this.notification.id }"
   >
     <template #default="{ mutate, loading, error }">
-      <v-list-item v-intersect="mutate">
+      <v-list-item :input-value="!notification.read">
+
         <v-list-item-content>
           <v-list-item-title>{{ notification.title }}</v-list-item-title>
 
-          <v-list-item-subtitle>
-            <v-icon>mdi-clock-outline</v-icon>
-            {{ notification.created }}
+          <v-list-item-subtitle class="caption">
+            <v-chip color="primary" label x-small outlined>{{ notification.sender }}</v-chip>
+
+            <v-icon>mdi-circle-small</v-icon>
+
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <span
+                  v-bind="attrs"
+                  v-on="on"
+                >{{ $d(new Date(notification.created), dateFormat(new Date(notification.created))) }}</span>
+              </template>
+              <span>{{ $d(new Date(notification.created), "long") }}</span>
+            </v-tooltip>
           </v-list-item-subtitle>
 
           <v-list-item-subtitle>
@@ -18,15 +30,39 @@
           </v-list-item-subtitle>
         </v-list-item-content>
 
-        <v-list-item-action v-if="notification.link">
-          <v-btn text :href="notification.link">
-            {{ $t("notifications.more_information") }} →
-          </v-btn>
-        </v-list-item-action>
+        <v-list-item-action>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                color="secondary"
+                v-if="!notification.read"
+                @click="mutate"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-email-outline</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $t("notifications.mark_as_read") }}</span>
+          </v-tooltip>
 
-        <v-list-item-icon>
-          <v-chip color="primary">{{ notification.sender }}</v-chip>
-        </v-list-item-icon>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                color="accent"
+                :href="notification.link"
+                v-if="notification.link"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-open-in-new</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $t("notifications.more_information") }}</span>
+          </v-tooltip>
+        </v-list-item-action>
       </v-list-item>
     </template>
   </ApolloMutation>
@@ -40,5 +76,15 @@ export default {
       required: true,
     },
   },
+  methods: {
+    dateFormat(date) {
+      let now = new Date();
+      if (now.getFullYear() === date.getFullYear() && now.getMonth() === date.getMonth() && now.getDate() === date.getDate()) {
+        return "timeOnly"
+      } else {
+        return "short"
+      }
+    }
+  }
 };
 </script>