From 27c373ddf4516166d43d3f3c56870cb30048af94 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Apr 2021 00:12:50 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/date-separated-list.vue | 31 ++++-----
 src/client/components/form/suspense.vue       |  1 -
 src/client/components/global/loading.vue      |  1 -
 src/client/components/notes.vue               | 63 ++++++++++++-------
 src/client/components/notifications.vue       | 50 ++++++++-------
 src/client/components/timeline.vue            |  2 +-
 src/client/pages/channel.vue                  |  2 +-
 src/client/pages/note.vue                     |  4 +-
 src/client/pages/user/index.timeline.vue      |  2 +-
 9 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 833cdfc898..012ed42385 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -18,7 +18,12 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	methods: {
@@ -37,18 +42,16 @@ export default defineComponent({
 	},
 
 	render() {
-		const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el));
-
 		if (this.items.length === 0) return;
 
 		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
-			class: 'sqadhkmv' + (noGap ? ' _block' : ''),
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 			name: 'list',
 			tag: 'div',
 			'data-direction': this.direction,
 			'data-reversed': this.reversed ? 'true' : 'false',
 		} : {
-			class: 'sqadhkmv',
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 		}, this.items.map((item, i) => {
 			const el = this.$slots.default({
 				item: item
@@ -154,17 +157,17 @@ export default defineComponent({
 			}
 		}
 	}
-}
 
-._noGap_ .sqadhkmv {
-	> * {
-		margin: 0 !important;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
+	&.noGap {
+		> * {
+			margin: 0 !important;
+			border: none;
+			border-radius: 0;
+			box-shadow: none;
 
-		&:not(:last-child) {
-			border-bottom: solid 0.5px var(--divider);
+			&:not(:last-child) {
+				border-bottom: solid 0.5px var(--divider);
+			}
 		}
 	}
 }
diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue
index e22b09ada4..562fe23e06 100644
--- a/src/client/components/form/suspense.vue
+++ b/src/client/components/form/suspense.vue
@@ -80,7 +80,6 @@ export default defineComponent({
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
diff --git a/src/client/components/global/loading.vue b/src/client/components/global/loading.vue
index 17d71b5c7b..9b810f0a16 100644
--- a/src/client/components/global/loading.vue
+++ b/src/client/components/global/loading.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@client/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 3bcdf7dfda..675748d540 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -1,32 +1,34 @@
 <template>
-<div>
-	<div class="_fullinfo" v-if="empty">
+<transition name="fade" mode="out-in">
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div class="_fullinfo" v-else-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<MkLoading v-if="fetching"/>
+	<div v-else>
+		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
+			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 
-	<MkError v-if="error" @retry="init()"/>
+		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap">
+			<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+		</XList>
 
-	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
+		<div v-show="more && !reversed" style="margin-top: var(--margin);">
+			<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 	</div>
-
-	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
-	</XList>
-
-	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
-	</div>
-</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -57,11 +59,15 @@ export default defineComponent({
 		pagination: {
 			required: true
 		},
-
 		prop: {
 			type: String,
 			required: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	emits: ['before', 'after'],
@@ -92,3 +98,14 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 12d2d2cbd2..1b789093ef 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,21 +1,23 @@
 <template>
-<div class="mfcuwfyp _noGap_ _magnetParent">
+<transition name="fade" mode="out-in">
 	<MkLoading v-if="fetching"/>
 
-	<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }">
-		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
-		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
-	</XList>
+	<MkError v-else-if="error" @retry="init()"/>
 
-	<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-		<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-		<template v-if="moreFetching"><MkLoading inline/></template>
-	</button>
+	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
 
-	<p class="empty" v-if="empty">{{ $ts.noNotifications }}</p>
+	<div v-else class="_magnetParent">
+		<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
+			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
+			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+		</XList>
 
-	<MkError v-if="error" @retry="init()"/>
-</div>
+		<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
+		</button>
+	</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -122,17 +124,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mfcuwfyp {
-	> .empty {
-		margin: 0;
-		padding: 16px;
-		text-align: center;
-		color: var(--fg);
-	}
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
 
-	> .placeholder {
-		padding: 32px;
-		opacity: 0.3;
-	}
+.mfcuwfyp {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
+	color: var(--fg);
 }
 </style>
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index faa3984638..753eba2ba1 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<XNotes :class="{ _noGap_: !$store.state.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index 0d0184a517..f98bb41a38 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -22,7 +22,7 @@
 
 	<XPostForm :channel="channel" class="post-form _content _panel _gap" fixed v-if="$i"/>
 
-	<XTimeline class="_content _gap _noGap_" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
+	<XTimeline class="_content _gap" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
 </div>
 </template>
 
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 871bdd7200..77f15b8a49 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -2,7 +2,7 @@
 <div class="fcuexfpr _root">
 	<div v-if="note" class="note" v-anim>
 		<div class="_gap" v-if="showNext">
-			<XNotes class="_content _noGap_" :pagination="next"/>
+			<XNotes class="_content" :pagination="next" :no-gap="true"/>
 		</div>
 
 		<div class="main _gap">
@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="_gap" v-if="showPrev">
-			<XNotes class="_content _noGap_" :pagination="prev"/>
+			<XNotes class="_content" :pagination="prev" :no-gap="true"/>
 		</div>
 	</div>
 
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 4941abdade..287e6c8b22 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -5,7 +5,7 @@
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" class="_noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" :no-gap="true" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>