Merge pull request #6185 from Ocelot-Social-Community/6184-add-tooltips-to-all-menu-icons

feat(webapp): add tooltips to all menu icons

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -11,7 +11,15 @@
         "
         @click.prevent="toggleMenu"
       >
-        <profile-avatar :profile="user" size="small" />
+        <profile-avatar
+          :profile="user"
+          size="small"
+          :showProfileNameTitle="false"
+          v-tooltip="{
+            content: $t('header.avatarMenu.button.tooltip'),
+            placement: 'bottom-start',
+          }"
+        />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -80,7 +88,7 @@ export default {
           icon: 'user',
         },
         {
-          name: this.$t('header.avatarMenu.Groups'),
+          name: this.$t('header.avatarMenu.groups'),
           path: '/groups',
           icon: 'users',
         },

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -2,7 +2,15 @@
   <client-only>
     <dropdown ref="menu" :placement="placement" :offset="offset">
       <template #default="{ toggleMenu }">
-        <a class="locale-menu" href="#" @click.prevent="toggleMenu()">
+        <a
+          class="locale-menu"
+          href="#"
+          v-tooltip="{
+            content: $t('localeSwitch.tooltip'),
+            placement: 'bottom-start',
+          }"
+          @click.prevent="toggleMenu()"
+        >
           <!-- <base-icon name="globe" /> -->
           <span class="label">{{ current.code.toUpperCase() }}</span>
           <base-icon class="dropdown-arrow" name="angle-down" />

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -4,11 +4,27 @@
     class="notifications-menu"
     :to="{ name: 'notifications' }"
   >
-    <base-button icon="bell" ghost circle />
+    <base-button
+      icon="bell"
+      ghost
+      circle
+      v-tooltip="{
+        content: $t('notifications.headerMenuButton.tooltip'),
+        placement: 'bottom-start',
+      }"
+    />
   </nuxt-link>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
     <template #default="{ toggleMenu }">
-      <base-button @click="toggleMenu" ghost circle>
+      <base-button
+        ghost
+        circle
+        v-tooltip="{
+          content: $t('notifications.headerMenuButton.tooltip'),
+          placement: 'bottom-start',
+        }"
+        @click="toggleMenu"
+      >
         <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
       </base-button>
     </template>

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue

@@ -8,7 +8,7 @@
       :src="profile.avatar | proxyApiUrl"
       class="image"
       :alt="profile.name"
-      :title="profile.name"
+      :title="showProfileNameTitle ? profile.name : ''"
       @error="$event.target.style.display = 'none'"
     />
   </div>
@@ -29,6 +29,10 @@ export default {
       type: Object,
       default: null,
     },
+    showProfileNameTitle: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isAnonymous() {

webapp/locales/de.json

@@ -510,7 +510,10 @@
   },
   "header": {
     "avatarMenu": {
-      "Groups": "Gruppen",
+      "button": {
+        "tooltip": "Mein Profil"
+      },
+      "groups": "Gruppen",
       "myProfile": "Mein Profil"
     }
   },
@@ -520,13 +523,16 @@
   },
   "invite-codes": {
     "button": {
-      "tooltip": "Lade deine Freunde ein"
+      "tooltip": "Freunde einladen"
     },
     "copy-code": "Einladungslink kopieren",
     "copy-success": "Einladungscode erfolgreich in die Zwischenablage kopiert",
     "not-available": "Du hast keinen Einladungscode zur Verfügung!",
     "your-code": "Sende diesen Link per E-Mail oder in sozialen Medien, um deine Freunde einzuladen:"
   },
+  "localeSwitch": {
+    "tooltip": "Sprache wählen"
+  },
   "login": {
     "email": "Deine E-Mail",
     "failure": "Fehlerhafte E-Mail-Adresse oder Passwort.",
@@ -648,6 +654,9 @@
       "unread": "Ungelesen"
     },
     "group": "Beschreibung",
+    "headerMenuButton": {
+      "tooltip": "Meine Benachrichtigungen"
+    },
     "markAllAsRead": "Markiere alle als gelesen",
     "pageLink": "Alle Benachrichtigungen",
     "post": "Beitrag oder Gruppe",

webapp/locales/en.json

@@ -510,7 +510,10 @@
   },
   "header": {
     "avatarMenu": {
-      "Groups": "Groups",
+      "button": {
+        "tooltip": "My profile"
+      },
+      "groups": "Groups",
       "myProfile": "My profile"
     }
   },
@@ -520,13 +523,16 @@
   },
   "invite-codes": {
     "button": {
-      "tooltip": "Invite your friends"
+      "tooltip": "Invite friends"
     },
     "copy-code": "Copy Invite Link",
     "copy-success": "Invite code copied to clipboard",
     "not-available": "You have no valid invite code available!",
     "your-code": "Send this link per e-mail or in social media to invite your friends:"
   },
+  "localeSwitch": {
+    "tooltip": "Choose language"
+  },
   "login": {
     "email": "Your E-mail",
     "failure": "Incorrect email address or password.",
@@ -648,6 +654,9 @@
       "unread": "Unread"
     },
     "group": "Description",
+    "headerMenuButton": {
+      "tooltip": "My notifications"
+    },
     "markAllAsRead": "Mark all as read",
     "pageLink": "All notifications",
     "post": "Post or Group",