badges for new followed posts and new comments

- now displays a badge showing number of new posts for Following menu, and number of new comments for Me menu and Comment creator tab - improved icon positioning in main menu - Me page now uses UserCard - PostCardCompact description now has title to show full description on mouse hover
legendword · Apr 8, 2021 · 7fbb278 · 7fbb278
1 parent bb1f88f
commit 7fbb278
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 29 deletions.
diff --git a/src/components/PostCardCompact.vue b/src/components/PostCardCompact.vue
@@ -6,7 +6,7 @@
             </q-card-section>
 
             <q-card-section class="q-pt-none">
-                <div class="ellipsis">{{ post.description }}</div>
+                <div class="ellipsis" :title="post.description">{{ post.description }}</div>
             </q-card-section>
 
             <q-card-section class="q-pt-none">

diff --git a/src/css/app.scss b/src/css/app.scss
@@ -20,6 +20,10 @@
     word-break: break-all;
 }
 
+.margin-auto {
+    margin: auto;
+}
+
 .link-text, .link-text:visited {
     text-decoration: none;
     color: initial;

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -16,16 +16,28 @@
         <q-list padding class="menu-list">
           <q-item v-for="item in menuItems" :key="item.link" clickable v-ripple :to="item.link" :exact="item.exact ? true : false">
             <q-item-section avatar>
-              <q-icon :name="item.icon" />
+              <q-icon :name="item.icon" class="margin-auto" />
             </q-item-section>
 
             <q-item-section>
               {{ $t(item.name) }}
             </q-item-section>
+
+            <q-item-section side v-if="item.badge && menuBadges[item.badge] != 0">
+              <q-badge>{{ menuBadges[item.badge] }}</q-badge>
+            </q-item-section>
           </q-item>
         </q-list>
       </q-scroll-area>
       <div class="absolute-bottom userDrawer q-pb-sm">
+        <q-item clickable v-ripple v-if="isLoggedIn && user.isAuthor == 1" to="/compose" exact>
+          <q-item-section avatar>
+            <q-icon name="create" class="margin-auto" />
+          </q-item-section>
+          <q-item-section>
+            Compose
+          </q-item-section>
+        </q-item>
         <q-item clickable v-ripple>
           <q-item-section avatar>
             <q-avatar color="primary" text-color="white">{{ isLoggedIn ? user.username[0]:'' }}</q-avatar>
@@ -91,7 +103,10 @@ export default {
       tab: 'tab1',
       logInDialog: false,
       menuItems: mainMenuItems,
-      menuLinks: []
+      menuLinks: [],
+      menuBadges: {
+        following: 0
+      }
     }
   },
   computed: {
@@ -215,6 +230,17 @@ export default {
       this.$store.commit('setHistoryLength', window.history.length)
     }
     this.menuLinks = mainMenuItems.map(v => v.link)
+    api.get('/badges').then(res => {
+      let r = res.data
+      if (r.success) {
+        this.menuBadges = r.badges
+        //clear badge of current path
+        let itm = this.menuItems.find(v => v.link == this.$route.path)
+        if (itm && itm.badge) {
+          this.menuBadges[itm.badge] = 0
+        }
+      }
+    })
   },
   beforeRouteEnter (to, from, next) {
     api.get('/user/info', {
@@ -225,6 +251,10 @@ export default {
   },
   beforeRouteUpdate(to, from, next) {
     this.callAlive()
+    let itm = this.menuItems.find(v => v.link == to.path)
+    if (itm && itm.badge) {
+      this.menuBadges[itm.badge] = 0
+    }
     next()
   }
 }

diff --git a/src/mainMenu.js b/src/mainMenu.js
@@ -8,17 +8,19 @@ const mainMenuItems = [
     {
         name: 'layoutDrawer.collections',
         link: '/collections',
-        icon: 'ion-bookmarks'  
+        icon: 'ion-bookmarks'
     },
     {
         name: 'layoutDrawer.following',
         link: '/following',
-        icon: 'ion-today'
+        icon: 'ion-today',
+        badge: 'following'
     },
     {
         name: 'layoutDrawer.me',
         link: '/me',
-        icon: 'ion-home'
+        icon: 'ion-home',
+        badge: 'comments'
     }
 ];
 export default mainMenuItems;
diff --git a/src/pages/Me.vue b/src/pages/Me.vue
@@ -2,43 +2,36 @@
     <q-page class="q-pb-lg">
         <need-to-log-in v-if="!isLoggedIn" />
         <div v-else>
-            <div class="row">
-                <div class="col-12 col-sm-8 col-md-6">
-                    <router-link :to="'/user/'+user.id" class="noLinkStyle">
-                        <q-card class="q-ma-lg">
-                            <q-card-section>
-                                <div class="row">
-                                    <div class="col-auto q-pr-md">
-                                        <q-avatar color="primary" text-color="white">{{ user.username ? user.username[0]:'' }}</q-avatar>
-                                    </div>
-                                    <div class="col q-my-auto">
-                                        <div><strong>{{ user.username }}</strong></div>
-                                        <div class="row">
-                                            <div class="col text-caption">{{ user.followingCount }} {{ $t('general.following') }}</div>
-                                            <div class="col text-caption">{{ user.followerCount }} {{ $tc('computed.followers', user.followerCount) }}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </q-card-section>
-                        </q-card>
-                    </router-link>
+            <div class="row" v-if="user.isAuthor">
+                <div class="col-12 col-sm-6">
+                    <user-card :user="user"></user-card>
                 </div>
-                <div class="col-12 col-sm-4 col-md-6" v-show="user.isAuthor">
+                <div class="col-12 col-sm-6">
                     <author-card :author="author"></author-card>
                 </div>
             </div>
-            <div class="q-px-md q-px-sm-lg" v-show="user.isAuthor">
+            <div class="row" v-else>
+                <div class="col-12">
+                    <user-card :user="user"></user-card>
+                </div>
+            </div>
+            <div class="q-px-md q-px-sm-lg" v-if="user.isAuthor">
                 <h5 class="q-mb-sm">{{ $t('me.creator') }}</h5>
                 <div class="xs">
                     <q-tabs v-model="creatorTab" active-color="primary" align="justify">
-                        <q-tab v-for="item in creatorTabs" :key="item" :name="item" :label="$t('general.'+item)" />
+                        <q-tab v-for="item in creatorTabs" :key="item" :name="item" :label="$t('general.'+item)">
+                            <q-badge floating v-if="creatorBadges[item]">{{creatorBadges[item]}}</q-badge>
+                        </q-tab>
                     </q-tabs>
                 </div>
                 <div class="row">
                     <div class="gt-xs col-auto">
                         <q-list bordered separator class="creatorTabs text-weight-medium">
                             <q-item v-for="item in creatorTabs" :key="item" clickable v-ripple :active="creatorTab == item" @click="creatorTab = item">
                                 <q-item-section>{{ $t('general.'+item) }}</q-item-section>
+                                <q-item-section side v-if="creatorBadges[item]">
+                                    <q-badge>{{creatorBadges[item]}}</q-badge>
+                                </q-item-section>
                             </q-item>
                         </q-list>
                     </div>
@@ -157,6 +150,7 @@
 
 <script>
 import AuthorCard from '../components/AuthorCard.vue'
+import UserCard from '../components/UserCard.vue'
 import { mapState } from 'vuex'
 import api from '../api'
 import NeedToLogIn from '../components/NeedToLogIn.vue'
@@ -167,6 +161,7 @@ export default {
     components: {
         NeedToLogIn,
         AuthorCard,
+        UserCard,
         UpcomingFeature
     },
     data() {
@@ -175,6 +170,9 @@ export default {
             user: {},
             creatorTab: 'overview',
             creatorTabs: ['overview', 'posts', 'comments'],
+            creatorBadges: {
+                comments: 0
+            },
             creator: {
                 stats: [],
                 posts: [],
@@ -210,6 +208,9 @@ export default {
             this.fetchCreatorTab(this.creatorTab)
         },
         fetchCreatorTab(val) {
+            if (this.creatorBadges[val]) {
+                this.creatorBadges[val] = 0
+            }
             if (val == 'overview') {
                 api.get('/authors/stats').then(res => {
                     let r = res.data
@@ -297,6 +298,14 @@ export default {
                 if (this.user.isAuthor) {
                     this.author = r.author
                     this.fetchCreatorTab(this.creatorTab)
+
+                    api.get('/badges').then(res => {
+                        let r = res.data
+                        if (r.success) {
+                            this.creatorBadges.comments = r.badges.comments
+                            console.log(this.creatorBadges['comments'])
+                        }
+                    })
                 }
             }
             else {