diff options
author | dartcafe <github@dartcafe.de> | 2020-10-16 20:44:52 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-10-16 20:44:52 +0300 |
commit | eb75e458c7aaee6762fcb51f93ef6cb91262685b (patch) | |
tree | eaa4603657f3e05c864b81fe14d7b8b7529d98f3 /src/js/components/Settings | |
parent | 1e97d957b84b7a6e048d24d6a0d70ef652f2263e (diff) |
Move settings to new AppSettingsDialog from nextcloud-vue
Diffstat (limited to 'src/js/components/Settings')
-rw-r--r-- | src/js/components/Settings/ExpertimantalSettings.vue | 149 | ||||
-rw-r--r-- | src/js/components/Settings/FeatureSettings.vue | 123 | ||||
-rw-r--r-- | src/js/components/Settings/SettingsDlg.vue | 69 |
3 files changed, 341 insertions, 0 deletions
diff --git a/src/js/components/Settings/ExpertimantalSettings.vue b/src/js/components/Settings/ExpertimantalSettings.vue new file mode 100644 index 00000000..e13c5055 --- /dev/null +++ b/src/js/components/Settings/ExpertimantalSettings.vue @@ -0,0 +1,149 @@ +<!-- + - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <div> + <div class="user_settings"> + <input id="experimental" v-model="experimental" + type="checkbox" class="checkbox"> + <label for="experimental">{{ t('polls', 'Try experimental styles') }}</label> + <div class="settings_description"> + {{ t('polls', 'Some experimental UI variants. Changes the background color of the main area.') }} + </div> + </div> + + <div v-if="experimental"> + <div class="user_settings"> + <input id="useImage" v-model="useImage" + type="checkbox" class="checkbox"> + <label for="useImage">{{ t('polls', 'Use background image') }}</label> + <div class="settings_description"> + {{ t('polls', 'Add a background image to the main ares.') }} + </div> + </div> + + <div class="user_settings"> + <input v-if="useImage" v-model="imageUrl" type="text"> + <div class="settings_description"> + {{ t('polls', 'Enter the URL of your favorite background image.') }} + </div> + </div> + + <div class="user_settings"> + <input id="glassyNavigation" v-model="glassyNavigation" + type="checkbox" class="checkbox"> + <label for="glassyNavigation">{{ t('polls', 'Glassy navigation') }}</label> + <div class="settings_description"> + {{ t('polls', 'Blurrs the background of the navigation (Does not work with all browsers).') }} + </div> + </div> + + <div class="user_settings"> + <input id="glassySidebar" v-model="glassySidebar" + type="checkbox" class="checkbox"> + <label for="glassySidebar">{{ t('polls', 'Glassy sidebar') }}</label> + <div class="settings_description"> + {{ t('polls', 'Blurrs the background of the sidebar (Does not work with all browsers).') }} + </div> + </div> + </div> + </div> +</template> + +<script> + +import { mapState } from 'vuex' + +export default { + name: 'ExpertimantalSettings', + + props: { + show: { + type: Boolean, + default: false, + }, + }, + + computed: { + ...mapState({ + settings: state => state.settings.user, + }), + // Add bindings + experimental: { + get() { + return this.settings.experimental + }, + set(value) { + this.writeValue({ experimental: value }) + }, + }, + useImage: { + get() { + return this.settings.useImage + }, + set(value) { + this.writeValue({ useImage: value }) + }, + }, + imageUrl: { + get() { + return this.settings.imageUrl + }, + set(value) { + this.writeValue({ imageUrl: value }) + }, + }, + glassyNavigation: { + get() { + return this.settings.glassyNavigation + }, + set(value) { + this.writeValue({ glassyNavigation: value }) + }, + }, + glassySidebar: { + get() { + return this.settings.glassySidebar + }, + set(value) { + this.writeValue({ glassySidebar: value }) + }, + }, + }, + + methods: { + writeValue(value) { + this.$store.commit('settings/setPreference', value) + this.$store.dispatch('settings/write') + }, + }, +} +</script> + +<style> + .user_settings { + padding-top: 16px; + } + .settings_description { + padding-top: 8px; + } +</style> diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue new file mode 100644 index 00000000..14321614 --- /dev/null +++ b/src/js/components/Settings/FeatureSettings.vue @@ -0,0 +1,123 @@ +<!-- + - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <div :open.sync="show"> + <div class="user_settings"> + <input id="calendarPeek" v-model="calendarPeek" + type="checkbox" class="checkbox"> + <label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label> + <div class="settings_description"> + {{ t('polls', 'Check, if an option in a date poll is conflicting with or near an entry in your calendar.') }} + </div> + </div> + + <div class="user_settings"> + <input id="defaultViewTextPoll" v-model="defaultViewTextPoll" + type="checkbox" class="checkbox"> + <label for="defaultViewTextPoll">{{ t('polls', 'Text polls default to list view') }}</label> + <div class="settings_description"> + {{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }} + </div> + </div> + + <div class="user_settings"> + <input id="defaultViewDatePoll" v-model="defaultViewDatePoll" + type="checkbox" class="checkbox"> + <label for="defaultViewDatePoll">{{ t('polls', 'Date polls default to list view') }}</label> + <div class="settings_description"> + {{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }} + </div> + </div> + </div> +</template> + +<script> + +import { mapState } from 'vuex' + +export default { + name: 'FeatureSettings', + + props: { + show: { + type: Boolean, + default: false, + }, + }, + + computed: { + ...mapState({ + settings: state => state.settings.user, + }), + // Add bindings + calendarPeek: { + get() { + return this.settings.calendarPeek + }, + set(value) { + this.writeValue({ calendarPeek: value }) + }, + }, + defaultViewTextPoll: { + get() { + return (this.settings.defaultViewTextPoll === 'mobile') + }, + set(value) { + if (value) { + this.writeValue({ defaultViewTextPoll: 'mobile' }) + } else { + this.writeValue({ defaultViewTextPoll: 'desktop' }) + } + }, + }, + defaultViewDatePoll: { + get() { + return (this.settings.defaultViewDatePoll === 'mobile') + }, + set(value) { + if (value) { + this.writeValue({ defaultViewDatePoll: 'mobile' }) + } else { + this.writeValue({ defaultViewDatePoll: 'desktop' }) + } + }, + }, + }, + + methods: { + writeValue(value) { + this.$store.commit('settings/setPreference', value) + this.$store.dispatch('settings/write') + }, + }, +} +</script> + +<style> + .user_settings { + padding-top: 16px; + } + .settings_description { + padding-top: 8px; + } +</style> diff --git a/src/js/components/Settings/SettingsDlg.vue b/src/js/components/Settings/SettingsDlg.vue new file mode 100644 index 00000000..aeafb472 --- /dev/null +++ b/src/js/components/Settings/SettingsDlg.vue @@ -0,0 +1,69 @@ +<!-- + - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <AppSettingsDialog :open.sync="show"> + <AppSettingsSection :title="t('polls', 'User Settings')"> + <FeatureSettings /> + </AppSettingsSection> + + <AppSettingsSection :title="t('polls', 'Experimental Styles')"> + <ExpertimantalSettings /> + </AppSettingsSection> + </AppSettingsDialog> +</template> + +<script> + +import { AppSettingsDialog, AppSettingsSection } from '@nextcloud/vue' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import FeatureSettings from './FeatureSettings' +import ExpertimantalSettings from './ExpertimantalSettings' + +export default { + name: 'SettingsDlg', + + components: { + AppSettingsDialog, + AppSettingsSection, + FeatureSettings, + ExpertimantalSettings, + }, + + data() { + return { + show: false, + } + }, + + created() { + subscribe('show-settings', () => { + this.show = true + }) + + }, + + beforeDestroy() { + unsubscribe('show-settings') + }, +} +</script> |