akkoma-fe/src/components/settings_modal/settings_modal.vue

119 lines
3.4 KiB
Vue
Raw Normal View History

2020-05-03 14:36:12 +00:00
<template>
2020-05-25 00:43:55 +00:00
<Modal
:is-open="modalActivated"
class="settings-modal"
:class="{ peek: modalPeeked }"
:no-background="modalPeeked"
2020-05-03 14:36:12 +00:00
>
<div class="settings-modal-panel panel">
<div class="panel-heading">
<span class="title">
{{ $t('settings.settings') }}
</span>
<transition name="fade">
<template v-if="currentSaveStateNotice">
<div
v-if="currentSaveStateNotice.error"
class="alert error"
@click.prevent
>
{{ $t('settings.saving_err') }}
</div>
<div
v-if="!currentSaveStateNotice.error"
class="alert transparent"
@click.prevent
>
{{ $t('settings.saving_ok') }}
</div>
</template>
</transition>
<button
class="btn button-default"
2021-03-08 17:53:30 +00:00
:title="$t('general.peek')"
2021-03-08 19:03:55 +00:00
@click="peekModal"
>
2021-03-08 17:53:30 +00:00
<FAIcon
:icon="['far', 'window-minimize']"
fixed-width
/>
</button>
<button
class="btn button-default"
2021-03-08 17:53:30 +00:00
:title="$t('general.close')"
2021-03-08 19:03:55 +00:00
@click="closeModal"
>
2021-03-08 17:53:30 +00:00
<FAIcon
icon="times"
fixed-width
/>
</button>
</div>
<div class="panel-body">
<SettingsModalContent v-if="modalOpenedOnce" />
</div>
2021-03-08 17:53:30 +00:00
<div class="panel-footer">
<Popover
class="export"
trigger="click"
placement="top"
:offset="{ y: 5, x: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
2021-03-08 19:03:55 +00:00
>
2021-04-07 19:42:34 +00:00
<template v-slot:trigger>
<button
class="btn button-default"
:title="$t('general.close')"
>
<span>{{ $t("settings.file_export_import.backup_restore") }}</span>
<FAIcon
icon="chevron-down"
/>
</button>
</template>
2021-05-31 11:08:12 +00:00
<template v-slot:content="{close}">
2021-03-08 17:53:30 +00:00
<div class="dropdown-menu">
<button
class="button-default dropdown-item dropdown-item-icon"
@click.prevent="backup"
@click="close"
>
<FAIcon
icon="file-download"
fixed-width
2021-03-08 19:00:43 +00:00
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
2021-03-08 17:53:30 +00:00
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click.prevent="backupWithTheme"
@click="close"
>
<FAIcon
icon="file-download"
fixed-width
2021-03-08 19:00:43 +00:00
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
2021-03-08 17:53:30 +00:00
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click.prevent="restore"
@click="close"
>
<FAIcon
icon="file-upload"
fixed-width
2021-03-08 19:00:43 +00:00
/><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
2021-03-08 17:53:30 +00:00
</button>
</div>
2021-04-07 19:42:34 +00:00
</template>
2021-03-08 17:53:30 +00:00
</Popover>
</div>
</div>
2020-05-25 00:43:55 +00:00
</Modal>
2020-05-03 14:36:12 +00:00
</template>
<script src="./settings_modal.js"></script>
<style src="./settings_modal.scss" lang="scss"></style>