ナビゲーションメニューのバナースタイルの改善
This commit is contained in:
parent
3419431ae8
commit
684ae57011
|
@ -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"
|
||||
|
|
2
locales/index.d.ts
vendored
2
locales/index.d.ts
vendored
|
@ -1110,8 +1110,10 @@ export interface Locale {
|
|||
"translateProfile": string;
|
||||
"_bannerDisplay": {
|
||||
"all": string;
|
||||
"topBottom": string;
|
||||
"top": string;
|
||||
"bottom": string;
|
||||
"bg": string;
|
||||
"hide": string;
|
||||
};
|
||||
"_requireRefreshBehavior": {
|
||||
|
|
|
@ -1108,8 +1108,10 @@ translateProfile: "プロフィールを翻訳する"
|
|||
|
||||
_bannerDisplay:
|
||||
all: "全て"
|
||||
topBottom: "上部と下部"
|
||||
top: "上部(サーバーバナー)"
|
||||
bottom: "下部(プロフィールバナー)"
|
||||
bg: "バックグラウンド"
|
||||
hide: "隠す"
|
||||
|
||||
_requireRefreshBehavior:
|
||||
|
|
|
@ -1107,8 +1107,10 @@ installed: "설치됨"
|
|||
translateProfile: "프로필 번역하기"
|
||||
_bannerDisplay:
|
||||
all: "전부"
|
||||
topBottom: "상단 및 하단"
|
||||
top: "상단 (서버 배너)"
|
||||
bottom: "하단 (프로필 배너)"
|
||||
bg: "백그라운드"
|
||||
hide: "숨기기"
|
||||
_requireRefreshBehavior:
|
||||
dialog: "알림창 표시"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue