mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Implement component for user profile tab, first step
This commit is contained in:
Wolfgang Huß
parent
a74d47e9b7
commit
5e910000aa
@ -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>
|
||||
@ -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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
// Wolle .pointer {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
.Tabs {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
// Wolle .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;
|
||||
// &__tab {
|
||||
// text-align: center;
|
||||
// height: 100%;
|
||||
// flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid #c9c6ce;
|
||||
}
|
||||
// &:hover {
|
||||
// border-bottom: 2px solid #c9c6ce;
|
||||
// }
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #17b53f;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.active {
|
||||
// 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 {
|
||||
position: sticky;
|
||||
top: 53px;
|
||||
z-index: 2;
|
||||
}
|
||||
.ds-tab-nav.base-card {
|
||||
padding: 0;
|
||||
// Wolle .profile-top-navigation {
|
||||
// position: sticky;
|
||||
// top: 53px;
|
||||
// z-index: 2;
|
||||
// }
|
||||
// Wolle .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.profile-post-add-button {
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user