From 282caa0b7ed23a93b1ce15a4dd570ae20833d803 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 20 Mar 2025 12:36:48 +0900
Subject: 🎨 for install-extensions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkExtensionInstaller.vue        | 130 +++++++++++++--------
 1 file changed, 82 insertions(+), 48 deletions(-)

(limited to 'packages/frontend/src/components')

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>
+
+	<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.name }}</template>
-					<template #value>{{ extension.meta.name }}</template>
+					<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.author }}</template>
-					<template #value>{{ extension.meta.author }}</template>
+					<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+					<template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</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>
+			</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;
-- 
cgit v1.2.3-freya