SWREI/switched
0
0
Fork 0
Code

enhance(client): tweak channel pages

Browse Source
This commit is contained in:
syuilo 2021-12-23 16:10:13 +09:00
parent ee144acea9
commit cc441258db
4 changed files with 97 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/ui/pagination.vue
View File

@ -5,7 +5,12 @@
<MkError v-else-if="error" @retry="init()"/> <MkError v-else-if="error" @retry="init()"/>
<div v-else-if="empty" key="_empty_" class="empty"> <div v-else-if="empty" key="_empty_" class="empty">
<slot name="empty"></slot> <slot name="empty">
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.nothing }}</div>
</div>
</slot>
</div> </div>
<div v-else class="cxiknjgy"> <div v-else class="cxiknjgy">

34
packages/client/src/pages/channel-editor.vue
View File

@ -1,28 +1,26 @@
<template> <template>
<div> <MkSpacer :content-max="700">
<div class="_section"> <div class="_formRoot">
<div class="_content"> <MkInput v-model="name" class="_formBlock">
<MkInput v-model="name"> <template #label>{{ $ts.name }}</template>
<template #label>{{ $ts.name }}</template> </MkInput>
</MkInput>
<MkTextarea v-model="description"> <MkTextarea v-model="description" class="_formBlock">
<template #label>{{ $ts.description }}</template> <template #label>{{ $ts.description }}</template>
</MkTextarea> </MkTextarea>
<div class="banner"> <div class="banner">
<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton> <MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
<div v-else-if="bannerUrl"> <div v-else-if="bannerUrl">
<img :src="bannerUrl" style="width: 100%;"/> <img :src="bannerUrl" style="width: 100%;"/>
<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton> <MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
</div>
</div> </div>
</div> </div>
<div class="_footer"> <div class="_formBlock">
<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton> <MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
</div> </div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -51,9 +49,11 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.channelId ? { [symbols.PAGE_INFO]: computed(() => this.channelId ? {
title: this.$ts._channel.edit, title: this.$ts._channel.edit,
icon: 'fas fa-satellite-dish', icon: 'fas fa-satellite-dish',
bg: 'var(--bg)',
} : { } : {
title: this.$ts._channel.create, title: this.$ts._channel.create,
icon: 'fas fa-satellite-dish', icon: 'fas fa-satellite-dish',
bg: 'var(--bg)',
}), }),
channel: null, channel: null,
name: null, name: null,

58
packages/client/src/pages/channel.vue
View File

@ -1,29 +1,31 @@
<template> <template>
<div v-if="channel" class="_section"> <MkSpacer :content-max="700">
<div class="wpgynlbz _content _panel _gap" :class="{ hide: !showBanner }"> <div v-if="channel">
<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/> <div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
<button class="_button toggle" @click="() => showBanner = !showBanner"> <XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
<template v-if="showBanner"><i class="fas fa-angle-up"></i></template> <button class="_button toggle" @click="() => showBanner = !showBanner">
<template v-else><i class="fas fa-angle-down"></i></template> <template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
</button> <template v-else><i class="fas fa-angle-down"></i></template>
<div v-if="!showBanner" class="hideOverlay"> </button>
</div> <div v-if="!showBanner" class="hideOverlay">
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner"> </div>
<div class="status"> <div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
<div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div> <div class="status">
<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div> <div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
</div>
<div class="fade"></div>
</div>
<div v-if="channel.description" class="description">
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
</div> </div>
<div class="fade"></div>
</div>
<div v-if="channel.description" class="description">
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
</div> </div>
<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
</div> </div>
</MkSpacer>
<XPostForm v-if="$i" :channel="channel" class="post-form _content _panel _gap" fixed/>
<XTimeline :key="channelId" class="_content _gap" src="channel" :channel="channelId" @before="before" @after="after"/>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -55,6 +57,12 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.channel ? { [symbols.PAGE_INFO]: computed(() => this.channel ? {
title: this.channel.name, title: this.channel.name,
icon: 'fas fa-satellite-dish', icon: 'fas fa-satellite-dish',
bg: 'var(--bg)',
actions: [...(this.$i && this.$i.id === this.channel.userId ? [{
icon: 'fas fa-cog',
text: this.$ts.edit,
handler: this.edit,
}] : [])],
} : null), } : null),
channel: null, channel: null,
showBanner: true, showBanner: true,
@ -79,8 +87,10 @@ export default defineComponent({
} }
}, },
created() { methods: {
edit() {
this.$router.push(`/channels/${this.channel.id}/edit`);
}
}, },
}); });
</script> </script>

75
packages/client/src/pages/channels.vue
View File

@ -1,58 +1,63 @@
<template> <template>
<div> <MkSpacer :content-max="700">
<div v-if="$i" class="_section" style="padding: 0;"> <div v-if="tab === 'featured'" class="_content grwlizim featured">
<MkTab v-model="tab" class="_content"> <MkPagination v-slot="{items}" :pagination="featuredPagination">
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._channel.featured }}</option> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
<option value="following"><i class="fas fa-heart"></i> {{ $ts._channel.following }}</option> </MkPagination>
<option value="owned"><i class="fas fa-edit"></i> {{ $ts._channel.owned }}</option>
</MkTab>
</div> </div>
<div v-else-if="tab === 'following'" class="_content grwlizim following">
<div class="_section"> <MkPagination v-slot="{items}" :pagination="followingPagination">
<div v-if="tab === 'featured'" class="_content grwlizim featured"> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
<MkPagination v-slot="{items}" :pagination="featuredPagination"> </MkPagination>
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
<div v-if="tab === 'following'" class="_content grwlizim following">
<MkPagination v-slot="{items}" :pagination="followingPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
<div v-if="tab === 'owned'" class="_content grwlizim owned">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
</div> </div>
</div> <div v-else-if="tab === 'owned'" class="_content grwlizim owned">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
</MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import MkChannelPreview from '@/components/channel-preview.vue'; import MkChannelPreview from '@/components/channel-preview.vue';
import MkPagination from '@/components/ui/pagination.vue'; import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkTab from '@/components/tab.vue';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
MkChannelPreview, MkPagination, MkButton, MkTab MkChannelPreview, MkPagination, MkButton,
}, },
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.channel, title: this.$ts.channel,
icon: 'fas fa-satellite-dish', icon: 'fas fa-satellite-dish',
action: { bg: 'var(--bg)',
actions: [{
icon: 'fas fa-plus', icon: 'fas fa-plus',
text: this.$ts.create,
handler: this.create handler: this.create
} }],
}, tabs: [{
active: this.tab === 'featured',
title: this.$ts._channel.featured,
icon: 'fas fa-fire-alt',
onClick: () => { this.tab = 'featured'; },
}, {
active: this.tab === 'following',
title: this.$ts._channel.following,
icon: 'fas fa-heart',
onClick: () => { this.tab = 'following'; },
}, {
active: this.tab === 'owned',
title: this.$ts._channel.owned,
icon: 'fas fa-edit',
onClick: () => { this.tab = 'owned'; },
},]
})),
tab: 'featured', tab: 'featured',
featuredPagination: { featuredPagination: {
endpoint: 'channels/featured', endpoint: 'channels/featured',