merged master

webapp/assets/_new/icons/svgs/chat-bubble.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chat-bubble</title>
+<g data-name="Chat"><path 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 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>

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -1,140 +1,25 @@
 <template>
-  <nuxt-link v-if="!unreadChatNotificationsCount" class="chat-menu" :to="{ name: 'chat' }">
+  <nuxt-link class="chat-notification-menu" :to="{ name: 'chat' }">
     <base-button
       ghost
       circle
       v-tooltip="{
-        content: $t('notifications.headerMenuButton.chat'),
+        content: $t('header.chat.tooltip'),
         placement: 'bottom-start',
       }"
     >
-      <img src="/img/empty/chat-bubble.svg" />
+      <counter-icon icon="chat-bubble" :count="1" danger />
     </base-button>
   </nuxt-link>
-  <dropdown v-else class="chat-notifications-menu" offset="8">
-    <template #default="{ toggleMenu }">
-      <base-button
-        ghost
-        circle
-        v-tooltip="{
-          content: $t('notifications.headerMenuButton.tooltip'),
-          placement: 'bottom-start',
-        }"
-        @click="toggleMenu"
-      >
-        <counter-icon icon="envelope" :count="unreadChatNotificationsCount" danger />
-        <img src="/img/empty/chat-bubble.svg" />
-      </base-button>
-    </template>
-    <template #popover="{}">
-      <div class="chat-notifications-menu-popover">
-        <div v-for="notification in notifications" v-bind:key="notification.roomid">
-          <ds-space>
-            <div
-              class="chat-notifications-menu-popover-item"
-              @click="
-                $store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: notification.roomid })
-              "
-            >
-              <p>{{ notification.name }}</p>
-              {{ notification.title }}
-            </div>
-          </ds-space>
-        </div>
-        <!-- <notification-list :notifications="notifications" /> -->
-      </div>
-      <ds-flex class="chat-notifications-link-container">
-        <ds-flex-item
-          class="chat-notifications-link-container-item"
-          :width="{ base: '100%' }"
-          centered
-        >
-          <nuxt-link :to="{ name: 'chat' }">
-            <base-button ghost primary>All Chat Messages</base-button>
-          </nuxt-link>
-        </ds-flex-item>
-      </ds-flex>
-    </template>
-  </dropdown>
 </template>
 
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import Dropdown from '~/components/Dropdown'
-// import NotificationList from '../NotificationList/NotificationList'
 
 export default {
   name: 'ChatNotificationMenu',
   components: {
     CounterIcon,
-    Dropdown,
-    // NotificationList,
-  },
-  data() {
-    return {
-      notifications: [
-        { roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny' },
-        { roomid: 'u2', name: 'Honey', title: 'last Message from Honey' },
-        { roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister' },
-      ],
-    }
-  },
-  computed: {
-    unreadChatNotificationsCount() {
-      const result = this.notifications.reduce((count, notification) => {
-        return notification.read ? count : count + 1
-      }, 0)
-      return result
-    },
-    hasNotifications() {
-      return this.notifications.length
-    },
   },
 }
 </script>
-<style lang="scss">
-.chat-notifications-menu {
-  max-width: 500px;
-}
-.vue-popover-theme {
-  z-index: 1000000;
-}
-
-.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

@@ -74,6 +74,10 @@
             <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
             <template v-if="isLoggedIn">
+              <!-- chat menu -->
+              <client-only>
+                <chat-notification-menu placement="top" />
+              </client-only>
               <!-- notification menu -->
               <client-only>
                 <notification-menu placement="top" />
@@ -92,10 +96,6 @@
               <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" />
@@ -131,10 +131,16 @@
           <!-- mobile hamburger menu -->
           <ds-flex-item class="mobile-hamburger-menu">
             <client-only>
+              <!-- chat menu -->
+              <div style="display: inline-flex">
+                <chat-notification-menu />
+              </div>
+              <!-- notification menu -->
               <div style="display: inline-flex; padding-right: 20px">
                 <notification-menu />
               </div>
             </client-only>
+            <!-- hamburger menu -->
             <base-button icon="bars" @click="toggleMobileMenuView" circle />
           </ds-flex-item>
         </ds-flex>
@@ -257,10 +263,11 @@ import isEmpty from 'lodash/isEmpty'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
 import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logos.js'
-import headerMenu from '~/constants/headerMenu.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import GroupButton from '~/components/Group/GroupButton'
+import headerMenu from '~/constants/headerMenu.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -269,7 +276,6 @@ 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: {

webapp/locales/de.json

@@ -89,7 +89,11 @@
     "roomEmpty": "Keinen Raum selektiert",
     "roomsEmpty": "Keine Räume",
     "search": "Suche",
-    "typeMessage": "Nachricht schreiben"
+    "typeMessage": "Nachricht schreiben",
+    "userProfileButton": {
+      "label": "Chat",
+      "tooltip": "Chatte mit „{name}“"
+    }
   },
   "client-only": {
     "loading": "Lade …"
@@ -566,6 +570,9 @@
       },
       "groups": "Gruppen",
       "myProfile": "Mein Profil"
+    },
+    "chat": {
+      "tooltip": "Meine Chats"
     }
   },
   "index": {
@@ -705,10 +712,6 @@
       "unread": "Ungelesen"
     },
     "group": "Beschreibung",
-    "headerMenuButton": {
-      "chat": "Meine Chat",
-      "tooltip": "Meine Benachrichtigungen"
-    },
     "markAllAsRead": "Markiere alle als gelesen",
     "pageLink": "Alle Benachrichtigungen",
     "post": "Beitrag oder Gruppe",

webapp/locales/en.json

@@ -89,7 +89,11 @@
     "roomEmpty": "No room selected",
     "roomsEmpty": "No rooms",
     "search": "Search",
-    "typeMessage": "Type message"
+    "typeMessage": "Type message",
+    "userProfileButton": {
+      "label": "Chat",
+      "tooltip": "Chat with “{name}”"
+    }
   },
   "client-only": {
     "loading": "Loading …"
@@ -566,6 +570,9 @@
       },
       "groups": "Groups",
       "myProfile": "My profile"
+    },
+    "chat": {
+      "tooltip": "My chats"
     }
   },
   "index": {
@@ -705,10 +712,6 @@
       "unread": "Unread"
     },
     "group": "Description",
-    "headerMenuButton": {
-      "chat": "My Chat",
-      "tooltip": "My notifications"
-    },
     "markAllAsRead": "Mark all as read",
     "pageLink": "All notifications",
     "post": "Post or Group",

webapp/pages/profile/_id/_slug.vue

@@ -80,13 +80,14 @@
               @update="updateFollow"
             />
             <base-button
-              @click="$store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: user.id })"
+              icon="chat-bubble"
               v-tooltip="{
-                content: $t('notifications.headerMenuButton.chat'),
+                content: $t('chat.userProfileButton.tooltip', { name: userName }),
                 placement: 'bottom-start',
               }"
+              @click="showChat({ showChat: true, roomID: user.id })"
             >
-              <img src="/img/empty/chat-bubble.svg" height="20" />
+              {{ $t('chat.userProfileButton.label') }}
             </base-button>
           </div>
           <template v-if="user.about">
@@ -181,6 +182,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
+import { mapMutations } from 'vuex'
 import postListActions from '~/mixins/postListActions'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/Button/FollowButton'
@@ -290,6 +292,10 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      commitModalData: 'modal/SET_OPEN',
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
     handleTab(tab) {
       if (this.tabActive !== tab) {
         this.tabActive = tab
@@ -365,7 +371,7 @@ export default {
       }
     },
     async deleteUser(userdata) {
-      this.$store.commit('modal/SET_OPEN', {
+      this.commitModalData({
         name: 'delete',
         data: {
           userdata: userdata,

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

@@ -1 +0,0 @@
-<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>