enhance(frontend): use MkColorInput

This commit is contained in:
syuilo 2023-05-02 12:32:21 +09:00
parent 8dc5edde76
commit 379c5a8091
2 changed files with 6 additions and 7 deletions

View file

@ -8,10 +8,9 @@
<template #label>{{ i18n.ts._role.description }}</template> <template #label>{{ i18n.ts._role.description }}</template>
</MkTextarea> </MkTextarea>
<MkInput v-model="role.color"> <MkColorInput v-model="role.color">
<template #label>{{ i18n.ts.color }}</template> <template #label>{{ i18n.ts.color }}</template>
<template #caption>#RRGGBB</template> </MkColorInput>
</MkInput>
<MkInput v-model="role.iconUrl"> <MkInput v-model="role.iconUrl">
<template #label>{{ i18n.ts._role.iconUrl }}</template> <template #label>{{ i18n.ts._role.iconUrl }}</template>
@ -414,6 +413,7 @@ import { watch } from 'vue';
import { throttle } from 'throttle-debounce'; import { throttle } from 'throttle-debounce';
import RolesEditorFormula from './RolesEditorFormula.vue'; import RolesEditorFormula from './RolesEditorFormula.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkColorInput from '@/components/MkColorInput.vue';
import MkSelect from '@/components/MkSelect.vue'; import MkSelect from '@/components/MkSelect.vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkTextarea from '@/components/MkTextarea.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';

View file

@ -60,11 +60,9 @@
<template #label>{{ i18n.ts.backgroundImageUrl }}</template> <template #label>{{ i18n.ts.backgroundImageUrl }}</template>
</MkInput> </MkInput>
<MkInput v-model="themeColor"> <MkColorInput v-model="themeColor">
<template #prefix><i class="ti ti-palette"></i></template>
<template #label>{{ i18n.ts.themeColor }}</template> <template #label>{{ i18n.ts.themeColor }}</template>
<template #caption>#RRGGBB</template> </MkColorInput>
</MkInput>
<MkTextarea v-model="defaultLightTheme"> <MkTextarea v-model="defaultLightTheme">
<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template> <template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
@ -153,6 +151,7 @@ import { fetchInstance } from '@/instance';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkColorInput from '@/components/MkColorInput.vue';
let name: string | null = $ref(null); let name: string | null = $ref(null);
let description: string | null = $ref(null); let description: string | null = $ref(null);