ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Renamed NewTabNavigation to TabNavigation

Browse Source 
- Renamed old TabNavigation to OldTabNavigation.
This commit is contained in:
Wolfgang Huß 2021-01-21 20:27:13 +01:00
parent 9ce1e089fa
commit ae09aee91c
6 changed files with 161 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/_new/features/SearchResults/SearchResults.story.js
View File

@ -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'

6
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -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,

111
webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue
View File

@ -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>

74
webapp/components/_new/generic/TabNavigation/OldTabNavigation.vue Normal file
View File

@ -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>

123
webapp/components/_new/generic/TabNavigation/TabNavigation.vue
View File

@ -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 {
display: flex;
margin-top: $space-small;
.pointer {
cursor: pointer;
}
> .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;
.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 {
background: $color-neutral-80;
border: none;
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;
}
}
}
}

6
webapp/pages/profile/_id/_slug.vue
View File

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