From 3a990dce7520eb1e4fabb2dbdf0860f2c60432e4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Dec 2021 17:05:26 +0900
Subject: refactor(client): refactor

---
 packages/client/src/scripts/use-tooltip.ts | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index 0df4baca7b..d0c6756eb1 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -18,6 +18,9 @@ export function useTooltip(
 	const open = () => {
 		close();
 		if (!isHovering) return;
+		if (elRef.value == null) return;
+		const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+		if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
 
 		const showing = ref(true);
 		onShow(showing);
-- 
cgit v1.2.3-freya


From b4636631751449da34e2bad7e7276546c6fd3967 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Dec 2021 12:34:24 +0900
Subject: enhance(client): tweak ui

---
 packages/client/src/components/page-window.vue | 26 +++++++++++++++++++++++++-
 packages/client/src/components/ui/window.vue   |  5 ++++-
 packages/client/src/scripts/use-tooltip.ts     |  7 ++++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/page-window.vue
index 39c185b3e0..ec7451d5aa 100644
--- a/packages/client/src/components/page-window.vue
+++ b/packages/client/src/components/page-window.vue
@@ -16,7 +16,13 @@
 	<template #headerLeft>
 		<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 	</template>
-	<div class="yrolvcoq">
+	<template #headerRight>
+		<button v-tooltip="$ts.showInPage" class="_button" @click="expand()"><i class="fas fa-expand-alt"></i></button>
+		<button v-tooltip="$ts.popout" class="_button" @click="popout()"><i class="fas fa-external-link-alt"></i></button>
+		<button class="_button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
+	</template>
+
+	<div class="yrolvcoq" :style="{ background: pageInfo?.bg }">
 		<MkStickyContainer>
 			<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
 			<component :is="component" v-bind="props" :ref="changePage"/>
@@ -33,6 +39,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { resolve } from '@/router';
 import { url } from '@/config';
 import * as symbols from '@/symbols';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -139,6 +146,23 @@ export default defineComponent({
 			this.props = props;
 		},
 
+		menu(ev) {
+			os.popupMenu([{
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.$refs.window.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], ev.currentTarget || ev.target);
+		},
+
 		back() {
 			this.navigate(this.history.pop(), false);
 		},
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index d01498d8df..bd33289ccc 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -414,6 +414,10 @@ export default defineComponent({
 				}
 			}
 
+			> .left {
+				min-width: 16px;
+			}
+
 			> .title {
 				flex: 1;
 				position: relative;
@@ -421,7 +425,6 @@ export default defineComponent({
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				text-align: center;
 				cursor: move;
 			}
 		}
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index d0c6756eb1..bc8f27a038 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,4 +1,4 @@
-import { Ref, ref, watch } from 'vue';
+import { Ref, ref, watch, onUnmounted } from 'vue';
 
 export function useTooltip(
 	elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
@@ -72,9 +72,14 @@ export function useTooltip(
 			el.addEventListener('mouseleave', onMouseleave, { passive: true });
 			el.addEventListener('touchstart', onTouchstart, { passive: true });
 			el.addEventListener('touchend', onTouchend, { passive: true });
+			el.addEventListener('click', close, { passive: true });
 		}
 	}, {
 		immediate: true,
 		flush: 'post',
 	});
+
+	onUnmounted(() => {
+		close();
+	});
 }
-- 
cgit v1.2.3-freya


From 601bc3e3ccf2ba692b1354decd2096b501b0dd92 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Dec 2021 13:38:53 +0900
Subject: clean up

---
 packages/client/src/pages/admin/file-dialog.vue  |  3 ---
 packages/client/src/pages/antenna-timeline.vue   | 11 -----------
 packages/client/src/pages/favorites.vue          | 13 +------------
 packages/client/src/pages/featured.vue           | 13 +------------
 packages/client/src/pages/mentions.vue           | 13 +------------
 packages/client/src/pages/messages.vue           | 13 +------------
 packages/client/src/pages/my-groups/group.vue    |  3 ---
 packages/client/src/pages/my-lists/list.vue      |  3 ---
 packages/client/src/pages/notifications.vue      | 11 +----------
 packages/client/src/pages/search.vue             | 13 +------------
 packages/client/src/pages/tag.vue                | 13 +------------
 packages/client/src/pages/timeline.vue           | 11 -----------
 packages/client/src/pages/user-list-timeline.vue | 11 -----------
 packages/client/src/pages/user/index.vue         |  4 ----
 packages/client/src/scripts/loading.ts           | 11 -----------
 packages/client/src/ui/deck/direct-column.vue    | 11 -----------
 packages/client/src/ui/deck/mentions-column.vue  | 11 -----------
 17 files changed, 7 insertions(+), 161 deletions(-)
 delete mode 100644 packages/client/src/scripts/loading.ts

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin/file-dialog.vue
index f0774b2946..4c33f62399 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin/file-dialog.vue
@@ -40,7 +40,6 @@ import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
-import Progress from '@/scripts/loading';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 
@@ -74,11 +73,9 @@ export default defineComponent({
 
 	methods: {
 		async fetch() {
-			Progress.start();
 			this.file = await os.api('drive/files/show', { fileId: this.fileId });
 			this.info = await os.api('admin/drive/show-file', { fileId: this.fileId });
 			this.isSensitive = this.file.isSensitive;
-			Progress.done();
 		},
 
 		showUser() {
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 2738208c9d..c38f285725 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -7,8 +7,6 @@
 			src="antenna"
 			:antenna="antennaId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 980d59835f..faab864744 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="jmelgwjh">
 	<div class="body">
-		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -33,16 +32,6 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
 
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index f5edf25594..0844c0952f 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -29,15 +28,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index cd9c6a8fdf..691d3bd9aa 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -28,15 +27,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 9fde0bc7d5..9085af9489 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -31,15 +30,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 89c8659b4f..c307f037a6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -73,7 +72,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/groups/show', {
 				groupId: this.groupId
 			}).then(group => {
@@ -82,7 +80,6 @@ export default defineComponent({
 					userIds: this.group.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 0bfa20514b..a25522f933 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -36,7 +36,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -68,7 +67,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/lists/show', {
 				listId: this.$route.params.list
 			}).then(list => {
@@ -77,7 +75,6 @@ export default defineComponent({
 					userIds: this.list.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index cf8e934b59..695c54a535 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,14 +1,13 @@
 <template>
 <MkSpacer :content-max="800">
 	<div class="clupoqwt">
-		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'" @before="before" @after="after"/>
+		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -53,14 +52,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		setFilter(ev) {
 			const typeItems = notificationTypes.map(t => ({
 				text: this.$t(`_notification._types.${t}`),
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index c7da3fe1c1..85d19bb255 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="_section">
 	<div class="_content">
-		<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+		<XNotes ref="notes" :pagination="pagination"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -39,15 +38,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index f4709659e3..a0c8367849 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,12 +1,11 @@
 <template>
 <div class="_section">
-	<XNotes ref="notes" class="_content" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" class="_content" :pagination="pagination"/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -43,15 +42,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 494932c602..216b3c34ea 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -10,8 +10,6 @@
 				class="tl"
 				:src="src"
 				:sound="true"
-				@before="before()"
-				@after="after()"
 				@queue="queueUpdated"
 			/>
 		</div>
@@ -21,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
@@ -118,14 +115,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index c2970c8d06..4476567cfb 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -7,8 +7,6 @@
 			src="list"
 			:list="listId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 5a529ba8cf..0b96368587 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -205,7 +205,6 @@ import MkFolder from '@/components/ui/folder.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkTab from '@/components/tab.vue';
 import MkInfo from '@/components/ui/info.vue';
-import Progress from '@/scripts/loading';
 import * as Acct from 'misskey-js/built/acct';
 import { getScrollPosition } from '@/scripts/scroll';
 import { getUserMenu } from '@/scripts/get-user-menu';
@@ -328,13 +327,10 @@ export default defineComponent({
 		fetch() {
 			if (this.acct == null) return;
 			this.user = null;
-			Progress.start();
 			os.api('users/show', Acct.parse(this.acct)).then(user => {
 				this.user = user;
 			}).catch(e => {
 				this.error = e;
-			}).finally(() => {
-				Progress.done();
 			});
 		},
 
diff --git a/packages/client/src/scripts/loading.ts b/packages/client/src/scripts/loading.ts
deleted file mode 100644
index 4b0a560e34..0000000000
--- a/packages/client/src/scripts/loading.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-	start: () => {
-		// TODO
-	},
-	done: () => {
-		// TODO
-	},
-	set: val => {
-		// TODO
-	}
-};
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index a11b2e82ed..6ef733dfd0 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -41,15 +40,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 7dd06989cb..4b8dc0c4ee 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -38,15 +37,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
-- 
cgit v1.2.3-freya