From a74beaac3666009eedd3595e3c05a1a03181e568 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 31 Dec 2020 19:01:12 +0900 Subject: [PATCH] :art: --- src/client/pages/settings/import-export.vue | 78 +++++++++++++-------- 1 file changed, 50 insertions(+), 28 deletions(-) diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue index 91020070a..2e384bb76 100644 --- a/src/client/pages/settings/import-export.vue +++ b/src/client/pages/settings/import-export.vue @@ -1,49 +1,71 @@ <template> -<section class="_section"> - <div class="_title"><Fa :icon="faBoxes"/> {{ $ts.importAndExport }}</div> - <div class="_content"> - <MkSelect v-model:value="exportTarget"> - <option value="notes">{{ $ts._exportOrImport.allNotes }}</option> - <option value="following">{{ $ts._exportOrImport.followingList }}</option> - <option value="user-lists">{{ $ts._exportOrImport.userLists }}</option> - <option value="mute">{{ $ts._exportOrImport.muteList }}</option> - <option value="blocking">{{ $ts._exportOrImport.blockingList }}</option> - </MkSelect> - <MkButton inline primary @click="doExport"><Fa :icon="faDownload"/> {{ $ts.export }}</MkButton> - <MkButton inline primary @click="doImport" :disabled="!['following', 'user-lists'].includes(exportTarget)"><Fa :icon="faUpload"/> {{ $ts.import }}</MkButton> - </div> -</section> +<FormBase> + <FormGroup> + <template #label>{{ $ts._exportOrImport.allNotes }}</template> + <FormButton @click="doExport('notes')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + </FormGroup> + <FormGroup> + <template #label>{{ $ts._exportOrImport.followingList }}</template> + <FormButton @click="doExport('following')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + <FormButton @click="doImport('following', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton> + </FormGroup> + <FormGroup> + <template #label>{{ $ts._exportOrImport.userLists }}</template> + <FormButton @click="doExport('user-lists')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + <FormButton @click="doImport('user-lists', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton> + </FormGroup> + <FormGroup> + <template #label>{{ $ts._exportOrImport.muteList }}</template> + <FormButton @click="doExport('mute')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + </FormGroup> + <FormGroup> + <template #label>{{ $ts._exportOrImport.blockingList }}</template> + <FormButton @click="doExport('blocking')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + </FormGroup> +</FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons'; -import MkButton from '@/components/ui/button.vue'; -import MkSelect from '@/components/ui/select.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormButton from '@/components/form/button.vue'; +import FormBase from '@/components/form/base.vue'; +import FormGroup from '@/components/form/group.vue'; import * as os from '@/os'; import { selectFile } from '@/scripts/select-file'; export default defineComponent({ components: { - MkButton, - MkSelect, + FormBase, + FormGroup, + FormButton, }, + emits: ['info'], + data() { return { - exportTarget: 'notes', + INFO: { + title: this.$ts.importAndExport, + icon: faBoxes + }, faDownload, faUpload, faBoxes } }, + mounted() { + this.$emit('info', this.INFO); + }, + methods: { - doExport() { + doExport(target) { os.api( - this.exportTarget == 'notes' ? 'i/export-notes' : - this.exportTarget == 'following' ? 'i/export-following' : - this.exportTarget == 'blocking' ? 'i/export-blocking' : - this.exportTarget == 'user-lists' ? 'i/export-user-lists' : - this.exportTarget == 'mute' ? 'i/export-mute' : + target == 'notes' ? 'i/export-notes' : + target == 'following' ? 'i/export-following' : + target == 'blocking' ? 'i/export-blocking' : + target == 'user-lists' ? 'i/export-user-lists' : + target == 'mute' ? 'i/export-mute' : null, {}) .then(() => { os.dialog({ @@ -58,12 +80,12 @@ export default defineComponent({ }); }, - async doImport(e) { + async doImport(target, e) { const file = await selectFile(e.currentTarget || e.target); os.api( - this.exportTarget == 'following' ? 'i/import-following' : - this.exportTarget == 'user-lists' ? 'i/import-user-lists' : + target == 'following' ? 'i/import-following' : + target == 'user-lists' ? 'i/import-user-lists' : null, { fileId: file.id }).then(() => {