From 542349855e202ba66237851940387c7449a1db93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=91=E3=81=A3=E3=81=A1?= <kokt@sim1222.com>
Date: Sun, 11 Sep 2022 23:03:27 +0900
Subject: [PATCH] fix: improve emojigen

---
 locales/ja-NY.yml                            |   1 +
 packages/client/src/pages/admin/emojigen.vue | 141 +++++++++++--------
 2 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/locales/ja-NY.yml b/locales/ja-NY.yml
index cd653efc3..a1e789a2f 100644
--- a/locales/ja-NY.yml
+++ b/locales/ja-NY.yml
@@ -834,6 +834,7 @@ emojiSizeFixed: "文字サイズを固定する"
 emojiStretch: "自動で伸縮しない"
 emojiGenerate: "生成"
 emojiColor: "カラーコード"
+colorPicker: "カラーピッカー"
 emojiApproval: "絵文字を登録"
 deckOld: "旧デッキ"
 
diff --git a/packages/client/src/pages/admin/emojigen.vue b/packages/client/src/pages/admin/emojigen.vue
index f786f916e..9464b09b2 100644
--- a/packages/client/src/pages/admin/emojigen.vue
+++ b/packages/client/src/pages/admin/emojigen.vue
@@ -1,73 +1,82 @@
 <template>
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<div class="cwepdizn _formRoot">
-		<FormInput v-model="emojiName" class="_formBlock">
-			<template #label>{{ $ts.emojiName }}</template>
-		</FormInput>
-
-		<FormTextarea v-model="text" class="_formBlock">
-			<template #label>{{ $ts.text }}</template>
-		</FormTextarea>
-
-		<FormRadios v-model="emojiAlign" class="_formBlock">
-			<template #label>{{ $ts.emojiAlign }}</template>
-			<option value="left"><i class="fas fa-align-left"/></option>
-			<option value="center"><i class="fas fa-align-center"></i></option>
-			<option value="right"><i class="fas fa-align-right"/></option>
-		</FormRadios>
-
-		<FormSection>
-			<template #label>{{ $ts.emojiSizeSetting }}</template>
-			<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
-				<template #label>{{ $ts.emojiSizeFixed }}</template>
-			</FormSwitch>
-
-			<FormSwitch v-model="emojiStretch" class="_formBlock">
-				<template #label>{{ $ts.emojiStretch }}</template>
-			</FormSwitch>
-		</FormSection>
-
-		<FormRadios v-model="font" class="_formBlock">
-			<template #label>{{ $ts.font }}</template>
-			<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
-			<option value="mplus-1p-black">M+ 1p black</option>
-			<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
-			<option value="ipamjm">IPAmj明朝</option>
-			<option value="aoyagireisyoshimo">青柳隷書しも</option>
-			<option value="LinLibertine_RBah">LinLibertine Bold</option>
-		</FormRadios>
-
-		<FormSection>
-			<template #label>{{ $ts.emojiColor }}</template>
-			<div class="cwepdizn-colors">
-				<div class="row">
-					<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
-						<div class="preview" :style="{ background: color }"></div>
-					</button>
-				</div>
-			</div>
-
-			<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }">
-				<template #prefix><i class="fas fa-palette"></i></template>
-				<template #label>{{ $ts.emojiColor }}</template>
-				<template #caption>#RRGGBB</template>
-			</FormInput>
-		</FormSection>
-
-		<FormButton primary class="_formBlock" @click="preview">{{ $ts.emojiGenerate }}</FormButton>
-
 		<FormSection>
 			<template #label>{{ $ts.preview }}</template>
-			<p><img :src="previewUrl" class="img" :alt="emojiName"/></p>
+			<p><img :src="previewUrl" class="img" :alt="emojiName" /></p>
 		</FormSection>
 		<FormButton primary class="_formBlock" @click="uploadEmoji">{{ $ts.emojiApproval }}</FormButton>
+		<!-- <FormButton primary class="_formBlock" @click="preview">{{ $ts.emojiGenerate }}</FormButton> -->
+		<FormSection>
+			<template #label>{{ $ts.settings }}</template>
+			<FormInput v-model="emojiName" class="_formBlock">
+				<template #label>{{ $ts.emojiName }}</template>
+			</FormInput>
+
+			<FormTextarea v-model="text" class="_formBlock">
+				<template #label>{{ $ts.text }}</template>
+			</FormTextarea>
+
+			<FormRadios v-model="emojiAlign" class="_formBlock">
+				<template #label>{{ $ts.emojiAlign }}</template>
+				<option value="left"><i class="fas fa-align-left"/></option>
+				<option value="center"><i class="fas fa-align-center"></i></option>
+				<option value="right"><i class="fas fa-align-right"/></option>
+			</FormRadios>
+
+			<FormFolder :default-open="false" class="_formBlock">
+				<template #label>{{ $ts.emojiSizeSetting }}</template>
+				<FormSection>
+					<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
+						<template #label>{{ $ts.emojiSizeFixed }}</template>
+					</FormSwitch>
+
+					<FormSwitch v-model="emojiStretch" class="_formBlock">
+						<template #label>{{ $ts.emojiStretch }}</template>
+					</FormSwitch>
+				</FormSection>
+			</FormFolder>
+
+			<FormFolder :default-open="false" class="_formBlock">
+				<template #label>{{ $ts._pages.font }}</template>
+				<FormRadios v-model="font" class="_formBlock">
+					<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
+					<option value="mplus-1p-black">M+ 1p black</option>
+					<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
+					<option value="ipamjm">IPAmj明朝</option>
+					<option value="aoyagireisyoshimo">青柳隷書しも</option>
+					<option value="LinLibertine_RBah">LinLibertine Bold</option>
+				</FormRadios>
+			</FormFolder>
+
+
+			<FormFolder :default-open="false" class="_formBlock">
+				<template #label>{{ $ts.emojiColor }}</template>
+				<FormSection>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
+								<div class="preview" :style="{ background: color }"></div>
+							</button>
+						</div>
+					</div>
+
+					<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }">
+						<template #prefix><i class="fas fa-palette"></i></template>
+						<template #label @click="colorPick()">{{ $ts.emojiColor }}</template>
+						<template #caption>#RRGGBB</template>
+					</FormInput>
+					<FormButton @click="colorPick()">{{ $ts.colorPicker }}</FormButton>
+				</FormSection>
+			</FormFolder>
+		</FormSection>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { v4 as uuid } from 'uuid';
-import { computed, defineAsyncComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
@@ -78,6 +87,7 @@ import FormSwitch from '@/components/form/switch.vue';
 import FormButton from '@/components/MkButton.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormTextarea from '@/components/form/textarea.vue';
+import FormFolder from '@/components/form/folder.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 const font = ref('rounded-x-mplus-1p-black');
@@ -85,7 +95,7 @@ const text = ref('');
 const emojiName = ref('');
 const emojiAlign = ref('center');
 const emojiSizeFixed = ref(false);
-const emojiStretch = ref(true);
+const emojiStretch = ref(false);
 const emojiColor = ref('90ee90');
 const previewUrl = ref('');
 const accentColors = [
@@ -102,6 +112,21 @@ const accentColors = [
 	'#8080ff',
 ];
 
+watch([font, text, emojiAlign, emojiSizeFixed, emojiStretch, emojiColor], () => {
+	preview();
+});
+
+const colorPick = (): void => {
+	const input = document.createElement('input') as HTMLInputElement;
+	input.type = 'color';
+	input.value = `#${emojiColor.value}`;
+	input.addEventListener('input', () => {
+		emojiColor.value = input.value.replace('#', '');
+	});
+	(window as any).__misskey_input_ref__ = input;
+	input.click();
+};
+
 const makeUrl = (): string => {
 	const API_URL = 'https://emoji-gen.ninja/emoji';