worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
NoriDev 2023-06-15 01:34:41 +09:00
parent 3419431ae8
commit 684ae57011
10 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/en-US.yml
View file

@ -1107,8 +1107,10 @@ branding: "Branding"
translateProfile: "Translate a profile" translateProfile: "Translate a profile"
_bannerDisplay: _bannerDisplay:
all: "All" all: "All"
topBottom: "Top and Bottom"
top: "Top (Server banner)" top: "Top (Server banner)"
bottom: "Bottom (Profile banner)" bottom: "Bottom (Profile banner)"
bg: "Background"
hide: "Hide" hide: "Hide"
_requireRefreshBehavior: _requireRefreshBehavior:
dialog: "Show warning dialog" dialog: "Show warning dialog"

2
locales/index.d.ts vendored
View file

@ -1110,8 +1110,10 @@ export interface Locale {
"translateProfile": string; "translateProfile": string;
"_bannerDisplay": { "_bannerDisplay": {
"all": string; "all": string;
"topBottom": string;
"top": string; "top": string;
"bottom": string; "bottom": string;
"bg": string;
"hide": string; "hide": string;
}; };
"_requireRefreshBehavior": { "_requireRefreshBehavior": {

2
locales/ja-JP.yml
View file

@ -1108,8 +1108,10 @@ translateProfile: "プロフィールを翻訳する"
_bannerDisplay: _bannerDisplay:
all: "全て" all: "全て"
topBottom: "上部と下部"
top: "上部（サーバーバナー）" top: "上部（サーバーバナー）"
bottom: "下部（プロフィールバナー）" bottom: "下部（プロフィールバナー）"
bg: "バックグラウンド"
hide: "隠す" hide: "隠す"
_requireRefreshBehavior: _requireRefreshBehavior:

2
locales/ko-KR.yml
View file

@ -1107,8 +1107,10 @@ installed: "설치됨"
translateProfile: "프로필 번역하기" translateProfile: "프로필 번역하기"
_bannerDisplay: _bannerDisplay:
all: "전부" all: "전부"
topBottom: "상단 및 하단"
top: "상단 (서버 배너)" top: "상단 (서버 배너)"
bottom: "하단 (프로필 배너)" bottom: "하단 (프로필 배너)"
bg: "백그라운드"
hide: "숨기기" hide: "숨기기"
_requireRefreshBehavior: _requireRefreshBehavior:
dialog: "알림창 표시" dialog: "알림창 표시"

2
packages/frontend/src/pages/settings/navbar.vue
View file

@ -41,8 +41,10 @@
<MkRadios v-model="bannerDisplay"> <MkRadios v-model="bannerDisplay">
<template #label>{{ i18n.ts.displayBanner }} <span class="_beta">CherryPick</span></template> <template #label>{{ i18n.ts.displayBanner }} <span class="_beta">CherryPick</span></template>
<option value="all">{{ i18n.ts._bannerDisplay.all }}</option> <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="top">{{ i18n.ts._bannerDisplay.top }}</option>
<option value="bottom">{{ i18n.ts._bannerDisplay.bottom }}</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> <option value="hide">{{ i18n.ts._bannerDisplay.hide }}</option>
</MkRadios> </MkRadios>
</div> </div>

2
packages/frontend/src/store.ts
View file

@ -370,7 +370,7 @@ export const defaultStore = markRaw(new Storage('base', {
}, },
bannerDisplay: { bannerDisplay: {
where: 'device', where: 'device',
default: 'all' as 'all' | 'top' | 'bottom' | 'hide', default: 'topBottom' as 'all' | 'topBottom' | 'top' | 'bottom' | 'bg' | 'hide',
}, },
hideAvatarsInNote: { hideAvatarsInNote: {
where: 'device', where: 'device',

5
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div :class="$style.root"> <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 :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"> <button class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/> <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
@ -30,7 +31,7 @@
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <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"> <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> <i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
</button> </button>

5
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]"> <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body"> <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 :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"> <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"/> <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
@ -40,7 +41,7 @@
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <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"> <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> <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
</button> </button>

5
packages/frontend/src/ui/friendly/navbar-for-mobile.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div :class="$style.root"> <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 :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"> <button class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/> <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
@ -30,7 +31,7 @@
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <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"> <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> <i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
</button> </button>

5
packages/frontend/src/ui/friendly/navbar.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]"> <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body"> <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 :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"> <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"/> <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
</button> </button>
@ -40,7 +41,7 @@
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <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"> <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> <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
</button> </button>