Resolve "[Vue] Notifications look ugly"

Closes #740 (closed)

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

@@ -4,29 +4,76 @@
     :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-avatar>
+          <v-icon
+            :class="
+              notification.read ? 'grey lighten-1' : 'primary white--text'
+            "
+            dark
+          >
+            mdi-{{ notification.icon.toLowerCase().replaceAll("_", "-") }}
+          </v-icon>
+        </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title>{{ notification.title }}</v-list-item-title>
+          <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="font-weight-regular">
+            {{ notification.description }}
           </v-list-item-subtitle>
 
-          <v-list-item-subtitle>
-            {{ notification.description }}
+          <v-list-item-subtitle class="caption font-weight-regular">
+            <v-chip x-small outlined>{{ notification.sender }}</v-chip>
+            ·
+            <v-tooltip bottom>
+              <template #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-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 #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 #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 +87,19 @@ 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>