sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-04-29 02:37:22 +09:00
Code Issues Projects Releases Wiki Activity

fix: improve emojigen

Browse Source
This commit is contained in:
こけっち 2022-09-11 23:03:27 +09:00
parent b73d50db29
commit 542349855e
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
2 changed files with 84 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/ja-NY.yml
View File

@ -834,6 +834,7 @@ emojiSizeFixed: "文字サイズを固定する"
emojiStretch: "自動で伸縮しない"
emojiGenerate: "生成"
emojiColor: "カラーコード"
colorPicker: "カラーピッカー"
emojiApproval: "絵文字を登録"
deckOld: "旧デッキ"

141
packages/client/src/pages/admin/emojigen.vue
View File

@ -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';