enhance(ui/navbar): サーバーロゴ部分の改修 (#215)

taiyme · May 14, 2024 · 9303a8d · 9303a8d
1 parent 8b826f5
commit 9303a8d
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 106 deletions.
diff --git a/packages/frontend/src/components/TmsServerBanner.vue b/packages/frontend/src/components/TmsServerBanner.vue
@@ -6,62 +6,77 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div
 	v-panel
-	:class="$style.root"
-	:style="{ backgroundImage: props.bannerUrl != null ? `url(${ props.bannerUrl })` : undefined }"
+	:class="[$style.root, { [$style.onOverlay]: serverRef.bannerUrl != null }]"
+	:style="{ backgroundImage: serverRef.bannerUrl != null ? `url(${ serverRef.bannerUrl })` : undefined }"
 >
-	<div
-		:class="['_gaps_m', $style.container, { [$style.overlay]: props.bannerUrl != null }]"
-	>
-		<img :class="$style.icon" :src="props.iconUrl" :alt="props.serverName"/>
-		<div :class="[$style.name, { [$style.onOverlay]: props.bannerUrl != null }]">
-			<b>{{ props.serverName }}</b>
-		</div>
+	<div :class="$style.bannerInner">
+		<img :class="$style.icon" :src="serverRef.iconUrl" :alt="serverRef.name"/>
+		<div :class="$style.name">{{ serverRef.name }}</div>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
-	serverName: string;
-	iconUrl: string;
-	bannerUrl?: string | null;
-}>();
+import { computed } from 'vue';
+import { host } from '@/config.js';
+import { instance } from '@/instance.js';
+
+const serverRef = computed(() => {
+	return {
+		name: instance.name || host,
+		iconUrl: instance.iconUrl || '/favicon.ico',
+		bannerUrl: instance.bannerUrl || null,
+	} as const;
+});
 </script>
 
 <style lang="scss" module>
 .root {
-	text-align: center;
-	border-radius: 10px;
-	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
+	border-radius: 10px;
 	background-size: cover;
 	background-position: center center;
-}
 
-.container {
-	padding: 16px;
-	overflow: hidden; // fallback (overflow: clip)
-	overflow: clip;
+	&.onOverlay {
+		-webkit-backdrop-filter: var(--blur, blur(0px)); // https://stackoverflow.com/questions/36378512
+		backdrop-filter: var(--blur, blur(0px)); // https://stackoverflow.com/questions/36378512
+
+		.bannerInner {
+			background-color: #00000040;
+			-webkit-backdrop-filter: var(--blur, blur(2px));
+			backdrop-filter: var(--blur, blur(2px));
+		}
 
-	&.overlay {
-		background-color: rgba(0, 0, 0, 0.5);
+		.name {
+			margin: -6px; // text-shadow
+			padding: 6px; // text-shadow
+			text-shadow: 0 0 6px #00000050;
+			color: #fff;
+		}
 	}
 }
 
+.bannerInner {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5em;
+	padding: 16px;
+}
+
 .icon {
 	display: block;
 	margin: 0 auto;
+	width: 64px;
 	height: 64px;
 	border-radius: 8px;
 }
 
 .name {
-	display: block;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: 700;
 	color: var(--fg);
-
-	&.onOverlay {
-		color: #fff;
-		text-shadow: 0 0 8px #000;
-	}
 }
 </style>
diff --git a/packages/frontend/src/components/TmsServerLogo.vue b/packages/frontend/src/components/TmsServerLogo.vue
@@ -0,0 +1,126 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<button
+	v-tooltip.noDelay.right="serverRef.name"
+	:class="['_button', $style.root]"
+	@click.prevent.stop="openInstanceMenu"
+	@contextmenu.prevent.stop="openInstanceMenu"
+>
+	<img
+		v-if="props.iconOnly"
+		:class="$style.iconOnly"
+		:src="serverRef.iconUrl"
+		:alt="serverRef.name"
+	/>
+	<div
+		v-else
+		:class="[$style.banner, { [$style.onOverlay]: serverRef.bannerUrl != null }]"
+		:style="{ backgroundImage: serverRef.bannerUrl != null ? `url(${ serverRef.bannerUrl })` : undefined }"
+	>
+		<div :class="$style.bannerInner">
+			<img :class="$style.icon" :src="serverRef.iconUrl" :alt="serverRef.name"/>
+			<div :class="$style.name">{{ serverRef.shortName }}</div>
+			<i :class="$style.mark" class="ti ti-chevron-down"></i>
+		</div>
+	</div>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { host } from '@/config.js';
+import { instance } from '@/instance.js';
+import { openInstanceMenu } from '@/ui/_common_/common.js';
+
+const props = defineProps<{
+	iconOnly?: boolean;
+}>();
+
+const serverRef = computed(() => {
+	return {
+		name: instance.name || host,
+		shortName: instance.shortName || instance.name || host,
+		iconUrl: instance.iconUrl || '/favicon.ico',
+		bannerUrl: instance.bannerUrl || null,
+	} as const;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	box-sizing: border-box;
+	overflow: clip;
+	display: block;
+	width: 100%;
+	padding: var(--tmsServerLogo-padding, 0);
+}
+
+.iconOnly {
+	display: block;
+	margin: 0 auto;
+	width: 30px;
+	height: 30px;
+}
+
+.banner {
+	overflow: clip;
+	border-radius: 6px;
+	background-size: cover;
+	background-position: center center;
+
+	&.onOverlay {
+		-webkit-backdrop-filter: var(--blur, blur(0px)); // https://stackoverflow.com/questions/36378512
+		backdrop-filter: var(--blur, blur(0px)); // https://stackoverflow.com/questions/36378512
+
+		.bannerInner {
+			background-color: #00000040;
+			-webkit-backdrop-filter: var(--blur, blur(2px));
+			backdrop-filter: var(--blur, blur(2px));
+		}
+
+		.name {
+			margin: -6px; // text-shadow
+			padding: 6px; // text-shadow
+			text-shadow: 0 0 6px #00000050;
+			color: #fff;
+		}
+
+		.mark {
+			text-shadow: 0 0 6px #00000050;
+			color: #fff;
+		}
+	}
+}
+
+.bannerInner {
+	display: flex;
+	align-items: center;
+	padding: 8px 0;
+}
+
+.icon {
+	display: block;
+	margin: 0 12px 0 17px;
+	width: 24px;
+	height: 24px;
+	border-radius: 8px;
+}
+
+.name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: 700;
+	color: var(--fg);
+}
+
+.mark {
+	display: block;
+	margin: 0 6px 0 auto;
+	color: var(--fg);
+}
+</style>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
@@ -9,11 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<div class="_gaps_m">
-				<TmsServerBanner
-					:serverName="instance.name ?? host"
-					:iconUrl="instance.iconUrl ?? (instance as any).faviconUrl ?? '/favicon.ico'"
-					:bannerUrl="instance.bannerUrl"
-				/>
+				<TmsServerBanner/>
 
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.description }}</template>

diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -6,10 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<div :class="$style.top">
-		<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
-		<button class="_button" :class="$style.instance" @click="openInstanceMenu">
-			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
-		</button>
+		<div :class="$style.serverLogo">
+			<TmsServerLogo/>
+		</div>
 	</div>
 	<div :class="$style.middle">
 		<MkA :class="$style.item" :activeClass="$style.active" to="/" exact>
@@ -50,13 +49,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, toRef } from 'vue';
-import { openInstanceMenu } from './common.js';
 import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
+import TmsServerLogo from '@/components/TmsServerLogo.vue';
 
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
@@ -89,35 +87,13 @@ function more() {
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	padding: 20px 0;
 	background: var(--X14);
 	-webkit-backdrop-filter: var(--blur, blur(8px));
 	backdrop-filter: var(--blur, blur(8px));
 }
 
-.banner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-size: cover;
-	background-position: center center;
-	-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-	mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-}
-
-.instance {
-	position: relative;
-	display: block;
-	text-align: center;
-	width: 100%;
-}
-
-.instanceIcon {
-	display: inline-block;
-	width: 38px;
-	aspect-ratio: 1;
+.serverLogo {
+	--tmsServerLogo-padding: 20px 12px;
 }
 
 .bottom {