Follow @alina-beck and @Tirokk suggestions

- following PR reviews

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -9,14 +9,14 @@
       </ds-button>
     </template>
     <template slot="popover">
+      <ds-space centered>
+        <ds-button primary fullwidth :path="{ name: 'notifications' }">
+          {{ $t('notifications.pageLink') }}
+        </ds-button>
+      </ds-space>
       <div class="notifications-menu-popover">
         <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
-      <ds-space centered>
-        <nuxt-link to="/notifications">
-          {{ $t('notifications.pageLink') }}
-        </nuxt-link>
-      </ds-space>
     </template>
   </dropdown>
 </template>
@@ -113,7 +113,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .notifications-menu {
   display: flex;
   align-items: center;
@@ -122,4 +122,13 @@ export default {
 .notifications-menu-popover {
   max-width: 500px;
 }
+.link-bg {
+  position: sticky;
+  width: 100%;
+  background-color: $background-color-primary-active;
+  text-align: center;
+}
+.notifications-link {
+  color: $text-color-softer;
+}
 </style>

webapp/locales/de.json

@@ -185,7 +185,8 @@
       "all": "Alle",
       "read": "Lesen  ",
       "unread": "Ungelesen"
-    }
+    },
+    "empty": "Sorry, du hast im Moment keine Benachrichtigungen."
   },
   "search": {
     "placeholder": "Suchen",
@@ -684,7 +685,7 @@
     "terms-of-service": {
       "title": "Nutzungsbedingungen",
       "description": "Die folgenden Nutzungsbedingungen sind Basis für die Nutzung unseres Netzwerkes. Beim Registrieren musst Du sie anerkennen und wir werden Dich auch später über ggf. stattfindende Änderungen informieren. Das Human Connection Netzwerk wird in Deutschland betrieben und unterliegt daher deutschem Recht. Gerichtsstand ist Kirchheim / Teck. Zu Details schau in unser Impressum: <a href=\"https://human-connection.org/impressum\" target=\"_blank\" >https://human-connection.org/impressum</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Nutzung und Lizenz",
       "description": "Sind Inhalte, die Du bei uns einstellst, durch Rechte am geistigen Eigentum geschützt, erteilst Du uns eine nicht-exklusive, übertragbare, unterlizenzierbare und weltweite Lizenz für die Nutzung dieser Inhalte für die Bereitstellung in unserem Netzwerk. Diese Lizenz endet, sobald Du Deine Inhalte oder Deinen ganzen Account löscht. Bedenke, dass andere Deine Inhalte weiter teilen können und wir diese nicht löschen können."
@@ -712,6 +713,6 @@
     "addition" : {
       "title": "Zusätzliche machen wir regelmäßig Veranstaltungen, wo Du auch Eindrücke wiedergeben und Fragen stellen kannst. Du findest eine aktuelle Übersicht hier:",
       "description": "<a href=\"https://human-connection.org/veranstaltungen/\" target=\"_blank\" > https://human-connection.org/veranstaltungen/ </a>"
-    } 
+    }
   }
 }

webapp/locales/en.json

@@ -186,7 +186,8 @@
       "all": "All",
       "read": "Read",
       "unread": "Unread"
-    }
+    },
+    "empty": "Sorry, you don't have any notifications at the moment."
   },
   "search": {
     "placeholder": "Search",
@@ -685,7 +686,7 @@
     "terms-of-service": {
       "title": "Terms of Service",
       "description": "The following terms of use form the basis for the use of our network. When you register, you must accept them and we will inform you later about any changes that may take place. The Human Connection Network is operated in Germany and is therefore subject to German law. Place of jurisdiction is Kirchheim / Teck. For details see our imprint: <a href=\"https://human-connection.org/imprint\" target=\"_blank\" >https://human-connection.org/imprint</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Use and License",
       "description": "If any content you post to us is protected by intellectual property rights, you grant us a non-exclusive, transferable, sublicensable, worldwide license to use such content for posting to our network. This license expires when you delete your content or your entire account. Remember that others may share your content and we cannot delete it."
@@ -713,10 +714,10 @@
     "addition" : {
       "title": "In addition, we regularly hold events where you can also share your impressions and ask questions. You can find a current overview here:",
       "description": "<a href=\"https://human-connection.org/events/\" target=\"_blank\" > https://human-connection.org/events/ </a>"
-    } 
+    }
   }
 }
 
- 
- 
- 
+
+
+

webapp/pages/notifications/index.vue

@@ -44,19 +44,35 @@
       :fields="fields"
       class="notifications-table"
     >
+      <template slot="icon" slot-scope="scope">
+        <ds-icon
+          v-if="scope.row.from.post"
+          name="comment"
+          v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
+        />
+        <ds-icon
+          v-else
+          name="bookmark"
+          v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
+        />
+      </template>
       <template slot="user" slot-scope="scope">
         <ds-space margin-bottom="base">
           <hc-user
             :user="scope.row.from.author"
             :date-time="scope.row.from.createdAt"
             :trunc="35"
+            :class="{ 'notification-status': scope.row.read }"
           />
         </ds-space>
-        {{ $t(`notifications.reason.${scope.row.reason}`) }}
+        <ds-text :class="{ 'notification-status': scope.row.read }">
+          {{ $t(`notifications.reason.${scope.row.reason}`) }}
+        </ds-text>
       </template>
       <template slot="post" slot-scope="scope">
         <nuxt-link
           class="notification-mention-post"
+          :class="{ 'notification-status': scope.row.read }"
           :to="{
             name: 'post-id-slug',
             params: {
@@ -71,16 +87,18 @@
             },
             hash: scope.row.from.__typename === 'Comment' ? `#commentId-${scope.row.from.id}` : {},
           }"
-          @click.native="$emit('read')"
+          @click.native="markNotificationAsRead(scope.row.from.id)"
         >
           <b>{{ scope.row.from.title || scope.row.from.post.title | truncate(50) }}</b>
         </nuxt-link>
       </template>
       <template slot="content" slot-scope="scope">
-        <b>{{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}</b>
+        <b :class="{ 'notification-status': scope.row.read }">
+          {{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}
+        </b>
       </template>
     </ds-table>
-    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+    <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
   </ds-card>
 </template>
 
@@ -88,7 +106,7 @@
 import HcUser from '~/components/User/User'
 import HcEmpty from '~/components/Empty.vue'
 import Dropdown from '~/components/Dropdown'
-import { notificationQuery } from '~/graphql/User'
+import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 
 export default {
   components: {
@@ -111,7 +129,14 @@ export default {
   computed: {
     fields() {
       return {
-        user: this.$t('notifications.user'),
+        icon: {
+          label: ' ',
+          width: '60px',
+        },
+        user: {
+          label: this.$t('notifications.user'),
+          width: '350px',
+        },
         post: this.$t('notifications.post'),
         content: this.$t('notifications.content'),
       }
@@ -133,6 +158,16 @@ export default {
       this.$apollo.queries.notifications.refresh()
       toggleMenu()
     },
+    async markNotificationAsRead(notificationSourceId) {
+      try {
+        await this.$apollo.mutate({
+          mutation: markAsReadMutation(this.$i18n),
+          variables: { id: notificationSourceId },
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
   },
   apollo: {
     notifications: {
@@ -160,7 +195,8 @@ export default {
 .sorting-dropdown {
   float: right;
 }
-.notifications-table td {
-  width: 500px;
+.notification-status {
+  opacity: 0.6; /* Real browsers */
+  filter: alpha(opacity = 60); /* MSIE */
 }
 </style>