From 4c2cd3c8d58649c4a2d891caf088dcbee99596a3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Jun 2022 21:38:34 +0900
Subject: [PATCH] chore(client): tweak ui
---
.../client/src/components/instance-stats.vue | 6 +-
.../client/src/pages/admin/overview.pie.vue | 6 +-
packages/client/src/pages/gallery/edit.vue | 49 ++++----
packages/client/src/pages/gallery/index.vue | 33 ++++--
packages/client/src/pages/gallery/post.vue | 110 +++++++++---------
packages/client/src/pages/user/gallery.vue | 40 +++----
6 files changed, 126 insertions(+), 118 deletions(-)
diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/instance-stats.vue
index 1646a7e93e..2f83b2f897 100644
--- a/packages/client/src/components/instance-stats.vue
+++ b/packages/client/src/components/instance-stats.vue
@@ -112,9 +112,9 @@ function createDoughnut(chartEl, tooltip, data) {
labels: data.map(x => x.name),
datasets: [{
backgroundColor: data.map(x => x.color),
- borderWidth: 0,
- spacing: 4,
- hoverOffset: 4,
+ borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
+ borderWidth: 2,
+ hoverOffset: 0,
data: data.map(x => x.value),
}],
},
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
index 41a5e53ae3..667f236d9b 100644
--- a/packages/client/src/pages/admin/overview.pie.vue
+++ b/packages/client/src/pages/admin/overview.pie.vue
@@ -64,9 +64,9 @@ onMounted(() => {
labels: props.data.map(x => x.name),
datasets: [{
backgroundColor: props.data.map(x => x.color),
- borderWidth: 0,
- spacing: 4,
- hoverOffset: 4,
+ borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
+ borderWidth: 2,
+ hoverOffset: 0,
data: props.data.map(x => x.value),
}],
},
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index fa3063bde0..1de8328fea 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -1,30 +1,33 @@
<template>
-<div>
- <FormSuspense :p="init">
- <FormInput v-model="title">
- <template #label>{{ $ts.title }}</template>
- </FormInput>
+<MkStickyContainer>
+ <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+ <MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+ <FormSuspense :p="init">
+ <FormInput v-model="title">
+ <template #label>{{ $ts.title }}</template>
+ </FormInput>
- <FormTextarea v-model="description" :max="500">
- <template #label>{{ $ts.description }}</template>
- </FormTextarea>
+ <FormTextarea v-model="description" :max="500">
+ <template #label>{{ $ts.description }}</template>
+ </FormTextarea>
- <div class="">
- <div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
- <div class="name">{{ file.name }}</div>
- <button v-tooltip="$ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
+ <div class="">
+ <div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
+ <div class="name">{{ file.name }}</div>
+ <button v-tooltip="$ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
+ </div>
+ <FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
</div>
- <FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton>
- </div>
- <FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch>
+ <FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch>
- <FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
- <FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
+ <FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+ <FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton>
- <FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
- </FormSuspense>
-</div>
+ <FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
+ </FormSuspense>
+ </MkSpacer>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
@@ -71,7 +74,7 @@ async function save() {
fileIds: files.map(file => file.id),
isSensitive: isSensitive,
});
- mainRouter.push(`/gallery/${props.postId}`);
+ router.push(`/gallery/${props.postId}`);
} else {
const created = await os.apiWithDialog('gallery/posts/create', {
title: title,
@@ -92,7 +95,7 @@ async function del() {
await os.apiWithDialog('gallery/posts/delete', {
postId: props.postId,
});
- mainRouter.push('/gallery');
+ router.push('/gallery');
}
watch(() => props.postId, () => {
@@ -113,9 +116,11 @@ const headerTabs = $computed(() => []);
definePageMetadata(computed(() => props.postId ? {
title: i18n.ts.edit,
icon: 'fas fa-pencil-alt',
+ bg: 'var(--bg)',
} : {
title: i18n.ts.postToGallery,
icon: 'fas fa-pencil-alt',
+ bg: 'var(--bg)',
}));
</script>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index b26470dbe9..1eb6ce22f8 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,14 +1,8 @@
<template>
<MkStickyContainer>
- <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+ <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="1400">
<div class="_root">
- <MkTab v-if="$i" v-model="tab">
- <option value="explore"><i class="fas fa-icons"></i> {{ $ts.gallery }}</option>
- <option value="liked"><i class="fas fa-heart"></i> {{ $ts._gallery.liked }}</option>
- <option value="my"><i class="fas fa-edit"></i> {{ $ts._gallery.my }}</option>
- </MkTab>
-
<div v-if="tab === 'explore'">
<MkFolder class="_gap">
<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
@@ -60,6 +54,9 @@ import number from '@/filters/number';
import * as os from '@/os';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+
+const router = useRouter();
const props = defineProps<{
tag?: string;
@@ -100,9 +97,27 @@ watch(() => props.tag, () => {
if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
});
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+ icon: 'fas fa-plus',
+ text: i18n.ts.create,
+ handler: () => {
+ router.push('/gallery/new');
+ },
+}]);
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+ key: 'explore',
+ title: i18n.ts.gallery,
+ icon: 'fas fa-icons',
+}, {
+ key: 'liked',
+ title: i18n.ts._gallery.liked,
+ icon: 'fas fa-heart',
+}, {
+ key: 'my',
+ title: i18n.ts._gallery.my,
+ icon: 'fas fa-edit',
+}]);
definePageMetadata({
title: i18n.ts.gallery,
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index d5f3253b3e..6651c3e28f 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -1,52 +1,57 @@
<template>
-<div class="_root">
- <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
- <div v-if="post" class="rkxwuolj">
- <div class="files">
- <div v-for="file in post.files" :key="file.id" class="file">
- <img :src="file.url"/>
- </div>
- </div>
- <div class="body _block">
- <div class="title">{{ post.title }}</div>
- <div class="description"><Mfm :text="post.description"/></div>
- <div class="info">
- <i class="fas fa-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
- </div>
- <div class="actions">
- <div class="like">
- <MkButton v-if="post.isLiked" v-tooltip="$ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
- <MkButton v-else v-tooltip="$ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+<MkStickyContainer>
+ <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+ <MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
+ <div class="_root">
+ <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+ <div v-if="post" class="rkxwuolj">
+ <div class="files">
+ <div v-for="file in post.files" :key="file.id" class="file">
+ <img :src="file.url"/>
+ </div>
</div>
- <div class="other">
- <button v-if="$i && $i.id === post.user.id" v-tooltip="$ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
- <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
- <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+ <div class="body _block">
+ <div class="title">{{ post.title }}</div>
+ <div class="description"><Mfm :text="post.description"/></div>
+ <div class="info">
+ <i class="fas fa-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
+ </div>
+ <div class="actions">
+ <div class="like">
+ <MkButton v-if="post.isLiked" v-tooltip="$ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+ <MkButton v-else v-tooltip="$ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+ </div>
+ <div class="other">
+ <button v-if="$i && $i.id === post.user.id" v-tooltip="$ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
+ <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+ <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+ </div>
+ </div>
+ <div class="user">
+ <MkAvatar :user="post.user" class="avatar"/>
+ <div class="name">
+ <MkUserName :user="post.user" style="display: block;"/>
+ <MkAcct :user="post.user"/>
+ </div>
+ <MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+ </div>
</div>
+ <MkAd :prefer="['horizontal', 'horizontal-big']"/>
+ <MkContainer :max-height="300" :foldable="true" class="other">
+ <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+ <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
+ <div class="sdrarzaf">
+ <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+ </div>
+ </MkPagination>
+ </MkContainer>
</div>
- <div class="user">
- <MkAvatar :user="post.user" class="avatar"/>
- <div class="name">
- <MkUserName :user="post.user" style="display: block;"/>
- <MkAcct :user="post.user"/>
- </div>
- <MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
- </div>
- </div>
- <MkAd :prefer="['horizontal', 'horizontal-big']"/>
- <MkContainer :max-height="300" :foldable="true" class="other">
- <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
- <div class="sdrarzaf">
- <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
- </div>
- </MkPagination>
- </MkContainer>
+ <MkError v-else-if="error" @retry="fetch()"/>
+ <MkLoading v-else/>
+ </transition>
</div>
- <MkError v-else-if="error" @retry="fetch()"/>
- <MkLoading v-else/>
- </transition>
-</div>
+ </MkSpacer>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
@@ -133,23 +138,18 @@ function edit() {
watch(() => props.postId, fetchPost, { immediate: true });
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+ icon: 'fas fa-pencil-alt',
+ text: i18n.ts.edit,
+ handler: edit,
+}]);
const headerTabs = $computed(() => []);
definePageMetadata(computed(() => post ? {
title: post.title,
avatar: post.user,
- path: `/gallery/${post.id}`,
- share: {
- title: post.title,
- text: post.description,
- },
- actions: [{
- icon: 'fas fa-pencil-alt',
- text: i18n.ts.edit,
- handler: edit,
- }],
+ bg: 'var(--bg)',
} : null));
</script>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 07dda4a292..6af28d455b 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -8,36 +8,24 @@
</div>
</template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
import MkPagination from '@/components/ui/pagination.vue';
-export default defineComponent({
- components: {
- MkPagination,
- MkGalleryPostPreview,
- },
-
- props: {
- user: {
- type: Object,
- required: true
- },
- },
-
- data() {
- return {
- pagination: {
- endpoint: 'users/gallery/posts' as const,
- limit: 6,
- params: computed(() => ({
- userId: this.user.id
- })),
- },
- };
- },
+const props = withDefaults(defineProps<{
+ user: misskey.entities.User;
+}>(), {
});
+
+const pagination = {
+ endpoint: 'users/gallery/posts' as const,
+ limit: 6,
+ params: computed(() => ({
+ userId: props.user.id,
+ })),
+};
</script>
<style lang="scss" scoped>