sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

emojigen wip30

Browse Source
This commit is contained in:
こけっち 2022-05-06 22:42:04 +09:00
parent fb1781ca53
commit db7abd17fb
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
1 changed files with 59 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,81 +1,83 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<div class="cwepdizn _formRoot"> <FormSuspense>
<FormInput v-model="emojiName" class="_formBlock"> <div class="cwepdizn _formRoot">
<template #label>{{ $ts.emojiName }}</template> <FormInput v-model="emojiName" class="_formBlock">
</FormInput> <template #label>{{ $ts.emojiName }}</template>
</FormInput>
<FormTextarea v-model="text" class="_formBlock"> <FormTextarea v-model="text" class="_formBlock">
<template #label>{{ $ts.text }}</template> <template #label>{{ $ts.text }}</template>
</FormTextarea> </FormTextarea>
<FormRadios v-model="emojiAlign" class="_formBlock"> <FormRadios v-model="emojiAlign" class="_formBlock">
<template #label>{{ $ts.emojiAlign }}</template> <template #label>{{ $ts.emojiAlign }}</template>
<option value="left"><i class="fa-solid fa-align-left"/></option> <option value="left"><i class="fa-solid fa-align-left"/></option>
<option value="center"><i class="fa-solid fa-align-center"></i></option> <option value="center"><i class="fa-solid fa-align-center"></i></option>
<option value="right"><i class="fa-solid fa-align-right"/></option> <option value="right"><i class="fa-solid fa-align-right"/></option>
</FormRadios> </FormRadios>
<FormSection> <FormSection>
<template #label>{{ $ts.emojiSizeSetting }}</template> <template #label>{{ $ts.emojiSizeSetting }}</template>
<FormSwitch v-model="emojiSizeFixed" class="_formBlock"> <FormSwitch v-model="emojiSizeFixed" class="_formBlock">
<template #label>{{ $ts.emojiSizeFixed }}</template> <template #label>{{ $ts.emojiSizeFixed }}</template>
</FormSwitch> </FormSwitch>
<FormSwitch v-model="emojiStretch" class="_formBlock"> <FormSwitch v-model="emojiStretch" class="_formBlock">
<template #label>{{ $ts.emojiStretch }}</template> <template #label>{{ $ts.emojiStretch }}</template>
</FormSwitch> </FormSwitch>
</FormSection> </FormSection>
<FormRadios v-model="font" class="_formBlock"> <FormRadios v-model="font" class="_formBlock">
<template #label>{{ $ts.font }}</template> <template #label>{{ $ts.font }}</template>
<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option> <option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
<option value="mplus-1p-black">M+ 1p black</option> <option value="mplus-1p-black">M+ 1p black</option>
<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option> <option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
<option value="ipamjm">IPAmj明朝</option> <option value="ipamjm">IPAmj明朝</option>
<option value="aoyagireisyoshimo">青柳隷書しも</option> <option value="aoyagireisyoshimo">青柳隷書しも</option>
<option value="LinLibertine_RBah">LinLibertine Bold</option> <option value="LinLibertine_RBah">LinLibertine Bold</option>
</FormRadios> </FormRadios>
<FormFolder :default-open="true" class="_formBlock"> <FormFolder :default-open="true" class="_formBlock">
<template #label>{{ $ts.accentColor }}</template> <template #label>{{ $ts.accentColor }}</template>
<div class="cwepdizn-colors"> <div class="cwepdizn-colors">
<div class="row"> <div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)"> <button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div> <div class="preview" :style="{ background: color }"></div>
</button> </button>
</div>
</div> </div>
</div> </FormFolder>
</FormFolder>
<FormInput v-model="emojiColor" class="_formBlock">
<template #prefix><i class="fas fa-palette"></i></template>
<template #label>{{ $ts.emojiColor }}</template>
<template #caption>#RRGGBB</template>
</FormInput>
<FormInput v-model="emojiColor" class="_formBlock"> <FormButton primary class="_formBlock" @click="emojiGenerate">{{ $ts.emojiGenerate }}</FormButton>
<template #prefix><i class="fas fa-palette"></i></template>
<template #label>{{ $ts.emojiColor }}</template>
<template #caption>#RRGGBB</template>
</FormInput>
<FormButton primary class="_formBlock" @click="emojiGenerate">{{ $ts.emojiGenerate }}</FormButton> <FormSection>
<template #label>{{ $ts.preview }}</template>
<FormSection> <img :src="emojiUrl" class="img" :alt="emojiName"/>
<template #label>{{ $ts.preview }}</template> <p>{{ emojiUrl }}</p>
<img :src="emojiUrl" class="img" :alt="emojiName"/> </FormSection>
<p>{{ emojiUrl }}</p> <FormButton primary class="_formBlock" @click="emojiApproval">{{ $ts.emojiApproval }}</FormButton>
</FormSection> </div>
<FormButton primary class="_formBlock" @click="emojiApproval">{{ $ts.emojiApproval }}</FormButton> </FormSuspense>
</div>
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from 'vue'; import {defineComponent} from 'vue';
import FormFolder from '@/components/form/folder.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormFolder from '@/components/form/folder.vue';
import FormButton from '@/components/ui/button.vue'; import FormButton from '@/components/ui/button.vue';
import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import {defaultStore} from "@/store"; import {defaultStore} from "@/store";
@ -84,13 +86,14 @@ import {stream} from "@/stream";
export default defineComponent({ export default defineComponent({
components: { components: {
FormFolder,
FormInput, FormInput,
FormTextarea, FormTextarea,
FormRadios, FormRadios,
FormSection, FormSection,
FormSwitch, FormSwitch,
FormButton, FormButton,
FormFolder, FormSuspense,
}, },
emits: ['info'], emits: ['info'],