Merge pull request #15 from MattyaDaihuku/macha-dev

TL上のサーバー情報をアイコン表示に切り替えられるやつ (中身の変更なし)
team-shahu · Jul 9, 2024 · e260847 · e260847
2 parents 38b2a73 + a1dec57
commit e260847
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 2 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -708,6 +708,7 @@ openInSideView: "Open in side view"
 defaultNavigationBehaviour: "Default navigation behavior"
 editTheseSettingsMayBreakAccount: "Editing these settings may damage your account."
 instanceTicker: "Instance information of notes"
+instanceIcon: "Display only the instance's logo on the timeline"
 waitingFor: "Waiting for {x}"
 random: "Random"
 system: "System"

diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -2852,6 +2852,10 @@ export interface Locale extends ILocale {
      * ノートのサーバー情報
      */
     "instanceTicker": string;
+    /**
+     * サーバー情報をアイコンのみにする
+     */
+    "instanceIcon": string;
     /**
      * {x}を待っています
      */

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -709,6 +709,7 @@ openInSideView: "サイドビューで開く"
 defaultNavigationBehaviour: "デフォルトのナビゲーション"
 editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。"
 instanceTicker: "ノートのサーバー情報"
+instanceIcon: "サーバー情報をアイコンのみにする"
 waitingFor: "{x}を待っています"
 random: "ランダム"
 system: "システム"

diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
@@ -703,6 +703,7 @@ openInSideView: "サイドビューで開く"
 defaultNavigationBehaviour: "デフォルトのナビゲーション"
 editTheseSettingsMayBreakAccount: "このへんの設定をようわからんままイジるとアカウントが壊れて使えんくなるかも知れへんで？"
 instanceTicker: "ノートのサーバー情報"
+instanceIcon: "サーバー情報をアイコンだけにするで"
 waitingFor: "{x}を待っとるで"
 random: "ランダム"
 system: "システム"

diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
@@ -701,6 +701,7 @@ openInSideView: "사이드뷰로 열기"
 defaultNavigationBehaviour: "기본 탐색 동작"
 editTheseSettingsMayBreakAccount: "이 설정을 변경하면 계정이 손상될 수 있습니다."
 instanceTicker: "노트의 서버 정보"
+instanceIcon: "타임라인에 인스턴스의 아이콘만 표시하기"
 waitingFor: "{x}을(를) 기다리고 있습니다"
 random: "무작위"
 system: "시스템"

diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
@@ -689,6 +689,7 @@ openInSideView: "Открывать в боковой колонке"
 defaultNavigationBehaviour: "Поведение навигации по умолчанию"
 editTheseSettingsMayBreakAccount: "От изменений в этих настройках ваша учётная запись может поломаться."
 instanceTicker: "Строка с названием инстанса в заметках"
+instanceIcon: "Отображение на временной шкале только значка экземпляра"
 waitingFor: "Ждём, когда {x} ответит"
 random: "Случайные"
 system: "Система"

diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
@@ -640,6 +640,7 @@ openInSideView: "Відкрити збоку"
 defaultNavigationBehaviour: "Поведінка навігації за замовчуванням"
 editTheseSettingsMayBreakAccount: "Зміна цих параметрів може призвести до пошкодження вашого акаунта."
 instanceTicker: "Мітка з назвою інстанса в нотатках"
+instanceIcon: "Відображати лише піктограму екземпляра на часовій шкалі"
 waitingFor: "Чекаємо на {x}"
 random: "Випадковий"
 system: "Система"

diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
@@ -706,6 +706,7 @@ openInSideView: "在侧边栏中打开"
 defaultNavigationBehaviour: "默认导航"
 editTheseSettingsMayBreakAccount: "编辑这些设置可以会损坏您的账号"
 instanceTicker: "帖子的服务器来源"
+instanceIcon: "在时间轴上只显示实例图标"
 waitingFor: "等待 {x}"
 random: "随机"
 system: "系统"

diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
@@ -706,6 +706,8 @@ openInSideView: "在側欄中開啟"
 defaultNavigationBehaviour: "預設導航"
 editTheseSettingsMayBreakAccount: "修改這些設定可能會毀損您的帳戶"
 instanceTicker: "貼文的伺服器資訊"
+instanceIcon: "僅在時間軸上顯示實例的圖標"
+instanceIcon: ""
 waitingFor: "等待{x}"
 random: "隨機"
 system: "系統"

diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue
@@ -0,0 +1,53 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>
+	<img v-if="faviconUrl" :class="$style.topleftIcon" :src="faviconUrl"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
+const props = defineProps<{
+	instance?: {
+		faviconUrl?: string | null
+	}
+}>();
+const faviconUrl = computed(() => getProxiedImageUrlNullable(props.instance?.faviconUrl, 'preview') ?? '/favicon.ico');
+</script>
+
+<style lang="scss" module>
+.topleftIcon {
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	opacity: 0.7;
+	background: var(--panel);
+	box-shadow: 0 0 0 2px var(--panel);
+}
+
+@container (max-width: 580px) {
+	.topleftIcon {
+		width: 21px;
+		height: 21px;
+	}
+}
+
+@container (max-width: 450px) {
+	.topleftIcon {
+		width: 19px;
+		height: 19px;
+	}
+}
+
+@container (max-width: 300px) {
+	.topleftIcon {
+		width: 17px;
+		height: 17px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -47,10 +47,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
+		<MkInstanceIcon v-if="showInstanceIcon && showTicker" :class="$style.instanceicon"/>
 		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+			<MkInstanceTicker v-if="showTicker && !showInstanceIcon" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
@@ -174,6 +175,7 @@ import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkInstanceIcon from '@/components/MkInstanceIcon.vue';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { focusPrev, focusNext } from '@/scripts/focus.js';
 import { checkWordMute } from '@/scripts/check-word-mute.js';
@@ -268,6 +270,7 @@ const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hard
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
+const showInstanceIcon = ref(defaultStore.state.instanceIcon);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const renoteCollapsed = ref(
 	defaultStore.state.collapseRenotes && isRenote && (
@@ -777,6 +780,16 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 0;
 }
 
+.instanceicon {
+	display: block !important;
+	padding-top: 33px;
+	margin-right: -25px;
+	height: 25px;
+	z-index: 10;
+	position: sticky !important;
+	top: calc(22px + var(--stickyTop, 0px));
+}
+
 .main {
 	flex: 1;
 	min-width: 0;
@@ -917,6 +930,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 		width: 50px;
 		height: 50px;
 	}
+
+	.instanceicon {
+		padding-top: 29px;
+		height: 21px;
+		margin-right: -21px;
+	}
 }
 
 @container (max-width: 500px) {
@@ -963,6 +982,13 @@ function emitUpdReaction(emoji: string, delta: number) {
 		height: 46px;
 		top: calc(14px + var(--stickyTop, 0px));
 	}
+
+	.instanceicon {
+		padding-top: 27px;
+		height: 19px;
+		margin-right: -19px;
+		top: calc(14px + var(--stickyTop, 0px));
+	}
 }
 
 @container (max-width: 400px) {
@@ -998,6 +1024,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 		height: 44px;
 	}
 
+	.instanceicon {
+		margin-right: -17px;
+		height: 17px;
+	}
+
 	.root:not(.showActionsOnlyHover) {
 		.footerButton {
 			&:not(:last-child) {

diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
@@ -78,7 +78,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
 				<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
 			</MkSelect>
-
+			<MkSwitch v-if="instanceTicker !== 'none'" v-model="instanceIcon">{{ i18n.ts.instanceIcon }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></MkSwitch>
 			<MkSelect v-model="nsfw">
 				<template #label>{{ i18n.ts.displayOfSensitiveMedia }}</template>
 				<option value="respect">{{ i18n.ts._displayOfSensitiveMedia.respect }}</option>
@@ -312,6 +312,7 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
 const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
 const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
+const instanceIcon = computed(defaultStore.makeGetterSetter('instanceIcon'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
@@ -359,6 +360,7 @@ watch([
 	showNoteActionsOnlyHover,
 	showGapBetweenNotesInTimeline,
 	instanceTicker,
+	instanceIcon,
 	overridedDeviceKind,
 	mediaListWithOneImageAppearance,
 	reactionsDisplaySize,

diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
@@ -312,6 +312,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'remote' as 'none' | 'remote' | 'always',
 	},
+	instanceIcon: {
+		where: 'device',
+		default: false,
+	},
 	emojiPickerScale: {
 		where: 'device',
 		default: 1,