テーマ関連の機能を強化

2 files changed, 50 insertions, 9 deletions

diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 5cc779ee8e..39d8e8aa97 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -44,10 +44,13 @@
 
 	<details>
 		<summary>%fa:download% %i18n:@install-a-theme%</summary>
+		<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
+		<input ref="file" type="file" style="display:none;" @change="onUpdateImportFile"/>
+		<p>%i18n:@import-by-code%:</p>
 		<ui-textarea v-model="installThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
-		<ui-button @click="install()">%fa:check% %i18n:@install%</ui-button>
+		<ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button>
 	</details>
 
 	<details>
@@ -65,6 +68,7 @@
 			<ui-textarea readonly :value="selectedInstalledThemeCode">
 				<span>%i18n:@theme-code%</span>
 			</ui-textarea>
+			<ui-button @click="export_()" link :download="`${selectedInstalledTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button>
 			<ui-button @click="uninstall()">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
 		</template>
 	</details>
@@ -177,11 +181,11 @@ export default Vue.extend({
 	},
 
 	methods: {
-		install() {
+		install(code) {
 			let theme;
 
 			try {
-				theme = JSON5.parse(this.installThemeCode);
+				theme = JSON5.parse(code);
 			} catch (e) {
 				alert('%i18n:@invalid-theme%');
 				return;
@@ -219,6 +223,29 @@ export default Vue.extend({
 			alert('%i18n:@uninstalled%'.replace('{}', theme.name));
 		},
 
+		import_() {
+			(this.$refs.file as any).click();
+		}
+
+		export_() {
+			const blob = new Blob([this.selectedInstalledThemeCode], {
+				type: 'application/json5'
+			});
+			this.$refs.export.$el.href = window.URL.createObjectURL(blob);
+		},
+
+		onUpdateImportFile() {
+			const f = (this.$refs.file as any).files[0];
+
+			const reader = new FileReader();
+
+			reader.onload = e => {
+				this.install(e.target.result);
+			};
+
+			reader.readAsText(f);
+		},
+
 		preview() {
 			applyTheme(this.myTheme, false);
 		},
@@ -239,10 +266,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .nicnklzforebnpfgasiypmpdaaglujqm
 	> details
-		margin-top 16px
-		padding-top 16px
 		border-top solid 1px var(--faceDivider)
 
+		> summary
+			padding 16px 0
+
+		> *:last-child
+			margin-bottom 16px
+
 	> .creator
 		> div
 			padding 16px 0
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index b29f8bb1c9..a509632520 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
-<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :is="link ? 'a' : 'button'" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
 	<slot></slot>
-</button>
+</component>
 </template>
 
 <script lang="ts">
@@ -21,6 +21,11 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		link: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	data() {
@@ -35,15 +40,20 @@ export default Vue.extend({
 .dmtdnykelhudezerjlfpbhgovrgnqqgr
 	display block
 	width 100%
-	min-height 40px
 	margin 0
-	padding 0
+	padding 8px
+	text-align center
 	font-weight normal
 	font-size 16px
 	border none
 	border-radius 6px
 	outline none
 	box-shadow none
+	text-decoration none
+	user-select none
+
+	*
+		pointer-events none
 
 	&:focus
 		&:after