From 0eff9614f26d48198942f9b861a36419b3c5eab4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 19 Jul 2021 15:11:28 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E5=9B=9B=E8=A7=92=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                       |  1 +
 src/client/components/global/avatar.vue | 56 ++++++++++++++-----------
 src/client/pages/settings/general.vue   |  6 +++
 src/client/store.ts                     |  4 ++
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 36d1f62ac..406828e3c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -764,6 +764,7 @@ ratio: "比率"
 customCss: "カスタムCSS"
 customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
 global: "グローバル"
+squareAvatars: "アイコンを四角形で表示"
 
 _ad:
   back: "戻る"
diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue
index 64fb2116b..eea970ec9 100644
--- a/src/client/components/global/avatar.vue
+++ b/src/client/components/global/avatar.vue
@@ -1,9 +1,9 @@
 <template>
-<span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
-<MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
@@ -81,28 +81,6 @@ export default defineComponent({
 	border-radius: 100%;
 	line-height: 16px;
 
-	&.cat {
-		&:before, &:after {
-			background: #df548f;
-			border: solid 4px currentColor;
-			box-sizing: border-box;
-			content: '';
-			display: inline-block;
-			height: 50%;
-			width: 50%;
-		}
-
-		&:before {
-			border-radius: 0 75% 75%;
-			transform: rotate(37.5deg) skew(30deg);
-		}
-
-		&:after {
-			border-radius: 75% 0 75% 75%;
-			transform: rotate(-37.5deg) skew(-30deg);
-		}
-	}
-
 	> .inner {
 		position: absolute;
 		bottom: 0;
@@ -125,5 +103,35 @@ export default defineComponent({
 		width: 20%;
 		height: 20%;
 	}
+
+	&.square {
+		border-radius: 20%;
+
+		> .inner {
+			border-radius: 20%;
+		}
+	}
+
+	&.cat {
+		&:before, &:after {
+			background: #df548f;
+			border: solid 4px currentColor;
+			box-sizing: border-box;
+			content: '';
+			display: inline-block;
+			height: 50%;
+			width: 50%;
+		}
+
+		&:before {
+			border-radius: 0 75% 75%;
+			transform: rotate(37.5deg) skew(30deg);
+		}
+
+		&:after {
+			border-radius: 75% 0 75% 75%;
+			transform: rotate(-37.5deg) skew(-30deg);
+		}
+	}
 }
 </style>
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 9dbc10314..cc40d2be9 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -37,6 +37,7 @@
 		<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
 		<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
 		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
+		<FormSwitch v-model:value="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
 		<FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
 		<FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
 			<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
@@ -145,6 +146,7 @@ export default defineComponent({
 		instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
 		enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
 		useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
+		squareAvatars: defaultStore.makeGetterSetter('squareAvatars'),
 	},
 
 	watch: {
@@ -176,6 +178,10 @@ export default defineComponent({
 			this.reloadAsk();
 		},
 
+		squareAvatars() {
+			this.reloadAsk();
+		},
+
 		showGapBetweenNotesInTimeline() {
 			this.reloadAsk();
 		},
diff --git a/src/client/store.ts b/src/client/store.ts
index 04f9e83c6..2ae9cd790 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -194,6 +194,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false
 	},
+	squareAvatars: {
+		where: 'device',
+		default: false
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期