Renamed NewTabNavigation to TabNavigation

- Renamed old TabNavigation to OldTabNavigation.
Ocelot-Social-Community · Jan 21, 2021 · ae09aee · ae09aee
1 parent 9ce1e08
commit ae09aee
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 160 deletions.
diff --git a/webapp/components/_new/features/SearchResults/SearchResults.story.js b/webapp/components/_new/features/SearchResults/SearchResults.story.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import SearchResults from './SearchResults'
-import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+import TabNavigation from '~/components/_new/generic/TabNavigation/OldTabNavigation'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import helpers from '~/storybook/helpers'

diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -13,7 +13,7 @@
         </ds-grid-item>
 
         <!-- tabs -->
-        <new-tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
+        <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
 
         <!-- search results -->
 
@@ -105,14 +105,14 @@ import HcEmpty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
-import NewTabNavigation from '~/components/_new/generic/TabNavigation/NewTabNavigation'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 
 export default {
   components: {
-    NewTabNavigation,
+    TabNavigation,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,

diff --git a/webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue b/webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue
diff --git a/webapp/components/_new/generic/TabNavigation/OldTabNavigation.vue b/webapp/components/_new/generic/TabNavigation/OldTabNavigation.vue
@@ -0,0 +1,74 @@
+<template>
+  <ul class="tab-navigation">
+    <li
+      v-for="tab in tabs"
+      :key="tab.type"
+      :class="[
+        activeTab === tab.type && '--active',
+        tab.disabled && '--disabled',
+        'tab',
+        tab.type + '-tab',
+      ]"
+      :style="tabWidth"
+      role="button"
+      :data-test="tab.type + '-tab'"
+      @click="$emit('switch-tab', tab.type)"
+    >
+      <ds-space margin="small">
+        {{ tab.count }}
+      </ds-space>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    activeTab: {
+      type: String,
+    },
+  },
+  computed: {
+    tabWidth() {
+      return 'width: ' + String(100.0 / this.tabs.length) + '%'
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.tab-navigation {
+  display: flex;
+  margin-top: $space-small;
+
+  > .tab {
+    font-weight: $font-weight-bold;
+    padding: $space-x-small $space-small;
+    margin-right: $space-xx-small;
+    border-radius: $border-radius-base $border-radius-base 0 0;
+    background: $color-neutral-100;
+    cursor: pointer;
+
+    &.--active {
+      background: $color-neutral-80;
+      border: none;
+    }
+
+    &.--disabled {
+      background: $background-color-disabled;
+      border: $border-size-base solid $color-neutral-80;
+      border-bottom: none;
+      pointer-events: none;
+      cursor: default;
+    }
+
+    &:hover:not(.--active) {
+      background: $color-neutral-85;
+    }
+  }
+}
+</style>
diff --git a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
@@ -1,28 +1,40 @@
 <template>
-  <ul class="tab-navigation">
-    <li
-      v-for="tab in tabs"
-      :key="tab.type"
-      :class="[
-        activeTab === tab.type && '--active',
-        tab.disabled && '--disabled',
-        'tab',
-        tab.type + '-tab',
-      ]"
-      :style="tabWidth"
-      role="button"
-      :data-test="tab.type + '-tab'"
-      @click="$emit('switch-tab', tab.type)"
-    >
-      <ds-space margin="small">
-        {{ tab.count }}
-      </ds-space>
-    </li>
-  </ul>
+  <ds-grid-item class="tab-navigation" :row-span="tabs.length" column-span="fullWidth">
+    <base-card class="ds-tab-nav">
+      <ul class="Tabs">
+        <li
+          v-for="tab in tabs"
+          :key="tab.type"
+          :class="[
+            'Tabs__tab',
+            'pointer',
+            activeTab === tab.type && '--active',
+            tab.disabled && '--disabled',
+          ]"
+          :data-test="tab.type + '-tab'"
+        >
+          <a :data-test="tab.type + '-tab-click'" @click="switchTab(tab)">
+            <ds-space margin="small">
+              <client-only :placeholder="$t('client-only.loading')">
+                <ds-number :label="tab.title">
+                  <hc-count-to slot="count" :end-val="tab.count" />
+                </ds-number>
+              </client-only>
+            </ds-space>
+          </a>
+        </li>
+      </ul>
+    </base-card>
+  </ds-grid-item>
 </template>
 
 <script>
+import HcCountTo from '~/components/CountTo.vue'
+
 export default {
+  components: {
+    HcCountTo,
+  },
   props: {
     tabs: {
       type: Array,
@@ -32,42 +44,67 @@ export default {
       type: String,
     },
   },
-  computed: {
-    tabWidth() {
-      return 'width: ' + String(100.0 / this.tabs.length) + '%'
+  methods: {
+    switchTab(tab) {
+      if (!tab.disabled) {
+        this.$emit('switch-tab', tab.type)
+      }
     },
   },
 }
 </script>
 
 <style lang="scss">
-.tab-navigation {
+.pointer {
+  cursor: pointer;
+}
+
+.Tabs {
+  position: relative;
+  background-color: #fff;
+  height: 100%;
   display: flex;
-  margin-top: $space-small;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
-  > .tab {
-    font-weight: $font-weight-bold;
-    padding: $space-x-small $space-small;
-    margin-right: $space-xx-small;
-    border-radius: $border-radius-base $border-radius-base 0 0;
-    background: $color-neutral-100;
-    cursor: pointer;
+  &__tab {
+    text-align: center;
+    height: 100%;
+    flex-grow: 1;
 
-    &.--active {
-      background: $color-neutral-80;
-      border: none;
+    &:hover {
+      border-bottom: 2px solid #c9c6ce;
     }
 
+    &.--active {
+      border-bottom: 2px solid #17b53f;
+    }
     &.--disabled {
-      background: $background-color-disabled;
-      border: $border-size-base solid $color-neutral-80;
-      border-bottom: none;
-      pointer-events: none;
-      cursor: default;
+      opacity: $opacity-disabled;
+      &:hover {
+        border-bottom: none;
+      }
     }
+  }
+}
+.tab-navigation {
+  position: sticky;
+  top: 53px;
+  z-index: 2;
+}
+.ds-tab-nav.base-card {
+  padding: 0;
 
-    &:hover:not(.--active) {
-      background: $color-neutral-85;
+  .ds-tab-nav-item {
+    &.ds-tab-nav-item-active {
+      border-bottom: 3px solid #17b53f;
+      &:first-child {
+        border-bottom-left-radius: $border-radius-x-large;
+      }
+      &:last-child {
+        border-bottom-right-radius: $border-radius-x-large;
+      }
     }
   }
 }

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
@@ -109,7 +109,7 @@
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <masonry-grid>
           <!-- TapNavigation -->
-          <new-tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
+          <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
 
           <!-- feed -->
           <ds-grid-item :row-span="2" column-span="fullWidth">
@@ -182,7 +182,7 @@ import HcUpload from '~/components/Upload'
 import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
-import NewTabNavigation from '~/components/_new/generic/TabNavigation/NewTabNavigation'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import { profilePagePosts } from '~/graphql/PostQuery'
 import UserQuery from '~/graphql/User'
 import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
@@ -212,7 +212,7 @@ export default {
     MasonryGrid,
     MasonryGridItem,
     FollowList,
-    NewTabNavigation,
+    TabNavigation,
   },
   mixins: [postListActions],
   transition: {