From 30e3e1f7b903fcbad207e41fc2126dc298f7c059 Mon Sep 17 00:00:00 2001
From: yu1024 <yu256g@gmail.com>
Date: Thu, 23 Mar 2023 17:58:08 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=8E=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E3=82=A4=E3=83=B3=E3=82=B9=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9=E6=83=85=E5=A0=B1=E3=81=AE=E8=A1=A8=E7=A4=BA=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=20(taiyme#104)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: taiyme <53635909+taiyme@users.noreply.github.com>
---
 .../src/components/MkInstanceTicker.vue       | 144 ++++++++++++++----
 packages/client/src/components/MkNote.vue     |   2 +-
 .../client/src/components/MkNoteDetailed.vue  |   2 +-
 .../src/pages/settings/akatsukey-settings.vue |  18 ++-
 packages/client/src/store.ts                  |   4 +
 5 files changed, 139 insertions(+), 31 deletions(-)

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 7ed836cd8a86..dbf66724ba76 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,15 +1,16 @@
 <template>
-<div class="hpaizdrt" :class="{ vertical }" :style="tickerColor">
+<div class="hpaizdrt" :class="position" :style="tickerColor">
 	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
 	<span class="name">{{ instance.name }}</span>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { computed, ComputedRef } from 'vue';
 import { instanceName } from '@/config';
 import { instance as Instance } from '@/instance';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	instance?: {
@@ -17,36 +18,42 @@ const props = defineProps<{
 		name: string
 		themeColor?: string
 	}
-	vertical?: boolean
+	forceType?: typeof defaultStore.state.instanceTickerPosition | ComputedRef<typeof defaultStore.state.instanceTickerPosition>;
 }>();
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico',
+	faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable((Instance as { faviconUrl?: string | null }).faviconUrl) ?? '/favicon.ico',
 	name: instanceName,
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
-const vertical = props.vertical ?? false;
+const position = computed(() => {
+	return typeof props.forceType === 'string' ? props.forceType : props.forceType?.value ?? defaultStore.state.instanceTickerPosition;
+});
 
-const yuvColor = (hex) => {
-	const toRgb = (hex) => {
-		const [r, g, b] = Array.from(hex.slice(1).match(/.{2}/g) || [], n => parseInt(n, 16));
-		return { r, g, b };
-	};
-
-	const { r, g, b } = toRgb(hex);
+const hexToRgb = (hex: string): {
+	r: number;
+	g: number;
+	b: number;
+} => {
+	const [r, g, b] = Array.from(hex.slice(1).match(/.{2}/g) ?? [], n => parseInt(n, 16));
+	return { r, g, b };
+};
+const getTickerFgColor = (hex: string): string => {
+	const { r, g, b } = hexToRgb(hex);
 	const yuv = 0.299 * r + 0.587 * g + 0.114 * b;
 
-	return (yuv > 191) ? '#2f2f2fcc' : '#ffffff';
+	return yuv > 191 ? '#2f2f2fcc' : '#ffffff';
 };
 
 const tickerBgColor = instance.themeColor ?? '#777777';
-const tickerFgColor = yuvColor(tickerBgColor);
+const tickerFgColor = getTickerFgColor(tickerBgColor);
 
 const tickerColor = {
 	'--ticker-bg': tickerBgColor,
 	'--ticker-fg': tickerFgColor,
+	'--ticker-bg-rgb': (({ r, g, b }): string => `${r}, ${g}, ${b}`)(hexToRgb(tickerBgColor)),
 };
 </script>
 
@@ -54,41 +61,53 @@ const tickerColor = {
 .hpaizdrt {
 	background: var(--ticker-bg, #777777);
 	color: var(--ticker-fg, #ffffff);
-	width: auto;
-	height: 1.1rem;
-	border-radius: 4px;
 	overflow: hidden;
 
 	> .icon {
-		width: auto;
-		height: 100%;
+		aspect-ratio: 1 / 1;
 	}
 
 	> .name {
-		margin-left: 4px;
-		line-height: 1.1rem;
 		font-size: 0.9em;
 		vertical-align: top;
 		font-weight: bold;
 	}
 
-	&.vertical {
+	&.normal {
+		width: auto;
+		height: 1.1rem;
+		border-radius: 4px;
+		overflow: hidden;
+		> .icon {
+			width: auto;
+			height: 100%;
+		}
+		> .name {
+			margin-left: 4px;
+			line-height: 1.1rem;
+		}
+	}
+
+	&.leftedge {
 		position: absolute;
 		top: 0;
 		left: 0;
+		display: grid;
+		gap: 4px;
+		grid-template-rows: auto 1fr;
 		width: 14px;
 		height: 100%;
 		border-radius: 0;
 
 		> .icon {
+			display: block;
 			width: 100%;
-			height: auto;
 		}
 
 		> .name {
-			display: inline-block;
-			height: calc(100% - 14px);
-			margin-left: 0;
+			display: block;
+			width: 100%;
+			height: 100%;
 			line-height: 14px;
 			writing-mode: vertical-lr;
 			white-space: nowrap;
@@ -96,5 +115,78 @@ const tickerColor = {
 			overflow: hidden;
 		}
 	}
+
+	&.rightedge {
+		@extend .leftedge;
+		left: auto;
+		right: 0;
+	}
+
+	&.bottomright {
+		--ticker-bg-deg: 135deg;
+		pointer-events: none;
+		user-select: none;
+		position: absolute;
+		z-index: -1;
+		inset: 0;
+		padding: 6px;
+		display: flex;
+		gap: 4px;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: flex-end;
+		background: linear-gradient(
+			var(--ticker-bg-deg),
+			rgba(var(--ticker-bg-rgb), 0.35),
+			rgba(var(--ticker-bg-rgb), 0.35) 3em,
+			rgba(0, 0, 0, 0) 3em,
+			rgba(0, 0, 0, 0) calc(100% - 3em),
+			rgba(var(--ticker-bg-rgb), 0.35) calc(100% - 3em),
+			rgba(var(--ticker-bg-rgb), 0.35) 100%
+		);
+		color: #fff;
+		text-shadow: /* 0.866 ≈ sin(60deg) */
+			1px 0 1px #000,
+			0.866px 0.5px 1px #000,
+			0.5px 0.866px 1px #000,
+			0 1px 1px #000,
+			-0.5px 0.866px 1px #000,
+			-0.866px 0.5px 1px #000,
+			-1px 0 1px #000,
+			-0.866px -0.5px 1px #000,
+			-0.5px -0.866px 1px #000,
+			0 -1px 1px #000,
+			0.5px -0.866px 1px #000,
+			0.866px -0.5px 1px #000;
+
+		> .icon {
+			display: block;
+			height: 2em;
+			opacity: 0.8;
+		}
+
+		> .name {
+			display: block;
+			max-width: 100%;
+			margin: -4px; // text-shadow
+			padding: 4px; // text-shadow
+			line-height: 1;
+			opacity: 0.7;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			text-align: end;
+		}
+	}
+
+	&.bottomleft {
+		@extend .bottomright;
+		--ticker-bg-deg: -135deg;
+		align-items: flex-start;
+
+		> .name {
+			text-align: start;
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 455af2145120..75c1f1573083 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -35,7 +35,7 @@
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance" :vertical="true"/>
+			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 2fbdb4a7c2f7..23aaf81f6fc7 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -43,7 +43,7 @@
 					</div>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance" :vertical="false"/>
+				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance" force-type="normal"/>
 			</div>
 		</header>
 		<div class="main">
diff --git a/packages/client/src/pages/settings/akatsukey-settings.vue b/packages/client/src/pages/settings/akatsukey-settings.vue
index b61614248ef3..8b6477c3ef43 100644
--- a/packages/client/src/pages/settings/akatsukey-settings.vue
+++ b/packages/client/src/pages/settings/akatsukey-settings.vue
@@ -1,19 +1,31 @@
 <template>
 <div class="_formRoot">
-	<FormInfo class="_formBlock">以下の機能はすべてベータ版です。</FormInfo>
-
+	<FormInfo class="_formBlock">以下の機能はフォークの機能です。</FormInfo>
+	<FormSection>
+		<FormSelect v-model="InstanceTickerPosition" class="_formBlock">
+			<template #label>ノートのインスタンス情報の表示位置</template>
+			<option value="normal">通常</option>
+			<option value="leftedge">←左端</option>
+			<option value="rightedge">右端→</option>
+			<option value="bottomleft">↙左下</option>
+			<option value="bottomright">右下↘</option>
+			<template #caption>タイムライン上のインスタンス情報を指定した位置に表示します。</template>
+		</FormSelect>
+	</FormSection>
 	<FormSwitch v-model="navBarChatIcon" class="_formBlock">チャットを表示する</FormSwitch>
 	<FormSwitch v-model="navBarReloadIcon" class="_formBlock">リロードを表示する</FormSwitch>
 	<FormSwitch v-model="navBarWidgetIcon" class="_formBlock">ウィジェットを表示する</FormSwitch>
 </div>
 </template>
-	
+
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { defaultStore } from '@/store';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
 
+const InstanceTickerPosition = computed(defaultStore.makeGetterSetter('instanceTickerPosition'));
 const navBarChatIcon = computed(defaultStore.makeGetterSetter('navBarChatIcon'));
 const navBarReloadIcon = computed(defaultStore.makeGetterSetter('navBarReloadIcon'));
 const navBarWidgetIcon = computed(defaultStore.makeGetterSetter('navBarWidgetIcon'));
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 0208d9d08aa7..2e0283180407 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -287,6 +287,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	instanceTickerPosition: {
+		where: 'device',
+		default: 'leftedge' as 'normal' | 'leftedge' | 'rightedge' | 'bottomleft' | 'bottomright',
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期