Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: Customize Sidebar/Visitor/About separately from app icon. (!632)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/632

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
dakkar 2024-10-02 14:55:20 +00:00
commit 0bd6d48c7e
15 changed files with 98 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/MkVisitorDashboard.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div v-if="instance" :class="$style.root">
<div :class="[$style.main, $style.panel]">
<img :src="instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/>
<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon"/>
<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
<div :class="$style.mainFg">
<h1 :class="$style.mainTitle">
@ -126,6 +126,14 @@ function showMenu(ev: MouseEvent) {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.wideIcon {
min-width: 85px;
max-width: 60%;
margin-top: -47px;
vertical-align: bottom;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.mainMenu {
position: absolute;
top: 16px;

4
packages/frontend/src/pages/about.overview.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
<div style="overflow: clip;">
<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
<img :src="instance.sidebarLogoUrl ?? instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
<div :class="$style.bannerName">
<b>{{ instance.name ?? host }}</b>
</div>
@ -160,7 +160,7 @@ const initStats = () => misskeyApi('stats', {});
.bannerIcon {
display: block;
margin: 16px auto 0 auto;
height: 64px;
max-height: 96px;
border-radius: var(--radius-sm);;
}

12
packages/frontend/src/pages/admin/branding.vue
View file

@ -37,6 +37,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkInput>
<MkInput v-model="sidebarLogoUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.sidebarLogoUrl }}</template>
<template #caption>
<div>{{ i18n.ts._serverSettings.sidebarLogoDescription }}</div>
<div>({{ i18n.ts._serverSettings.sidebarLogoUsageExample }})</div>
</template>
</MkInput>
<MkInput v-model="bannerUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts.bannerUrl }}</template>
@ -128,6 +137,7 @@ import MkColorInput from '@/components/MkColorInput.vue';
import { host } from '@/config.js';
const iconUrl = ref<string | null>(null);
const sidebarLogoUrl = ref<string | null>(null);
const app192IconUrl = ref<string | null>(null);
const app512IconUrl = ref<string | null>(null);
const bannerUrl = ref<string | null>(null);
@ -146,6 +156,7 @@ const manifestJsonOverride = ref<string>('{}');
async function init() {
const meta = await misskeyApi('admin/meta');
iconUrl.value = meta.iconUrl;
sidebarLogoUrl.value = meta.sidebarLogoUrl;
app192IconUrl.value = meta.app192IconUrl;
app512IconUrl.value = meta.app512IconUrl;
bannerUrl.value = meta.bannerUrl;
@ -165,6 +176,7 @@ async function init() {
function save() {
os.apiWithDialog('admin/update-meta', {
iconUrl: iconUrl.value,
sidebarLogoUrl: sidebarLogoUrl.value,
app192IconUrl: app192IconUrl.value,
app512IconUrl: app512IconUrl.value,
bannerUrl: bannerUrl.value,

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

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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"/>
<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideInstanceIcon : $style.instanceIcon"/>
</button>
</div>
<div :class="$style.middle">
@ -121,6 +121,13 @@ function more() {
aspect-ratio: 1;
}
.wideInstanceIcon {
display: inline-block;
min-width: 38px;
max-width: 100%;
max-height: 80px;
}
.bottom {
position: sticky;
bottom: 0;

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

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.top">
<div :class="$style.banner" :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"/>
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon"/>
</button>
</div>
<div :class="$style.middle">
@ -183,6 +183,13 @@ function more(ev: MouseEvent) {
aspect-ratio: 1;
}
.wideInstanceIcon {
display: inline-block;
min-width: 38px;
max-width: 100%;
max-height: 80px;
}
.bottom {
position: sticky;
bottom: 0;

9
packages/frontend/src/ui/classic.sidebar.vue
View file

@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="divider"></div>
<div class="about">
<button v-click-anime class="item _button" @click="openInstanceMenu">
<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" :class="{ wideIcon: instance.sidebarLogoUrl && !iconOnly }" class="_ghost" />
</button>
</div>
<!--<MisskeyLogo class="misskey"/>-->
@ -180,12 +180,15 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
> .item {
display: block;
width: 32px;
margin: 0 auto;
img {
display: block;
width: 100%;
width: 32px;
&.wideIcon {
width: 80%;
margin: 0 auto;
}
}
}
}