amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
locales/en-US.yml
View File

@ -1455,6 +1455,9 @@ _serverSettings:
appIconUsageExample: "E.g. As PWA, or when displayed as a home screen bookmark on a phone"
appIconStyleRecommendation: "As the icon may be cropped to a square or circle, an icon with colored margin around the content is recommended."
appIconResolutionMustBe: "The minimum resolution is {resolution}."
sidebarLogoUrl: "Logo URL"
sidebarLogoDescription: "Specifies the logo to use instead of the regular icon in high definition, dynamic-width scenarios."
sidebarLogoUsageExample: "E.g. In the sidebar, to visitors and in the \"About\" page."
manifestJsonOverride: "manifest.json Override"
shortName: "Short name"
shortNameDescription: "A shorthand for the instance's name that can be displayed if the full official name is long."

12
locales/index.d.ts vendored
View File

@ -5792,6 +5792,18 @@ export interface Locale extends ILocale {
* 解像度は必ず{resolution}である必要があります。
*/
"appIconResolutionMustBe": ParameterizedString<"resolution">;
/**
* ロゴURL
*/
"sidebarLogoUrl": string;
/**
* 高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。
*/
"sidebarLogoDescription": string;
/**
* 例：サイドバー、訪問者用、「情報」ページ
*/
"sidebarLogoUsageExample": string;
/**
* manifest.jsonのオーバーライド
*/

3
locales/ja-JP.yml
View File

@ -1463,6 +1463,9 @@ _serverSettings:
appIconUsageExample: "例: PWAや、スマートフォンのホーム画面にブックマークとして追加された時など"
appIconStyleRecommendation: "円形もしくは角丸にクロップされる場合があるため、塗り潰された余白のある背景を持つことが推奨されます。"
appIconResolutionMustBe: "解像度は必ず{resolution}である必要があります。"
sidebarLogoUrl: "ロゴURL"
sidebarLogoDescription: "高精細、ダイナミック幅のシナリオで通常のアイコンの代わりに使用するロゴを指定します。"
sidebarLogoUsageExample: "例：サイドバー、訪問者用、「情報」ページ"
manifestJsonOverride: "manifest.jsonのオーバーライド"
shortName: "略称"
shortNameDescription: "サーバーの正式名称が長い場合に、代わりに表示することのできる略称や通称。"

16
packages/backend/migration/1727027985575-SidebarLogo.js Normal file
View File

@ -0,0 +1,16 @@
/*
* SPDX-FileCopyrightText: piuvas and other Sharkey contributors
* SPDX-License-Identifier: AGPL-3.0-only
*/
export class SidebarLogo1727027985575 {
name = 'SidebarLogo1727027985575';
async up(queryRunner) {
await queryRunner.query(`ALTER TABLE "meta" ADD "sidebarLogoUrl" character varying(1024)`);
}
async down(queryRunner) {
await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "sidebarLogoUrl"`);
}
}

1
packages/backend/src/core/entities/MetaEntityService.ts
View File

@ -105,6 +105,7 @@ export class MetaEntityService {
serverErrorImageUrl: instance.serverErrorImageUrl,
notFoundImageUrl: instance.notFoundImageUrl,
iconUrl: instance.iconUrl,
sidebarLogoUrl: instance.sidebarLogoUrl,
backgroundImageUrl: instance.backgroundImageUrl,
logoImageUrl: instance.logoImageUrl,
maxNoteTextLength: this.config.maxNoteLength,

6
packages/backend/src/models/Meta.ts
View File

@ -139,6 +139,12 @@ export class MiMeta {
})
public app512IconUrl: string | null;
@Column('varchar', {
length: 1024,
nullable: true,
})
public sidebarLogoUrl: string | null;
@Column('varchar', {
length: 1024,
nullable: true,

5
packages/backend/src/server/api/endpoints/admin/meta.ts
View File

@ -110,6 +110,10 @@ export const meta = {
type: 'string',
optional: false, nullable: true,
},
sidebarLogoUrl: {
type: 'string',
optional: false, nullable: true,
},
enableEmail: {
type: 'boolean',
optional: false, nullable: false,
@ -582,6 +586,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
iconUrl: instance.iconUrl,
app192IconUrl: instance.app192IconUrl,
app512IconUrl: instance.app512IconUrl,
sidebarLogoUrl: instance.sidebarLogoUrl,
backgroundImageUrl: instance.backgroundImageUrl,
logoImageUrl: instance.logoImageUrl,
defaultLightTheme: instance.defaultLightTheme,

5
packages/backend/src/server/api/endpoints/admin/update-meta.ts
View File

@ -55,6 +55,7 @@ export const paramDef = {
iconUrl: { type: 'string', nullable: true },
app192IconUrl: { type: 'string', nullable: true },
app512IconUrl: { type: 'string', nullable: true },
sidebarLogoUrl: { type: 'string', nullable: true },
backgroundImageUrl: { type: 'string', nullable: true },
logoImageUrl: { type: 'string', nullable: true },
name: { type: 'string', nullable: true },
@ -250,6 +251,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
set.app512IconUrl = ps.app512IconUrl;
}
if (ps.sidebarLogoUrl !== undefined) {
set.sidebarLogoUrl = ps.sidebarLogoUrl;
}
if (ps.serverErrorImageUrl !== undefined) {
set.serverErrorImageUrl = ps.serverErrorImageUrl;
}

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;
}
}
}
}

2
packages/misskey-js/src/autogen/types.ts
View File

@ -5191,6 +5191,7 @@ export type operations = {
infoImageUrl: string | null;
notFoundImageUrl: string | null;
iconUrl: string | null;
sidebarLogoUrl: string | null;
app192IconUrl: string | null;
app512IconUrl: string | null;
enableEmail: boolean;
@ -9704,6 +9705,7 @@ export type operations = {
infoImageUrl?: string | null;
notFoundImageUrl?: string | null;
iconUrl?: string | null;
sidebarLogoUrl?: string | null;
app192IconUrl?: string | null;
app512IconUrl?: string | null;
backgroundImageUrl?: string | null;