Renamed NewTabNavigation to TabNavigation

- Renamed old TabNavigation to OldTabNavigation.

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'

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,

webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue

@@ -1,111 +0,0 @@
-<template>
-  <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,
-      required: true,
-    },
-    activeTab: {
-      type: String,
-    },
-  },
-  methods: {
-    switchTab(tab) {
-      if (!tab.disabled) {
-        this.$emit('switch-tab', tab.type)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.pointer {
-  cursor: pointer;
-}
-
-.Tabs {
-  position: relative;
-  background-color: #fff;
-  height: 100%;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  &__tab {
-    text-align: center;
-    height: 100%;
-    flex-grow: 1;
-
-    &:hover {
-      border-bottom: 2px solid #c9c6ce;
-    }
-
-    &.--active {
-      border-bottom: 2px solid #17b53f;
-    }
-    &.--disabled {
-      opacity: $opacity-disabled;
-      &:hover {
-        border-bottom: none;
-      }
-    }
-  }
-}
-.tab-navigation {
-  position: sticky;
-  top: 53px;
-  z-index: 2;
-}
-.ds-tab-nav.base-card {
-  padding: 0;
-
-  .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;
-      }
-    }
-  }
-}
-</style>

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>

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -1,28 +1,40 @@
 <template>
-  <ul class="tab-navigation">
+  <ds-grid-item class="tab-navigation" :row-span="tabs.length" column-span="fullWidth">
-    <li
+    <base-card class="ds-tab-nav">
-      v-for="tab in tabs"
+      <ul class="Tabs">
-      :key="tab.type"
+        <li
-      :class="[
+          v-for="tab in tabs"
-        activeTab === tab.type && '--active',
+          :key="tab.type"
-        tab.disabled && '--disabled',
+          :class="[
-        'tab',
+            'Tabs__tab',
-        tab.type + '-tab',
+            'pointer',
-      ]"
+            activeTab === tab.type && '--active',
-      :style="tabWidth"
+            tab.disabled && '--disabled',
-      role="button"
+          ]"
-      :data-test="tab.type + '-tab'"
+          :data-test="tab.type + '-tab'"
-      @click="$emit('switch-tab', tab.type)"
+        >
-    >
+          <a :data-test="tab.type + '-tab-click'" @click="switchTab(tab)">
-      <ds-space margin="small">
+            <ds-space margin="small">
-        {{ tab.count }}
+              <client-only :placeholder="$t('client-only.loading')">
-      </ds-space>
+                <ds-number :label="tab.title">
-    </li>
+                  <hc-count-to slot="count" :end-val="tab.count" />
-  </ul>
+                </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: {
+  methods: {
-    tabWidth() {
+    switchTab(tab) {
-      return 'width: ' + String(100.0 / this.tabs.length) + '%'
+      if (!tab.disabled) {
+        this.$emit('switch-tab', tab.type)
+      }
     },
   },
 }
 </script>
 
 <style lang="scss">
-.tab-navigation {
+.pointer {
-  display: flex;
+  cursor: pointer;
-  margin-top: $space-small;
+}
 
-  > .tab {
+.Tabs {
-    font-weight: $font-weight-bold;
+  position: relative;
-    padding: $space-x-small $space-small;
+  background-color: #fff;
-    margin-right: $space-xx-small;
+  height: 100%;
-    border-radius: $border-radius-base $border-radius-base 0 0;
+  display: flex;
-    background: $color-neutral-100;
+  margin: 0;
-    cursor: pointer;
+  padding: 0;
+  list-style: none;
+
+  &__tab {
+    text-align: center;
+    height: 100%;
+    flex-grow: 1;
+
+    &:hover {
+      border-bottom: 2px solid #c9c6ce;
+    }
 
     &.--active {
-      background: $color-neutral-80;
+      border-bottom: 2px solid #17b53f;
-      border: none;
     }
-
     &.--disabled {
-      background: $background-color-disabled;
+      opacity: $opacity-disabled;
-      border: $border-size-base solid $color-neutral-80;
+      &:hover {
-      border-bottom: none;
+        border-bottom: none;
-      pointer-events: none;
+      }
-      cursor: default;
     }
+  }
+}
+.tab-navigation {
+  position: sticky;
+  top: 53px;
+  z-index: 2;
+}
+.ds-tab-nav.base-card {
+  padding: 0;
 
-    &:hover:not(.--active) {
+  .ds-tab-nav-item {
-      background: $color-neutral-85;
+    &.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;
+      }
     }
   }
 }

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: {