🎨 for install-extensions

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": {
             /**

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:

packages/frontend/src/components/MkExtensionInstaller.vue

@@ -11,11 +11,17 @@ 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>
+	<h2 v-if="isPlugin" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._plugin.title }}</h2>
-	<MkInfo v-if="isPlugin" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
+	<h2 v-else-if="isTheme" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._theme.title }}</h2>
-	<FormSection>
+
-		<template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
+	<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>
@@ -27,15 +33,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #value>{{ extension.meta.author }}</template>
 					</MkKeyValue>
 				</FormSplit>
-			<MkKeyValue v-if="isPlugin">
+				<MkKeyValue>
 					<template #key>{{ i18n.ts.description }}</template>
 					<template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
 				</MkKeyValue>
-			<MkKeyValue v-if="isPlugin">
+				<MkKeyValue>
 					<template #key>{{ i18n.ts.version }}</template>
 					<template #value>{{ extension.meta.version }}</template>
 				</MkKeyValue>
-			<MkKeyValue v-if="isPlugin">
+				<MkKeyValue>
 					<template #key>{{ i18n.ts.permission }}</template>
 					<template #value>
 						<ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
@@ -44,21 +50,52 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template v-else>{{ i18n.ts.none }}</template>
 					</template>
 				</MkKeyValue>
-			<MkKeyValue v-if="isTheme">
+			</div>
-				<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+		</MkFolder>
-				<template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
+
-			</MkKeyValue>
+		<MkFolder :withSpacer="false">
-			<MkFolder>
 			<template #icon><i class="ti ti-code"></i></template>
 			<template #label>{{ i18n.ts._plugin.viewSource }}</template>
 
 			<MkCode :code="extension.raw"/>
 		</MkFolder>
 	</div>
-	</FormSection>
+	<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;

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 {
+function close(): void {
-	history.back();
+	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(() => {
+				window.setTimeout(() => {
-					unisonReload('/');
+					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(() => {
+			window.setTimeout(() => {
-				location.href = '/settings/theme';
+				close();
-			});
+			}, 3000);
 	}
 }