changed sidenav, notification icons and added settings to topbar noti…

…fications (#1987)

* changed sidenav, notification icons and added settings to topbar

* few fixes

* badge next to expandable Show More

* storyshots

* show more button aligned

* simplified to entries="entriesMore"

* fixed cog on message notifications

* test

Co-authored-by: Nick Sellen <git@nicksellen.co.uk>

src/group/pages/Description.vue

@@ -19,7 +19,7 @@
         small
         round
         color="secondary"
-        :icon="showPublicDescription ? 'fas fa-lock' : 'fas fa-info-circle'"
+        :icon="showPublicDescription ? 'fas fa-lock' : 'fas fa-eye'"
         :title="$t(showPublicDescription ? 'GROUP.DESCRIPTION_VERBOSE' : 'GROUPINFO.META')"
         @click="showPublicDescription = !showPublicDescription"
       />

src/messages/components/LatestMessageItem.vue

@@ -93,7 +93,7 @@
             size="12px"
             color="grey"
             class="q-ml-xs"
-            name="fas fa-fw fa-bell-slash"
+            name="fas fa-fw fa-bell"
             :title="$t('CONVERSATION.MUTED')"
           />
           <QIcon

src/messages/components/LatestMessages.vue

@@ -1,25 +1,34 @@
 <template>
   <div class="bg-white">
-    <QTabs
-      v-model="selected"
-      class="k-message-tabs"
-      align="left"
-    >
-      <Component
-        :is="asPage ? 'QRouteTab' : 'QTab'"
-        name="conversations"
-        :to="{ name: 'latestConversations' }"
-        :label="$t('CONVERSATION.CONVERSATIONS')"
-        :count="unseenConversationsCount > 9 ? '9+' : unseenConversationsCount"
-      />
-      <Component
-        :is="asPage ? 'QRouteTab' : 'QTab'"
-        name="threads"
-        :to="{ name: 'latestThreads' }"
-        :label="$t('CONVERSATION.REPLIES')"
-        :count="unseenThreadsCount > 9 ? '9+' : unseenThreadsCount"
+    <div class="flex">
+      <QTabs
+        v-model="selected"
+        class="k-message-tabs col-grow"
+        align="left"
+      >
+        <Component
+          :is="asPage ? 'QRouteTab' : 'QTab'"
+          name="conversations"
+          :to="{ name: 'latestConversations' }"
+          :label="$t('CONVERSATION.CONVERSATIONS')"
+          :count="unseenConversationsCount > 9 ? '9+' : unseenConversationsCount"
+        />
+        <Component
+          :is="asPage ? 'QRouteTab' : 'QTab'"
+          name="threads"
+          :to="{ name: 'latestThreads' }"
+          :label="$t('CONVERSATION.REPLIES')"
+          :count="unseenThreadsCount > 9 ? '9+' : unseenThreadsCount"
+        />
+      </QTabs>
+      <QBtn
+        flat
+        round
+        icon="fas fa-cog"
+        :title="$t('SETTINGS.TITLE')"
+        :to="{ name: 'settings', hash: '#notifications' }"
       />
-    </QTabs>
+    </div>
     <RouterView
       v-if="asPage"
     />
@@ -42,6 +51,7 @@
 import { mapGetters } from 'vuex'
 
 import {
+  QBtn,
   QTabs,
   QTab,
   QRouteTab,
@@ -51,6 +61,7 @@ import LatestThreads from './LatestThreads'
 
 export default {
   components: {
+    QBtn,
     QTabs,
     QTab,
     QRouteTab,

src/messages/components/NotificationToggle.vue

@@ -119,15 +119,15 @@ export default {
           id: 'all',
           label: this.$t('NOTIFICATION_TOGGLE.ALL'),
           sublabel: this.$t('NOTIFICATION_TOGGLE.ALL_TEXT'),
-          icon: 'fas fa-fw fa-bell',
+          icon: 'fas fa-fw fa-envelope',
           color: 'secondary',
           selected: this.isParticipant && !this.muted,
         },
         {
           id: 'muted',
           label: this.$t('NOTIFICATION_TOGGLE.SOME'),
           sublabel: this.$t('NOTIFICATION_TOGGLE.SOME_TEXT'),
-          icon: 'fas fa-fw fa-bell-slash',
+          icon: 'fas fa-fw fa-bell',
           color: 'grey-8',
           selected: this.muted,
         },

src/sidenav/components/GroupOptionsUI.vue

@@ -67,15 +67,6 @@ export default {
         label: this.$t('GROUP.MANAGE_AGREEMENT'),
         icon: 'fas fa-file-alt fa-fw',
         to: { name: 'groupManageAgreement', params: { groupId: this.currentGroupId } },
-      }, {
-        label: this.$t('GROUPINFO.META'),
-        icon: 'fas fa-info-circle fa-fw',
-        to: { name: 'groupPreview', params: { groupPreviewId: this.currentGroupId } },
-      }, {
-        condition: this.isEditor,
-        label: this.$t('GROUP.INVITE_TITLE'),
-        icon: 'fas fa-user-plus fa-fw',
-        to: { name: 'groupInvitations', params: { groupId: this.currentGroupId } },
       }, {
         label: this.$t('GROUP.LEAVE'),
         icon: 'fas fa-sign-out-alt fa-fw',

src/sidenav/components/SidenavGroupUI.vue

@@ -13,10 +13,10 @@
           dense
           round
           size="sm"
-          :to="{ name: 'settings', hash: '#notifications' }"
-          :title="$t('GROUP.SETTINGS')"
+          :to="{ name: 'groupDescription' }"
+          :title="$t('GROUP.DESCRIPTION')"
         >
-          <QIcon name="fas fa-cog fa-fw" />
+          <QIcon name="fas fa-info-circle fa-fw" />
         </QBtn>
         <QBtn
           flat
@@ -36,6 +36,35 @@
       </div>
     </template>
     <SidenavMenu :entries="entries" />
+    <QExpansionItem
+      dense
+      expand-separator
+    >
+      <template v-slot:header>
+        <QItemSection
+          side
+          class="text-center"
+        >
+          <QIcon
+            name="fas fa-ellipsis-h"
+            size="1.1em"
+          />
+        </QItemSection>
+        <QItemSection>
+          {{ $t('BUTTON.SHOW_MORE') }}
+        </QItemSection>
+        <QItemSection side>
+          <QBadge
+            v-if="pendingApplications.length > 0"
+            small
+            :label="pendingApplications.length"
+            :title="$tc('APPLICATION.WALL_NOTICE', pendingApplications.length, { count: pendingApplications.length })"
+            color="blue"
+          />
+        </QItemSection>
+      </template>
+      <SidenavMenu :entries="entriesMore" />
+    </QExpansionItem>
   </SidenavBox>
 </template>
 
@@ -44,6 +73,9 @@ import {
   QBtn,
   QIcon,
   QMenu,
+  QExpansionItem,
+  QItemSection,
+  QBadge,
 } from 'quasar'
 import SidenavBox from './SidenavBox'
 import SidenavMenu from './SidenavMenu'
@@ -57,6 +89,9 @@ export default {
     QBtn,
     QIcon,
     QMenu,
+    QExpansionItem,
+    QItemSection,
+    QBadge,
   },
   props: {
     groupId: {
@@ -104,6 +139,17 @@ export default {
         icon: this.$icon('feedback'),
         to: { name: 'groupFeedback', params: { groupId: this.groupId } },
       }, {
+        label: this.$t('GROUP.MEMBERS'),
+        icon: 'fas fa-users',
+        to: { name: 'groupMembers', params: { groupId: this.groupId } },
+      }, {
+        label: this.$t('GROUP.HISTORY'),
+        icon: 'far fa-clock',
+        to: { name: 'groupHistory', params: { groupId: this.groupId } },
+      }].filter(e => typeof e.condition === 'undefined' || e.condition === true)
+    },
+    entriesMore () {
+      return [{
         label: this.$t('GROUP.APPLICATIONS'),
         icon: 'fas fa-address-card',
         to: { name: 'applications', params: { groupId: this.groupId } },
@@ -118,17 +164,9 @@ export default {
         icon: 'fas fa-vote-yea',
         to: { name: 'issueList', params: { groupId: this.groupId } },
       }, {
-        label: this.$t('GROUP.DESCRIPTION'),
-        icon: 'far fa-address-card',
-        to: { name: 'groupDescription', params: { groupId: this.groupId } },
-      }, {
-        label: this.$t('GROUP.MEMBERS'),
-        icon: 'fas fa-users',
-        to: { name: 'groupMembers', params: { groupId: this.groupId } },
-      }, {
-        label: this.$t('GROUP.HISTORY'),
-        icon: 'far fa-clock',
-        to: { name: 'groupHistory', params: { groupId: this.groupId } },
+        label: this.$t('GROUPINFO.META'),
+        icon: 'fas fa-eye fa-fw',
+        to: { name: 'groupPreview', params: { groupPreviewId: this.groupId } },
       }, {
         condition: this.$q.platform.is.mobile,
         label: this.$t('GROUPMAP.TITLE'),