From 45944c627cd746327baa9e4096572582c82010a0 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Thu, 17 Aug 2023 07:53:04 +0800
Subject: [PATCH] feat: upgrade tags UI

---
 src/components/Footer/FooterLink.vue  |   2 +-
 src/components/Paginator.vue          |  16 +++-
 src/components/Sidebar/src/TagBox.vue | 130 +++++++++++++++++---------
 src/components/Sticky.vue             |   2 +-
 src/components/Tag/TagItem.vue        | 112 +++++++---------------
 src/icons/more.svg                    |   5 +
 src/locales/languages/cn.json         |   4 +-
 src/locales/languages/en.json         |   4 +-
 src/views/Tag.vue                     |   2 +-
 9 files changed, 143 insertions(+), 134 deletions(-)
 create mode 100644 src/icons/more.svg

diff --git a/src/components/Footer/FooterLink.vue b/src/components/Footer/FooterLink.vue
index c7f4f5d0..12a50dc7 100644
--- a/src/components/Footer/FooterLink.vue
+++ b/src/components/Footer/FooterLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="links"
+    v-if="links && links.length > 0"
     id="footer-link"
     class="flex flex-col items-center py-8 bg-ob-deep-900"
   >
diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
index e1e0f7e0..c17ed450 100644
--- a/src/components/Paginator.vue
+++ b/src/components/Paginator.vue
@@ -6,7 +6,12 @@
         v-if="currentPage > 1"
         @click="pageChangeEmitter(currentPage - 1)"
       >
-        <SvgIcon icon-class="arrow-left" />
+        <SvgIcon
+          class="font-bold"
+          icon-class="arrow-left"
+          height="1.25rem"
+          width="1.25rem"
+        />
         <span>{{ t('settings.paginator.newer') }}</span>
       </li>
       <li
@@ -37,7 +42,12 @@
         @click="pageChangeEmitter(currentPage + 1)"
       >
         <span>{{ t('settings.paginator.older') }}</span>
-        <SvgIcon icon-class="arrow-right" />
+        <SvgIcon
+          class="font-bold"
+          icon-class="arrow-right"
+          height="1.25rem"
+          width="1.25rem"
+        />
       </li>
     </ul>
   </div>
@@ -135,7 +145,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .paginator {
-  @apply flex flex-row justify-center my-8;
+  @apply flex flex-row justify-center mt-8;
   ul {
     @apply flex flex-row;
     li {
diff --git a/src/components/Sidebar/src/TagBox.vue b/src/components/Sidebar/src/TagBox.vue
index 44dfba57..8ea2882d 100644
--- a/src/components/Sidebar/src/TagBox.vue
+++ b/src/components/Sidebar/src/TagBox.vue
@@ -1,66 +1,71 @@
 <template>
-  <div class="sidebar-box">
-    <SubTitle :title="'titles.tag_list'" icon="tag" />
-    <TagList>
-      <template v-if="tags && tags.length > 0">
-        <TagItem
-          v-for="tag in tags"
-          :key="tag.slug"
-          :name="tag.name"
-          :slug="tag.slug"
-          :count="tag.count"
-          size="xs"
-        />
-        <div
-          class="
-            flex flex-row
-            items-center
-            hover:opacity-50
-            mr-2
-            mb-2
-            cursor-pointer
-            transition-all
-          "
-        >
-          <span class="text-center px-3 py-1 rounded-md text-sm">
-            <b class="border-b-2 border-ob hover:text-ob">
-              <router-link to="/tags">
-                {{ t('settings.more-tags') }} ...
-              </router-link>
-            </b>
-          </span>
-        </div>
-      </template>
-      <template v-else-if="tags">
-        <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
-      </template>
-      <template v-else>
-        <div class="flex flex-row justify-center items-center">
-          <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
-          {{ t('settings.empty-tag') }}
-        </div>
-      </template>
-    </TagList>
-  </div>
+  <Sticky
+    :stickyTop="32"
+    endingElId="footer-link"
+    dynamicElClass="#sticky-tag-box"
+  >
+    <div id="sticky-tag-box" class="sidebar-box">
+      <SubTitle :title="'titles.tag_list'" icon="tag" />
+      <TagList :class="tagBoxClasses">
+        <template v-if="tags && tags.length > 0">
+          <TagItem
+            v-for="tag in tags"
+            :key="tag.slug"
+            :name="tag.name"
+            :slug="tag.slug"
+            :count="tag.count"
+            size="small"
+          />
+          <template v-if="!expand">
+            <div class="more-cover"></div>
+            <div class="more-btn" @click="expandBox">
+              <SvgIcon
+                class="font-bold"
+                icon-class="more"
+                height="2rem"
+                width="2rem"
+              />
+              <span>{{ t('settings.more-tags') }}</span>
+            </div>
+          </template>
+        </template>
+        <template v-else-if="tags">
+          <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
+        </template>
+        <template v-else>
+          <div class="flex flex-row justify-center items-center">
+            <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
+            {{ t('settings.empty-tag') }}
+          </div>
+        </template>
+      </TagList>
+    </div>
+  </Sticky>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { useTagStore } from '@/stores/tag'
 import { TagList, TagItem } from '@/components/Tag'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
   name: 'ObTag',
-  components: { SubTitle, TagList, TagItem, SvgIcon },
+  components: { SubTitle, TagList, TagItem, SvgIcon, Sticky },
   setup() {
     const tagStore = useTagStore()
     const { t } = useI18n()
+    const expand = ref<boolean>(false)
 
     const fetchData = async () => {
-      tagStore.fetchTagsByCount(10)
+      tagStore.fetchAllTags()
+    }
+
+    const expandBox = () => {
+      expand.value = true
     }
 
     onMounted(fetchData)
@@ -70,6 +75,13 @@ export default defineComponent({
         if (tagStore.isLoaded && tagStore.tags.length === 0) return null
         return tagStore.tags
       }),
+      tagBoxClasses: computed(() => ({
+        'overflow-hidden text-ellipsis relative': true,
+        'max-h-98': !expand.value,
+        'h-full': expand.value
+      })),
+      expandBox,
+      expand,
       t
     }
   }
@@ -80,4 +92,30 @@ export default defineComponent({
 .sidebar-box li.ob-skeleton {
   @apply mr-2 mb-2;
 }
+
+.more-btn {
+  @apply flex flex-col justify-center items-center h-11 cursor-pointer absolute bg-ob-deep-900 rounded-lg w-full shadow-md overflow-hidden;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  svg {
+    transition: 0.2s all ease-in-out;
+  }
+  span {
+    @apply opacity-0 font-bold -mb-8;
+    transition: 0.2s all ease-in-out;
+  }
+  &:hover span {
+    @apply scale-110 opacity-100 mb-1.5;
+  }
+  &:hover svg {
+    @apply opacity-0;
+  }
+}
+
+.more-cover {
+  @apply pointer-events-none absolute bottom-0 w-full;
+  height: 250px;
+  background: var(--article-cover);
+}
 </style>
diff --git a/src/components/Sticky.vue b/src/components/Sticky.vue
index 185e1f6c..865f1e69 100644
--- a/src/components/Sticky.vue
+++ b/src/components/Sticky.vue
@@ -178,7 +178,7 @@ export default defineComponent({
         }
 
         this.handleReset()
-      }, 1)
+      }, 16)
     },
     handleResize() {
       if (this.isSticky) {
diff --git a/src/components/Tag/TagItem.vue b/src/components/Tag/TagItem.vue
index 8a117969..8aa3d6b7 100644
--- a/src/components/Tag/TagItem.vue
+++ b/src/components/Tag/TagItem.vue
@@ -1,49 +1,21 @@
 <template>
   <div
-    class="
-      flex flex-row
-      items-center
-      hover:opacity-50
-      mr-2
-      mb-2
-      cursor-pointer
-      transition-all
-    "
+    class="flex flex-row items-center mr-1 mb-1 cursor-pointer transition-all"
   >
     <router-link
-      class="
-        bg-ob-deep-900
-        text-center
-        px-3
-        py-1
-        rounded-tl-md rounded-bl-md
-        text-sm
-      "
+      :class="tagClasses"
       :to="{ name: 'tags-search', query: { slug: slug } }"
-      :style="stylingTag()"
     >
-      <em class="opacity-50">#</em>
       {{ name }}
+      <sub :class="countClasses">
+        {{ count }}
+      </sub>
     </router-link>
-    <span
-      class="
-        bg-ob-deep-900
-        text-ob-secondary text-center
-        px-2
-        py-1
-        rounded-tr-md rounded-br-md
-        text-sm
-        opacity-70
-      "
-      :style="stylingTag()"
-    >
-      {{ count }}
-    </span>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs } from 'vue'
+import { PropType, computed, defineComponent, toRefs } from 'vue'
 
 export default defineComponent({
   name: 'ObTagItem',
@@ -55,56 +27,40 @@ export default defineComponent({
       default: 0
     },
     size: {
-      type: String,
-      default: 'base'
+      type: String as PropType<'small' | 'large'>,
+      default: 'small'
     }
   },
   setup(props) {
     const tagSize = toRefs(props).size
 
-    const stylingTag = () => {
-      if (tagSize.value === 'xs') {
-        return {
-          fontSize: '0.75rem',
-          lineHeight: '1rem'
-        }
-      }
-
-      if (tagSize.value === 'sm') {
-        return {
-          fontSize: '0.875rem',
-          lineHeight: '1.25rem'
-        }
-      }
-
-      if (tagSize.value === 'lg') {
-        return {
-          fontSize: '1.125rem',
-          lineHeight: '1.75rem'
-        }
-      }
-
-      if (tagSize.value === 'xl') {
-        return {
-          fontSize: '1.25rem',
-          lineHeight: '1.75rem'
-        }
-      }
-
-      if (tagSize.value === '2xl') {
-        return {
-          fontSize: '1.5rem',
-          lineHeight: '2rem'
-        }
-      }
-
-      return {
-        fontSize: '1rem',
-        lineHeight: '1.5rem'
-      }
+    return {
+      tagClasses: computed(() => ({
+        'flex p-1.5 rounded-md text-sm hover:bg-ob-deep-900 hover:opacity-100 hover:text-ob-bright font-bold':
+          tagSize.value === 'small',
+        'large-tag-item': tagSize.value === 'large'
+      })),
+      countClasses: computed(() => ({
+        'block -mt-1.5 ml-1 text-xs opacity-50': tagSize.value === 'small',
+        'block -mt-1.5 ml-2 rounded-full text-xs text-ob':
+          tagSize.value === 'large'
+      }))
     }
-
-    return { stylingTag }
   }
 })
 </script>
+
+<style lang="scss">
+.large-tag-item {
+  @apply flex py-2 px-4 rounded-md bg-ob-deep-900 text-ob-bright text-base hover:opacity-100;
+  sub {
+    transition: 300ms all ease-in-out;
+  }
+  &:hover {
+    @apply scale-110;
+  }
+  &:hover sub {
+    @apply text-lg;
+  }
+}
+</style>
diff --git a/src/icons/more.svg b/src/icons/more.svg
new file mode 100644
index 00000000..0edf36e7
--- /dev/null
+++ b/src/icons/more.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
+<path fill="" d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" undefined="1"></path>
+<path fill="" d="M19 14C20.1046 14 21 13.1046 21 12C21 10.8954 20.1046 10 19 10C17.8954 10 17 10.8954 17 12C17 13.1046 17.8954 14 19 14Z" undefined="1"></path>
+<path fill="" d="M5 14C6.10457 14 7 13.1046 7 12C7 10.8954 6.10457 10 5 10C3.89543 10 3 10.8954 3 12C3 13.1046 3.89543 14 5 14Z" undefined="1"></path>
+</svg>
diff --git a/src/locales/languages/cn.json b/src/locales/languages/cn.json
index e3703fd0..9a89e87a 100644
--- a/src/locales/languages/cn.json
+++ b/src/locales/languages/cn.json
@@ -16,8 +16,8 @@
   "titles": {
     "articles": "文章列表",
     "about": "关于我",
-    "category_list": "分类目录",
-    "tag_list": "标签目录",
+    "category_list": "分类",
+    "tag_list": "标签",
     "toc": "文章目录",
     "comment": "评论区",
     "recent_comment": "最近评论"
diff --git a/src/locales/languages/en.json b/src/locales/languages/en.json
index 80dea572..ebdb60fc 100644
--- a/src/locales/languages/en.json
+++ b/src/locales/languages/en.json
@@ -45,8 +45,8 @@
     "visit_count": "Total visit count",
     "button-all": "All",
     "paginator": {
-      "newer": "Newer",
-      "older": "Older",
+      "newer": "Pre",
+      "older": "Next",
       "prev": "Previous",
       "next": "Next"
     },
diff --git a/src/views/Tag.vue b/src/views/Tag.vue
index 622330fb..ea5db893 100644
--- a/src/views/Tag.vue
+++ b/src/views/Tag.vue
@@ -13,7 +13,7 @@
             :name="tag.name"
             :slug="tag.slug"
             :count="tag.count"
-            size="xl"
+            size="large"
           />
         </template>
         <template v-else-if="tags">