Merge pull request #1640 from Human-Connection/1486_make_slug_more_usable

1486 make slug more usable

webapp/components/User/User.story.js

@@ -0,0 +1,74 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import User from '~/components/User/User.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+const user = {
+  id: 'u6',
+  slug: 'louie',
+  name: 'Louie',
+  avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/designervzm/128.jpg',
+  about:
+    'Illum in et velit soluta voluptatem architecto consequuntur enim placeat. Eum excepturi est ratione rerum in voluptatum corporis. Illum consequatur minus. Modi incidunt velit.',
+  disabled: false,
+  deleted: false,
+  locationName: null,
+  location: null,
+  createdAt: '2019-09-18T14:16:01.695Z',
+  badges: [],
+  badgesCount: 0,
+  shoutedCount: 1,
+  commentedCount: 2,
+  contributionsCount: 5,
+  followingCount: 1,
+  following: [
+    {
+      id: 'u3',
+      slug: 'jenny-rostock',
+      name: 'Jenny Rostock',
+      avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/bowbrick/128.jpg',
+      disabled: false,
+      deleted: false,
+      followedByCount: 2,
+      followedByCurrentUser: false,
+      contributionsCount: 1,
+      commentedCount: 3,
+      badges: [
+        {
+          id: 'indiegogo_en_bear',
+          icon: '/img/badges/indiegogo_en_bear.svg',
+        },
+      ],
+      location: {
+        name: 'Paris',
+      },
+    },
+  ],
+  followedByCount: 0,
+  followedByCurrentUser: false,
+  isBlocked: false,
+  followedBy: [],
+  socialMedia: [],
+}
+
+storiesOf('User', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('available user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))
+  .add('anonymous user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user: null,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))

webapp/components/User/User.vue

@@ -11,17 +11,20 @@
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <hc-avatar class="avatar" :user="user" />
           <div>
+            <ds-text align="left">
               <b class="username">{{ userName | truncate(18) }}</b>
-          </div>
+              <ds-text v-if="dateTime" size="small" color="soft">
-          <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="left" size="small" color="soft">
                 <ds-icon name="clock" />
                 <client-only>
                   <hc-relative-date-time :date-time="dateTime" />
                 </client-only>
               </ds-text>
+            </ds-text>
           </div>
+          <!-- Time -->
+          <ds-text align="left" size="small" color="soft">
+            {{ userSlug }}
+          </ds-text>
         </div>
       </nuxt-link>
     </template>
@@ -126,6 +129,10 @@ export default {
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
     },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
     userName() {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')

webapp/pages/profile/_id/_slug.vue

@@ -27,7 +27,12 @@
             />
           </client-only>
           <ds-space margin="small">
-            <ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ userName }}
+            </ds-heading>
+            <ds-text align="center" color="soft">
+              {{ userSlug }}
+            </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
               <ds-icon name="map-marker" />
               {{ user.location.name }}
@@ -143,7 +148,7 @@
           <ds-card style="position: relative; height: auto;">
             <ds-space margin="x-small">
               <ds-text tag="h5" color="soft">
-                {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
+                {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
               </ds-text>
               <template>
                 <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
@@ -336,6 +341,10 @@ export default {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')
     },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
   },
   watch: {
     User(val) {

webapp/storybook/helpers.js

@@ -5,6 +5,8 @@ import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
 import layout from './layout.vue'
 
+import '~/plugins/v-tooltip'
+
 const helpers = {
   init(options = {}) {
     Vue.use(Vuex)
@@ -25,6 +27,9 @@ const helpers = {
       auth: {
         namespaced: true,
         getters: {
+          isModerator() {
+            return false
+          },
           user(state) {
             return { id: 1, name: 'admin' }
           },

webapp/storybook/webpack.config.js

@@ -1,7 +1,6 @@
 const path = require('path')
-const nuxtConf = require('../nuxt.config')
+const srcDir = '..'
-const srcDir = `../${nuxtConf.srcDir || ''}`
+const rootDir = '..'
-const rootDir = `../${nuxtConf.rootDir || ''}`
 
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {