From 813f63663c034f24bffce9d3a17609bf421221ce Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 4 Jan 2022 18:47:54 +0900 Subject: [PATCH] tweak ui --- .../client/src/pages/admin/instance-block.vue | 26 +++++---------- .../client/src/pages/admin/service-worker.vue | 32 ++++++++----------- 2 files changed, 22 insertions(+), 36 deletions(-) diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue index 2e899de68..d1f7914ee 100644 --- a/packages/client/src/pages/admin/instance-block.vue +++ b/packages/client/src/pages/admin/instance-block.vue @@ -1,39 +1,29 @@ <template> -<FormBase> +<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <FormSuspense :p="init"> - <FormTextarea v-model="blockedHosts"> + <FormTextarea v-model="blockedHosts" class="_formBlock"> <span>{{ $ts.blockedInstances }}</span> - <template #desc>{{ $ts.blockedInstancesDescription }}</template> + <template #caption>{{ $ts.blockedInstancesDescription }}</template> </FormTextarea> - <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> + <FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> </FormSuspense> -</FormBase> +</MkSpacer> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormInput from '@/components/debobigego/input.vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormInfo from '@/components/debobigego/info.vue'; -import FormSuspense from '@/components/debobigego/suspense.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormTextarea from '@/components/form/textarea.vue'; +import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; import { fetchInstance } from '@/instance'; export default defineComponent({ components: { - FormSwitch, - FormInput, - FormBase, - FormGroup, FormButton, FormTextarea, - FormInfo, FormSuspense, }, diff --git a/packages/client/src/pages/admin/service-worker.vue b/packages/client/src/pages/admin/service-worker.vue index f34cb03e4..eb4c2bb9a 100644 --- a/packages/client/src/pages/admin/service-worker.vue +++ b/packages/client/src/pages/admin/service-worker.vue @@ -1,36 +1,34 @@ <template> -<FormBase> +<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <FormSuspense :p="init"> - <FormSwitch v-model="enableServiceWorker"> - {{ $ts.enableServiceworker }} - <template #desc>{{ $ts.serviceworkerInfo }}</template> + <FormSwitch v-model="enableServiceWorker" class="_formBlock"> + <template #label>{{ $ts.enableServiceworker }}</template> + <template #caption>{{ $ts.serviceworkerInfo }}</template> </FormSwitch> <template v-if="enableServiceWorker"> - <FormInput v-model="swPublicKey"> + <FormInput v-model="swPublicKey" class="_formBlock"> <template #prefix><i class="fas fa-key"></i></template> - Public key + <template #label>Public key</template> </FormInput> - <FormInput v-model="swPrivateKey"> + <FormInput v-model="swPrivateKey" class="_formBlock"> <template #prefix><i class="fas fa-key"></i></template> - Private key + <template #label>Private key</template> </FormInput> </template> - <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> + <FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> </FormSuspense> -</FormBase> +</MkSpacer> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormInput from '@/components/debobigego/input.vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormSuspense from '@/components/debobigego/suspense.vue'; +import FormSwitch from '@/components/form/switch.vue'; +import FormInput from '@/components/form/input.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; import { fetchInstance } from '@/instance'; @@ -39,8 +37,6 @@ export default defineComponent({ components: { FormSwitch, FormInput, - FormBase, - FormGroup, FormButton, FormSuspense, },