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