From 22a005eb1c1067e525623be18d5fc82e8a17d26f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 16 Sep 2019 11:14:13 +0200
Subject: [PATCH] Show categories translated in all places and even in tooltips

Show `#` symbol in front of hashtags.
Minor design changes on posts more info page.
---
 .../{Tag/spec.js => Hashtag/Hashtag.spec.js}  |  6 ++--
 .../{Tag/index.vue => Hashtag/Hashtag.vue}    |  7 ++--
 webapp/components/{Tag => Hashtag}/Readme.md  |  2 +-
 webapp/components/PostCard/index.vue          |  2 +-
 webapp/graphql/Fragments.js                   |  1 +
 webapp/pages/post/_id/_slug/index.vue         |  9 +++--
 webapp/pages/post/_id/_slug/more-info.vue     | 33 +++++++------------
 7 files changed, 24 insertions(+), 36 deletions(-)
 rename webapp/components/{Tag/spec.js => Hashtag/Hashtag.spec.js} (83%)
 rename webapp/components/{Tag/index.vue => Hashtag/Hashtag.vue} (60%)
 rename webapp/components/{Tag => Hashtag}/Readme.md (54%)

diff --git a/webapp/components/Tag/spec.js b/webapp/components/Hashtag/Hashtag.spec.js
similarity index 83%
rename from webapp/components/Tag/spec.js
rename to webapp/components/Hashtag/Hashtag.spec.js
index 4824c65fc..cfb7d7e3f 100644
--- a/webapp/components/Tag/spec.js
+++ b/webapp/components/Hashtag/Hashtag.spec.js
@@ -1,15 +1,15 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Styleguide from '@human-connection/styleguide'
-import Tag from './'
+import Hashtag from './Hashtag'
 
 const localVue = createLocalVue()
 localVue.use(Styleguide)
 
-describe('Tag', () => {
+describe('Hashtag', () => {
   let id
 
   let Wrapper = () => {
-    return shallowMount(Tag, {
+    return shallowMount(Hashtag, {
       localVue,
       propsData: {
         id,
diff --git a/webapp/components/Tag/index.vue b/webapp/components/Hashtag/Hashtag.vue
similarity index 60%
rename from webapp/components/Tag/index.vue
rename to webapp/components/Hashtag/Hashtag.vue
index 1895d4fcf..a6085fabc 100644
--- a/webapp/components/Tag/index.vue
+++ b/webapp/components/Hashtag/Hashtag.vue
@@ -1,13 +1,10 @@
 <template>
-  <ds-tag>
-    <ds-icon name="tag" />
-    {{ id }}
-  </ds-tag>
+  <ds-tag>#{{ id }}</ds-tag>
 </template>
 
 <script>
 export default {
-  name: 'HcTag',
+  name: 'HcHashtag',
   props: {
     id: { type: String, required: true },
   },
diff --git a/webapp/components/Tag/Readme.md b/webapp/components/Hashtag/Readme.md
similarity index 54%
rename from webapp/components/Tag/Readme.md
rename to webapp/components/Hashtag/Readme.md
index 359f2487d..6bb64f1b5 100644
--- a/webapp/components/Tag/Readme.md
+++ b/webapp/components/Hashtag/Readme.md
@@ -3,5 +3,5 @@
 Tag "Liebe"
 
 ```
-<hc-tag name="Liebe" />
+<hc-hashtag name="Liebe" />
 ```
\ No newline at end of file
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 43faa671a..c6c967759 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -35,7 +35,7 @@
           v-for="category in post.categories"
           :key="category.id"
           v-tooltip="{
-            content: category.name,
+            content: $t(`contribution.category.name.${category.slug}`),
             placement: 'bottom-start',
             delay: { show: 500 },
           }"
diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js
index 4d23d4edb..e50d4bbe1 100644
--- a/webapp/graphql/Fragments.js
+++ b/webapp/graphql/Fragments.js
@@ -52,6 +52,7 @@ export const postFragment = lang => gql`
     }
     categories {
       id
+      slug
       name
       icon
     }
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index e888d4f9d..dd84ee3d7 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -29,16 +29,15 @@
         <hc-category
           v-for="category in post.categories"
           :key="category.id"
-          v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
           :icon="category.icon"
-          :name="category.name"
+          :name="$t(`contribution.category.name.${category.slug}`)"
         />
       </div>
       <ds-space margin-bottom="small" />
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-tag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+        <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
@@ -77,7 +76,7 @@
 <script>
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
-import HcTag from '~/components/Tag'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu'
 import HcUser from '~/components/User/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
@@ -94,8 +93,8 @@ export default {
     mode: 'out-in',
   },
   components: {
-    HcTag,
     HcCategory,
+    HcHashtag,
     HcUser,
     HcShoutButton,
     ContentMenu,
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 654d4e65f..7ee6803d2 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -7,30 +7,17 @@
       <!-- <ds-icon name="compass" /> -->
       {{ $t('post.moreInfo.titleOfCategoriesSection') }}
     </h3>
-    <div class="tags">
-      <ds-icon
-        v-for="category in post.categories"
-        :key="category.id"
-        v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
-        :name="category.icon"
-        size="large"
-      />
-      &nbsp;
-      <!--<ds-tag
-        v-for="category in post.categories"
-      :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
-    </div>
+    <hc-category
+      v-for="category in post.categories"
+      :key="category.id"
+      :icon="category.icon"
+      :name="$t(`contribution.category.name.${category.slug}`)"
+    />
     <template v-if="post.tags && post.tags.length">
       <h3>
-        <!-- <ds-icon name="tags" /> -->
         {{ $t('post.moreInfo.titleOfHashtagsSection') }}
       </h3>
-      <div class="tags">
-        <ds-tag v-for="tag in post.tags" :key="tag.id">
-          <ds-icon name="tag" />
-          {{ tag.name }}
-        </ds-tag>
-      </div>
+      <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
     </template>
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
@@ -49,8 +36,10 @@
 </template>
 
 <script>
-import HcPostCard from '~/components/PostCard'
 import HcEmpty from '~/components/Empty.vue'
+import HcPostCard from '~/components/PostCard'
+import HcCategory from '~/components/Category'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 import { relatedContributions } from '~/graphql/PostQuery'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -62,6 +51,8 @@ export default {
   },
   components: {
     HcPostCard,
+    HcCategory,
+    HcHashtag,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,