Implement component for user profile tab, first step

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

@@ -0,0 +1,161 @@
+<template>
+  <!-- Wolle siehe TabNavigator <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('switchTab', tab.type)"
+    >
+      <ds-space margin="small">
+          {{ tab.count }}
+      </ds-space>
+    </li>
+  </ul> -->
+  <ds-grid-item class="profile-top-navigation" :row-span="3" 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" :class="{ active: activeTab === tab.type }">
+          <a @click="$emit('switch', tab.type)">
+            <ds-space margin="small">
+              <!-- Wolle translate -->
+              <client-only placeholder="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'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+
+export default {
+  components: {
+    HcCountTo,
+    MasonryGridItem,
+  },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    activeTab: {
+      type: String,
+    },
+  },
+  // Wolle computed: {
+  //   tabWidth() {
+  //     return 'width: ' + String(100.0 / this.tabs.length) + '%'
+  //   },
+  // },
+  // Wolle
+  // methods: {
+  //   tabTitle(index) {
+  //     console.log('activeTab: ', this.activeTab)
+  //     console.log('tabTitle: ', this.tabs[index].title)
+  //     return this.tabs[index].title
+  //   },
+  // },
+}
+</script>
+
+<style lang="scss">
+// Wolle clean up
+// .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;
+//     }
+//   }
+// }
+
+
+.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;
+    }
+  }
+}
+.profile-top-navigation {
+  position: sticky;
+  top: 53px;
+  z-index: 2;
+}
+.ds-tab-nav.base-card {
+  padding: 0;
+
+  .ds-tab-nav-item {
+    // Wolle is this doubled?
+    &.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/pages/profile/_id/_slug.vue

@@ -123,7 +123,9 @@
 
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <masonry-grid>
-          <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
+          <!-- TapNavigation -->
+          <new-tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch="handleTab" />
+          <!-- Wolle <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
             <base-card class="ds-tab-nav">
               <ul class="Tabs">
                 <li class="Tabs__tab pointer" :class="{ active: tabActive === 'post' }">
@@ -165,8 +167,9 @@
                 </li>
               </ul>
             </base-card>
-          </ds-grid-item>
+          </ds-grid-item> -->
 
+          <!-- feed -->
           <ds-grid-item :row-span="2" column-span="fullWidth">
             <ds-space centered>
               <nuxt-link :to="{ name: 'post-create' }">
@@ -236,6 +239,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 { profilePagePosts } from '~/graphql/PostQuery'
 import UserQuery from '~/graphql/User'
 import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
@@ -264,6 +268,7 @@ export default {
     MasonryGrid,
     MasonryGridItem,
     FollowList,
+    NewTabNavigation,
   },
   transition: {
     name: 'slide-up',
@@ -310,6 +315,28 @@ export default {
       const { slug } = this.user || {}
       return slug && `@${slug}`
     },
+    tabOptions() {
+      return [
+        {
+          type: 'post',
+          title: this.$t('common.post', null, this.user.contributionsCount),
+          count: this.user.contributionsCount,
+          disabled: this.user.contributionsCount === 0,
+        },
+        {
+          type: 'comment',
+          title: this.$t('profile.commented'),
+          count: this.user.commentedCount,
+          disabled: this.user.commentedCount === 0,
+        },
+        {
+          type: 'shout',
+          title: this.$t('profile.shouted'),
+          count: this.user.shoutedCount,
+          disabled: this.user.shoutedCount === 0,
+        },
+      ]
+    },
   },
   methods: {
     removePostFromList(deletedPost) {
@@ -473,33 +500,33 @@ export default {
 </script>
 
 <style lang="scss">
-.pointer {
+// Wolle .pointer {
-  cursor: pointer;
+//   cursor: pointer;
-}
+// }
 
-.Tabs {
+// Wolle .Tabs {
-  position: relative;
+//   position: relative;
-  background-color: #fff;
+//   background-color: #fff;
-  height: 100%;
+//   height: 100%;
-  display: flex;
+//   display: flex;
-  margin: 0;
+//   margin: 0;
-  padding: 0;
+//   padding: 0;
-  list-style: none;
+//   list-style: none;
 
-  &__tab {
+//   &__tab {
-    text-align: center;
+//     text-align: center;
-    height: 100%;
+//     height: 100%;
-    flex-grow: 1;
+//     flex-grow: 1;
 
-    &:hover {
+//     &:hover {
-      border-bottom: 2px solid #c9c6ce;
+//       border-bottom: 2px solid #c9c6ce;
-    }
+//     }
 
-    &.active {
+//     &.active {
-      border-bottom: 2px solid #17b53f;
+//       border-bottom: 2px solid #17b53f;
-    }
+//     }
-  }
+//   }
-}
+// }
 .profile-avatar.user-avatar {
   margin: auto;
   margin-top: -60px;
@@ -511,26 +538,26 @@ export default {
     right: $space-x-small;
   }
 }
-.profile-top-navigation {
+// Wolle .profile-top-navigation {
-  position: sticky;
+//   position: sticky;
-  top: 53px;
+//   top: 53px;
-  z-index: 2;
+//   z-index: 2;
-}
+// }
-.ds-tab-nav.base-card {
+// Wolle .ds-tab-nav.base-card {
-  padding: 0;
+//   padding: 0;
 
-  .ds-tab-nav-item {
+//   .ds-tab-nav-item {
-    &.ds-tab-nav-item-active {
+//     &.ds-tab-nav-item-active {
-      border-bottom: 3px solid #17b53f;
+//       border-bottom: 3px solid #17b53f;
-      &:first-child {
+//       &:first-child {
-        border-bottom-left-radius: $border-radius-x-large;
+//         border-bottom-left-radius: $border-radius-x-large;
-      }
+//       }
-      &:last-child {
+//       &:last-child {
-        border-bottom-right-radius: $border-radius-x-large;
+//         border-bottom-right-radius: $border-radius-x-large;
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large;
 }