From dd733ec1d00b6668542a2ee45f9d3632c270873d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 9 Jun 2023 15:53:40 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=B5=E3=83=BC?=
=?UTF-8?q?=E3=83=90=E3=83=BC=E3=81=AE=E3=83=86=E3=83=BC=E3=83=9E=E8=A8=AD?=
=?UTF-8?q?=E5=AE=9A=E3=82=92=E5=88=A5=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AB?=
=?UTF-8?q?=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
locales/index.d.ts | 1 +
locales/ja-JP.yml | 1 +
.../frontend/src/pages/admin/branding.vue | 133 ++++++++++++++++++
packages/frontend/src/pages/admin/index.vue | 5 +
.../frontend/src/pages/admin/settings.vue | 77 ----------
packages/frontend/src/router.ts | 4 +
6 files changed, 144 insertions(+), 77 deletions(-)
create mode 100644 packages/frontend/src/pages/admin/branding.vue
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7047f42eff..eed29f408c 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1065,6 +1065,7 @@ export interface Locale {
"goToMisskey": string;
"additionalEmojiDictionary": string;
"installed": string;
+ "branding": string;
"_initialAccountSetting": {
"accountCreated": string;
"letsStartAccountSetup": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index fcba3fb822..723d0ac988 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1062,6 +1062,7 @@ later: "ã‚ã¨ã§"
goToMisskey: "Misskeyã¸"
additionalEmojiDictionary: "絵文å—ã®è¿½åŠ 辞書"
installed: "インストール済ã¿"
+branding: "ブランディング"
_initialAccountSetting:
accountCreated: "アカウントã®ä½œæˆãŒå®Œäº†ã—ã¾ã—ãŸï¼"
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
new file mode 100644
index 0000000000..65ce9e0068
--- /dev/null
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -0,0 +1,133 @@
+<template>
+<div>
+ <MkStickyContainer>
+ <template #header><XHeader :tabs="headerTabs"/></template>
+ <MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
+ <FormSuspense :p="init">
+ <div class="_gaps_m">
+ <MkInput v-model="iconUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.iconUrl }}</template>
+ </MkInput>
+
+ <MkInput v-model="bannerUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.bannerUrl }}</template>
+ </MkInput>
+
+ <MkInput v-model="backgroundImageUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.backgroundImageUrl }}</template>
+ </MkInput>
+
+ <MkInput v-model="notFoundImageUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.notFoundDescription }}</template>
+ </MkInput>
+
+ <MkInput v-model="infoImageUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.nothing }}</template>
+ </MkInput>
+
+ <MkInput v-model="serverErrorImageUrl">
+ <template #prefix><i class="ti ti-link"></i></template>
+ <template #label>{{ i18n.ts.somethingHappened }}</template>
+ </MkInput>
+
+ <MkColorInput v-model="themeColor">
+ <template #label>{{ i18n.ts.themeColor }}</template>
+ </MkColorInput>
+
+ <MkTextarea v-model="defaultLightTheme">
+ <template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
+ <template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
+ </MkTextarea>
+
+ <MkTextarea v-model="defaultDarkTheme">
+ <template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
+ <template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
+ </MkTextarea>
+ </div>
+ </FormSuspense>
+ </MkSpacer>
+ <template #footer>
+ <div :class="$style.footer">
+ <MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
+ <MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+ </MkSpacer>
+ </div>
+ </template>
+ </MkStickyContainer>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XHeader from './_header_.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import MkButton from '@/components/MkButton.vue';
+import MkColorInput from '@/components/MkColorInput.vue';
+
+let iconUrl: string | null = $ref(null);
+let bannerUrl: string | null = $ref(null);
+let backgroundImageUrl: string | null = $ref(null);
+let themeColor: any = $ref(null);
+let defaultLightTheme: any = $ref(null);
+let defaultDarkTheme: any = $ref(null);
+let serverErrorImageUrl: string | null = $ref(null);
+let infoImageUrl: string | null = $ref(null);
+let notFoundImageUrl: string | null = $ref(null);
+
+async function init() {
+ const meta = await os.api('admin/meta');
+ iconUrl = meta.iconUrl;
+ bannerUrl = meta.bannerUrl;
+ backgroundImageUrl = meta.backgroundImageUrl;
+ themeColor = meta.themeColor;
+ defaultLightTheme = meta.defaultLightTheme;
+ defaultDarkTheme = meta.defaultDarkTheme;
+ serverErrorImageUrl = meta.serverErrorImageUrl;
+ infoImageUrl = meta.infoImageUrl;
+ notFoundImageUrl = meta.notFoundImageUrl;
+}
+
+function save() {
+ os.apiWithDialog('admin/update-meta', {
+ iconUrl,
+ bannerUrl,
+ backgroundImageUrl,
+ themeColor: themeColor === '' ? null : themeColor,
+ defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
+ defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
+ infoImageUrl,
+ notFoundImageUrl,
+ serverErrorImageUrl,
+ }).then(() => {
+ fetchInstance();
+ });
+}
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+ title: i18n.ts.branding,
+ icon: 'ti ti-paint',
+});
+</script>
+
+<style lang="scss" module>
+.footer {
+ -webkit-backdrop-filter: var(--blur, blur(15px));
+ backdrop-filter: var(--blur, blur(15px));
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 5cbbcaa44c..8b083bc896 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -143,6 +143,11 @@ const menuDef = $computed(() => [{
text: i18n.ts.general,
to: '/admin/settings',
active: currentPage?.route.name === 'settings',
+ }, {
+ icon: 'ti ti-paint',
+ text: i18n.ts.branding,
+ to: '/admin/branding',
+ active: currentPage?.route.name === 'branding',
}, {
icon: 'ti ti-shield',
text: i18n.ts.moderation,
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index e98e1432a2..4c2fe46f28 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -29,56 +29,6 @@
<template #caption>{{ i18n.ts.pinnedUsersDescription }}</template>
</MkTextarea>
- <FormSection>
- <template #label>{{ i18n.ts.theme }}</template>
-
- <div class="_gaps_m">
- <MkInput v-model="iconUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.iconUrl }}</template>
- </MkInput>
-
- <MkInput v-model="bannerUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.bannerUrl }}</template>
- </MkInput>
-
- <MkInput v-model="backgroundImageUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.backgroundImageUrl }}</template>
- </MkInput>
-
- <MkInput v-model="notFoundImageUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.notFoundDescription }}</template>
- </MkInput>
-
- <MkInput v-model="infoImageUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.nothing }}</template>
- </MkInput>
-
- <MkInput v-model="serverErrorImageUrl">
- <template #prefix><i class="ti ti-link"></i></template>
- <template #label>{{ i18n.ts.somethingHappened }}</template>
- </MkInput>
-
- <MkColorInput v-model="themeColor">
- <template #label>{{ i18n.ts.themeColor }}</template>
- </MkColorInput>
-
- <MkTextarea v-model="defaultLightTheme">
- <template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
- <template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
- </MkTextarea>
-
- <MkTextarea v-model="defaultDarkTheme">
- <template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
- <template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
- </MkTextarea>
- </div>
- </FormSection>
-
<FormSection>
<template #label>{{ i18n.ts.files }}</template>
@@ -160,15 +110,6 @@ let name: string | null = $ref(null);
let description: string | null = $ref(null);
let maintainerName: string | null = $ref(null);
let maintainerEmail: string | null = $ref(null);
-let iconUrl: string | null = $ref(null);
-let bannerUrl: string | null = $ref(null);
-let backgroundImageUrl: string | null = $ref(null);
-let themeColor: any = $ref(null);
-let defaultLightTheme: any = $ref(null);
-let defaultDarkTheme: any = $ref(null);
-let serverErrorImageUrl: string | null = $ref(null);
-let infoImageUrl: string | null = $ref(null);
-let notFoundImageUrl: string | null = $ref(null);
let pinnedUsers: string = $ref('');
let cacheRemoteFiles: boolean = $ref(false);
let enableServiceWorker: boolean = $ref(false);
@@ -181,15 +122,6 @@ async function init() {
const meta = await os.api('admin/meta');
name = meta.name;
description = meta.description;
- iconUrl = meta.iconUrl;
- bannerUrl = meta.bannerUrl;
- backgroundImageUrl = meta.backgroundImageUrl;
- themeColor = meta.themeColor;
- defaultLightTheme = meta.defaultLightTheme;
- defaultDarkTheme = meta.defaultDarkTheme;
- serverErrorImageUrl = meta.serverErrorImageUrl;
- infoImageUrl = meta.infoImageUrl;
- notFoundImageUrl = meta.notFoundImageUrl;
maintainerName = meta.maintainerName;
maintainerEmail = meta.maintainerEmail;
pinnedUsers = meta.pinnedUsers.join('\n');
@@ -205,15 +137,6 @@ function save() {
os.apiWithDialog('admin/update-meta', {
name,
description,
- iconUrl,
- bannerUrl,
- backgroundImageUrl,
- themeColor: themeColor === '' ? null : themeColor,
- defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
- defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
- infoImageUrl,
- notFoundImageUrl,
- serverErrorImageUrl,
maintainerName,
maintainerEmail,
pinnedUsers: pinnedUsers.split('\n'),
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 6b11137d79..a95e8e6485 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -392,6 +392,10 @@ export const routes = [{
path: '/settings',
name: 'settings',
component: page(() => import('./pages/admin/settings.vue')),
+ }, {
+ path: '/branding',
+ name: 'branding',
+ component: page(() => import('./pages/admin/branding.vue')),
}, {
path: '/moderation',
name: 'moderation',
--
GitLab