Move settings to new AppSettingsDialog from nextcloud-vue

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>