Merge pull request #30 from MattyaDaihuku/fix-#24

MkInstanceIconの変更
team-shahu · Oct 18, 2024 · 1e0c440 · 1e0c440
2 parents 2ea53ec + 7e483cb
commit 1e0c440
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue
@@ -26,8 +26,8 @@ const faviconUrl = computed(() => getProxiedImageUrlNullable(props.instance?.fav
 	height: 25px;
 	border-radius: 50%;
 	opacity: 0.7;
-	background: var(--panel);
-	box-shadow: 0 0 0 2px var(--panel);
+	background: var(--MI_THEME-panel);
+	box-shadow: 0 0 0 2px var(--MI_THEME-panel);
 }
 
 @container (max-width: 580px) {

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -47,8 +47,7 @@ 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" :instance="appearNote.user.instance"/>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :showInstance="!!showInstanceIcon && !!showTicker"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker && !showInstanceIcon" :instance="appearNote.user.instance"/>
@@ -186,7 +185,6 @@ 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, type OpenOnRemoteOptions } from '@/scripts/please-login.js';
 import { checkWordMute } from '@/scripts/check-word-mute.js';
 import { userPage } from '@/filters/user.js';
@@ -814,16 +812,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 0;
 }
 
-.instanceicon {
-	display: block !important;
-	padding-top: 33px;
-	width: 0;
-	height: 25px;
-	z-index: 10;
-	position: sticky !important;
-	top: calc(22px + var(--stickyTop, 0px));
-}
-
 .main {
 	flex: 1;
 	min-width: 0;
@@ -964,12 +952,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 		width: 50px;
 		height: 50px;
 	}
-
-	.instanceicon {
-		padding-top: 29px;
-		height: 21px;
-		width: 0;
-	}
 }
 
 @container (max-width: 500px) {
@@ -1016,13 +998,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 		height: 46px;
 		top: calc(14px + var(--MI-stickyTop, 0px));
 	}
-
-	.instanceicon {
-		padding-top: 27px;
-		height: 19px;
-		width: 0;
-		top: calc(14px + var(--stickyTop, 0px));
-	}
 }
 
 @container (max-width: 400px) {
@@ -1058,11 +1033,6 @@ 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/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			}"
 			alt=""
 		>
+		<MkInstanceIcon v-if="showInstance" :class="$style.instanceicon" :instance="user.instance"/>
 	</template>
 </component>
 </template>
@@ -49,6 +50,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { acct, userPage } from '@/filters/user.js';
 import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store.js';
+import MkInstanceIcon from '@/components/MkInstanceIcon.vue';
 
 const animation = ref(defaultStore.state.animation);
 const squareAvatars = ref(defaultStore.state.squareAvatars);
@@ -62,13 +64,15 @@ const props = withDefaults(defineProps<{
 	indicator?: boolean;
 	decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
 	forceShowDecoration?: boolean;
+	showInstance?: boolean;
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
 	indicator: false,
 	decorations: undefined,
 	forceShowDecoration: false,
+	showInstance: false,
 });
 
 const emit = defineEmits<{
@@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => {
 		filter: brightness(1);
 	}
 }
+
+.instanceicon {
+	height: 25px;
+	z-index: 2;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+@container (max-width: 580px) {
+	.instanceicon {
+		height: 21px;
+	}
+}
+
+@container (max-width: 450px) {
+	.instanceicon {
+		height: 19px;
+	}
+}
+
+@container (max-width: 300px) {
+	.instanceicon {
+		height: 17px;
+	}
+}
 </style>