diff --git a/locales/index.d.ts b/locales/index.d.ts
index 0c6e73aac4..2ac82edd37 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5354,6 +5354,10 @@ export interface Locale extends ILocale {
* 文字数
*/
"textCount": string;
+ /**
+ * 情報
+ */
+ "information": string;
"_emojiPalette": {
/**
* パレット
@@ -10359,20 +10363,12 @@ export interface Locale extends ILocale {
* このプラグインをインストールしますか？
*/
"title": string;
- /**
- * プラグイン情報
- */
- "metaTitle": string;
};
"_theme": {
/**
* このテーマをインストールしますか？
*/
"title": string;
- /**
- * テーマ情報
- */
- "metaTitle": string;
};
"_meta": {
/**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d6af72ab57..35f368d3ed 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1334,6 +1334,7 @@ paste: "ペースト"
emojiPalette: "絵文字パレット"
postForm: "投稿フォーム"
textCount: "文字数"
+information: "情報"
_emojiPalette:
palettes: "パレット"
@@ -2749,10 +2750,8 @@ _externalResourceInstaller:
checkVendorBeforeInstall: "配布元が信頼できるかを確認した上でインストールしてください。"
_plugin:
title: "このプラグインをインストールしますか？"
- metaTitle: "プラグイン情報"
_theme:
title: "このテーマをインストールしますか？"
- metaTitle: "テーマ情報"
_meta:
base: "基本のカラースキーム"
_vendorInfo:
diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index b8a0fab2f4..a2247d844b 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -11,54 +11,91 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- 拡張用？ -->
<i v-else class="ti ti-download"></i>
</div>
- <h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2>
- <div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
- <MkInfo v-if="isPlugin" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
- <FormSection>
- <template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
- <div class="_gaps_s">
- <FormSplit>
- <MkKeyValue>
- <template #key>{{ i18n.ts.name }}</template>
- <template #value>{{ extension.meta.name }}</template>
- </MkKeyValue>
- <MkKeyValue>
- <template #key>{{ i18n.ts.author }}</template>
- <template #value>{{ extension.meta.author }}</template>
- </MkKeyValue>
- </FormSplit>
- <MkKeyValue v-if="isPlugin">
- <template #key>{{ i18n.ts.description }}</template>
- <template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
- </MkKeyValue>
- <MkKeyValue v-if="isPlugin">
- <template #key>{{ i18n.ts.version }}</template>
- <template #value>{{ extension.meta.version }}</template>
- </MkKeyValue>
- <MkKeyValue v-if="isPlugin">
- <template #key>{{ i18n.ts.permission }}</template>
- <template #value>
- <ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
- <li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
- </ul>
- <template v-else>{{ i18n.ts.none }}</template>
- </template>
- </MkKeyValue>
- <MkKeyValue v-if="isTheme">
- <template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
- <template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
- </MkKeyValue>
- <MkFolder>
- <template #icon><i class="ti ti-code"></i></template>
- <template #label>{{ i18n.ts._plugin.viewSource }}</template>
- <MkCode :code="extension.raw"/>
- </MkFolder>
- </div>
- </FormSection>
+ <h2 v-if="isPlugin" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._plugin.title }}</h2>
+ <h2 v-else-if="isTheme" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._theme.title }}</h2>
+
+ <MkInfo :warn="true">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</MkInfo>
+
+ <div v-if="isPlugin" class="_gaps_s">
+ <MkFolder :defaultOpen="true">
+ <template #icon><i class="ti ti-info-circle"></i></template>
+ <template #label>{{ i18n.ts.metadata }}</template>
+
+ <div class="_gaps_s">
+ <FormSplit>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.name }}</template>
+ <template #value>{{ extension.meta.name }}</template>
+ </MkKeyValue>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.author }}</template>
+ <template #value>{{ extension.meta.author }}</template>
+ </MkKeyValue>
+ </FormSplit>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.description }}</template>
+ <template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
+ </MkKeyValue>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.version }}</template>
+ <template #value>{{ extension.meta.version }}</template>
+ </MkKeyValue>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.permission }}</template>
+ <template #value>
+ <ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
+ <li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
+ </ul>
+ <template v-else>{{ i18n.ts.none }}</template>
+ </template>
+ </MkKeyValue>
+ </div>
+ </MkFolder>
+
+ <MkFolder :withSpacer="false">
+ <template #icon><i class="ti ti-code"></i></template>
+ <template #label>{{ i18n.ts._plugin.viewSource }}</template>
+
+ <MkCode :code="extension.raw"/>
+ </MkFolder>
+ </div>
+ <div v-else-if="isTheme" class="_gaps_s">
+ <MkFolder :defaultOpen="true">
+ <template #icon><i class="ti ti-info-circle"></i></template>
+ <template #label>{{ i18n.ts.metadata }}</template>
+
+ <div class="_gaps_s">
+ <FormSplit>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.name }}</template>
+ <template #value>{{ extension.meta.name }}</template>
+ </MkKeyValue>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts.author }}</template>
+ <template #value>{{ extension.meta.author }}</template>
+ </MkKeyValue>
+ </FormSplit>
+ <MkKeyValue>
+ <template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+ <template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
+ </MkKeyValue>
+ </div>
+ </MkFolder>
+
+ <MkFolder :withSpacer="false">
+ <template #icon><i class="ti ti-code"></i></template>
+ <template #label>{{ i18n.ts._theme.code }}</template>
+
+ <MkCode :code="extension.raw"/>
+ </MkFolder>
+ </div>
+
<slot name="additionalInfo"/>
+
<div class="_buttonsCenter">
- <MkButton gradate rounded @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+ <MkButton danger rounded large @click="emits('cancel')"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+ <MkButton gradate rounded large @click="emits('confirm')"><i class="ti ti-download"></i> {{ i18n.ts.install }}</MkButton>
</div>
</div>
</template>
@@ -105,6 +142,7 @@ const props = defineProps<{
const emits = defineEmits<{
(ev: 'confirm'): void;
+ (ev: 'cancel'): void;
}>();
</script>
@@ -112,13 +150,13 @@ const emits = defineEmits<{
.extInstallerRoot {
border-radius: var(--MI-radius);
background: var(--MI_THEME-panel);
- padding: 1.5rem;
+ padding: 20px;
}
.extInstallerIconWrapper {
width: 48px;
height: 48px;
- font-size: 24px;
+ font-size: 20px;
line-height: 48px;
text-align: center;
border-radius: 50%;
@@ -135,10 +173,6 @@ const emits = defineEmits<{
margin: 0;
}
-.extInstallerNormDesc {
- text-align: center;
-}
-
.extInstallerKVList {
margin-top: 0;
margin-bottom: 0;
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 95f8c878c9..3f4a846586 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
- <MkSpacer :contentMax="500">
+ <MkSpacer :contentMax="550">
<MkLoading v-if="uiPhase === 'fetching'"/>
- <MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()">
+ <MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close">
<template #additionalInfo>
<FormSection>
- <template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
<div class="_gaps_s">
<MkKeyValue>
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
@@ -35,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
<div class="_buttonsCenter">
- <MkButton @click="goBack()">{{ i18n.ts.goBack }}</MkButton>
+ <MkButton @click="close()">{{ i18n.ts.close }}</MkButton>
<MkButton @click="goToMisskey()">{{ i18n.ts.goToMisskey }}</MkButton>
</div>
</div>
@@ -75,8 +74,8 @@ const hash = ref<string | null>(null);
const data = ref<Extension | null>(null);
-function goBack(): void {
- history.back();
+function close(): void {
+ window.close();
}
function goToMisskey(): void {
@@ -207,9 +206,9 @@ async function install() {
try {
await installPlugin(data.value.raw, data.value.meta as AiScriptPluginMeta);
os.success();
- nextTick(() => {
- unisonReload('/');
- });
+ window.setTimeout(() => {
+ close();
+ }, 3000);
} catch (err) {
errorKV.value = {
title: i18n.ts._externalResourceInstaller._errors._pluginInstallFailed.title,
@@ -223,9 +222,9 @@ async function install() {
if (!data.value.meta) return;
await installTheme(data.value.raw);
os.success();
- nextTick(() => {
- location.href = '/settings/theme';
- });
+ window.setTimeout(() => {
+ close();
+ }, 3000);
}
}