add chat base-button in header menu

webapp/components/Chat/Chat.vue

@@ -30,12 +30,12 @@ import { roomQuery } from '~/graphql/Rooms'
 import { messageQuery } from '~/graphql/Messages'
 
 export default {
-    name: 'Chat',
-    props: {
-        theme: {
-            type: String,
-        }
+  name: 'Chat',
+  props: {
+    theme: {
+      type: String,
     },
+  },
   data() {
     return {
       currentUserId: '1234',
@@ -126,27 +126,27 @@ export default {
 
   methods: {
     fetchMessages({ room, options = {} }) {
-      console.log(room, options)
+      // console.log(room, options)
       this.messagesLoaded = false
       setTimeout(async () => {
         if (options.reset) {
-          console.log('reset messages')
+          // console.log('reset messages')
           this.messages = [] // this.addMessages(true)
         } else {
           try {
             const {
-          data: { Message },
-        } = await this.$apollo.query({
+              data: { Message },
+            } = await this.$apollo.query({
               query: messageQuery(),
               variables: {
                 roomId: room.id,
-              }
+              },
             })
-            console.log('Messages', Message)
-                this.messages = Message
+            // console.log('Messages', Message)
+            this.messages = Message
           } catch (error) {
-            console.log('Error', error)
-            this.messages = [] //this.addMessages(true)
+            // console.log('Error', error)
+            this.messages = [] // this.addMessages(true)
             this.$toast.error(error.message)
           }
         }
@@ -217,10 +217,8 @@ export default {
         if (!Room) {
           this.rooms = []
           return
-        }  
-    
+        }
         this.rooms = Room
-       
       },
       error(error) {
         this.rooms = []

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -0,0 +1,67 @@
+<template>
+  <nuxt-link
+    class="chat-menu"
+    :to="{ name: 'chat' }"
+  >
+    <base-button
+      ghost
+      circle
+      v-tooltip="{
+        content: $t('notifications.headerMenuButton.chat'),
+        placement: 'bottom-start',
+      }"
+    ><img src="/img/empty/chat-bubble.svg"/>
+    </base-button>
+  
+  </nuxt-link>
+  
+</template>
+
+<script>
+ 
+
+export default {
+  name: 'ChatMenu',
+ 
+}
+</script>
+
+<style lang="scss">
+.counter-icon {
+  position: relative;
+
+  > .count {
+    position: absolute;
+    top: -$space-xx-small;
+    right: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: $size-icon-base;
+    min-width: $size-icon-base;
+    padding: 3px; // magic number to center count
+    border-radius: 50%;
+    transform: translateX(50%);
+
+    color: $color-neutral-100;
+    background-color: $color-primary;
+    font-size: 10px; // magic number to center count
+    line-height: 1;
+    text-align: center;
+
+    &.--danger {
+      background-color: $color-danger;
+    }
+
+    &.--inactive {
+      background-color: $color-neutral-60;
+    }
+
+    &.--soft {
+      background-color: $color-neutral-90;
+      color: $text-color-soft;
+    }
+  }
+}
+</style>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -92,6 +92,10 @@
               <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
                 <map-button />
               </client-only>
+              <!-- chat menü -->
+              <client-only>
+                <chat-notification-menu placement="top" />
+              </client-only>
               <!-- avatar menu -->
               <client-only>
                 <avatar-menu placement="top" />
@@ -265,6 +269,7 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 
 export default {
   components: {
@@ -278,6 +283,7 @@ export default {
     NotificationMenu,
     PageParamsLink,
     SearchField,
+    ChatNotificationMenu,
   },
   props: {
     showMobileMenu: { type: Boolean, default: false },

webapp/graphql/Messages.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 export const messageQuery = () => {
   return gql`
-    query($roomId: ID!) {
+    query ($roomId: ID!) {
       Message(roomId: $roomId) {
         id
         content
@@ -13,4 +13,3 @@ export const messageQuery = () => {
     }
   `
 }
-

webapp/graphql/Rooms.js

@@ -1,12 +1,12 @@
 import gql from 'graphql-tag'
 
 export const roomQuery = () => gql`
- query {
-        Room {
-          id
-          users {
-            id
-          }
-        }
+  query {
+    Room {
+      id
+      users {
+        id
       }
+    }
+  }
 `

webapp/locales/de.json

@@ -692,7 +692,8 @@
     },
     "group": "Beschreibung",
     "headerMenuButton": {
-      "tooltip": "Meine Benachrichtigungen"
+      "tooltip": "Meine Benachrichtigungen",
+      "chat": "Meine Chat"
     },
     "markAllAsRead": "Markiere alle als gelesen",
     "pageLink": "Alle Benachrichtigungen",

webapp/locales/en.json

@@ -692,7 +692,8 @@
     },
     "group": "Description",
     "headerMenuButton": {
-      "tooltip": "My notifications"
+      "tooltip": "My notifications",
+      "chat": "My Chat"
     },
     "markAllAsRead": "Mark all as read",
     "pageLink": "All notifications",

webapp/pages/chat.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-     <chat :theme="theme"/>
-     <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
-        change style mode
-      </base-button>
+    <chat :theme="theme" />
+    <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
+      change style mode
+    </base-button>
   </div>
 </template>
 

webapp/plugins/vue-advanced-chat.js

@@ -1,7 +1,6 @@
 import { register } from 'vue-advanced-chat'
 export default ({ app }) => {
-    if(process.client){
-        register()
-    }
+  if (process.client) {
+    register()
+  }
 }
-

webapp/static/img/empty/chat-bubble.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="chat-bubble"><g data-name="Chat"><path fill="#9B9B9B" d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path fill="#9B9B9B" d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g></svg>