ナビゲーションメニューのバナースタイルの改善

2023-06-15 01:34:41 +09:00 · 2023-06-15 01:34:41 +09:00 · 684ae57011
parent 3419431ae8
commit 684ae57011
10 changed files with 23 additions and 9 deletions
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@ -1107,8 +1107,10 @@ branding: "Branding"
 translateProfile: "Translate a profile"
 _bannerDisplay:
  all: "All"
+  topBottom: "Top and Bottom"
  top: "Top (Server banner)"
  bottom: "Bottom (Profile banner)"
+  bg: "Background"
  hide: "Hide"
 _requireRefreshBehavior:
  dialog: "Show warning dialog"
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -1110,8 +1110,10 @@ export interface Locale {
    "translateProfile": string;
    "_bannerDisplay": {
        "all": string;
+        "topBottom": string;
        "top": string;
        "bottom": string;
+        "bg": string;
        "hide": string;
    };
    "_requireRefreshBehavior": {
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1108,8 +1108,10 @@ translateProfile: "プロフィールを翻訳する"

 _bannerDisplay:
  all: "全て"
+  topBottom: "上部と下部"
  top: "上部（サーバーバナー）"
  bottom: "下部（プロフィールバナー）"
+  bg: "バックグラウンド"
  hide: "隠す"

 _requireRefreshBehavior:
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -1107,8 +1107,10 @@ installed: "설치됨"
 translateProfile: "프로필 번역하기"
 _bannerDisplay:
  all: "전부"
+  topBottom: "상단 및 하단"
  top: "상단 (서버 배너)"
  bottom: "하단 (프로필 배너)"
+  bg: "백그라운드"
  hide: "숨기기"
 _requireRefreshBehavior:
  dialog: "알림창 표시"
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@ -41,8 +41,10 @@
 	<MkRadios v-model="bannerDisplay">
 		<template #label>{{ i18n.ts.displayBanner }} <span class="_beta">CherryPick</span></template>
 		<option value="all">{{ i18n.ts._bannerDisplay.all }}</option>
+		<option value="topBottom">{{ i18n.ts._bannerDisplay.topBottom }}</option>
 		<option value="top">{{ i18n.ts._bannerDisplay.top }}</option>
 		<option value="bottom">{{ i18n.ts._bannerDisplay.bottom }}</option>
+		<option value="bg">{{ i18n.ts._bannerDisplay.bg }}</option>
 		<option value="hide">{{ i18n.ts._bannerDisplay.hide }}</option>
 	</MkRadios>
 </div>
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -370,7 +370,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	bannerDisplay: {
 		where: 'device',
-		default: 'all' as 'all' | 'top' | 'bottom' | 'hide',
+		default: 'topBottom' as 'all' | 'topBottom' | 'top' | 'bottom' | 'bg' | 'hide',
 	},
 	hideAvatarsInNote: {
 		where: 'device',
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@ -1,7 +1,8 @@
 <template>
 <div :class="$style.root">
+	<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 	<div :class="$style.top">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :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>
@ -30,7 +31,7 @@
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
 		</button>
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@ -1,8 +1,9 @@
 <template>
 <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
 	<div :class="$style.body">
+		<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<div :class="$style.top">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
 				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 			</button>
@ -40,7 +41,7 @@
 			</MkA>
 		</div>
 		<div :class="$style.bottom">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
 			</button>
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@ -1,7 +1,8 @@
 <template>
 <div :class="$style.root">
+	<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 	<div :class="$style.top">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :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>
@ -30,7 +31,7 @@
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-		<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+		<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
 		</button>
--- a/packages/frontend/src/ui/friendly/navbar.vue
+++ b/packages/frontend/src/ui/friendly/navbar.vue
@ -1,8 +1,9 @@
 <template>
 <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
 	<div :class="$style.body">
+		<div v-if="['all', 'bg'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 		<div :class="$style.top">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'top'" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'top'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.topBanner]" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
 				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 			</button>
@ -40,7 +41,7 @@
 			</MkA>
 		</div>
 		<div :class="$style.bottom">
-			<div v-if="defaultStore.state.bannerDisplay === 'all' || defaultStore.state.bannerDisplay === 'bottom'" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
+			<div v-if="['all', 'topBottom', 'bottom'].includes(<string>defaultStore.state.bannerDisplay)" :class="[$style.banner, $style.bottomBanner]" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
 			</button>