Add settings

5 files changed, 40 insertions, 53 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index f979106c..08a849e0 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Content app-name="polls" :class="[transitionClass, { 'experimental': settings.experimental, 'bgimage': settings.useImage, 'bgcolored': settings.experimental }]">
+	<Content app-name="polls" :style="appStyle" :class="[transitionClass, { 'experimental': settings.experimental, 'bgimage': settings.useImage, 'bgcolored': settings.experimental }]">
 		<Navigation v-if="getCurrentUser()" :class="{ 'glassy': settings.glassyNavigation }" />
 		<router-view />
 		<SideBar v-if="sideBarOpen && $store.state.poll.id"
@@ -60,7 +60,16 @@ export default {
 		...mapState({
 			settings: state => state.settings.user,
 		}),
-
+		appStyle() {
+			if (this.settings.useImage && this.settings.experimental) {
+				return {
+					backgroundImage: 'url(' + this.settings.imageUrl + ')',
+					backgroundSize: 'cover',
+				}
+			} else {
+				return {}
+			}
+		},
 	},
 
 	created() {
@@ -340,45 +349,6 @@ input {
 
 	// experimental background image
 	&.app-polls.bgimage {
-		background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)');
-		background-size: cover;
-		.glassy {
-			backdrop-filter: blur(10px);
-			background-color: rgba(255, 255, 255, 0.5);
-		}
-		.app-navigation {
-			border-right: 0px;
-			box-shadow: 2px 0 6px var(--color-box-shadow);
-		}
-		.app-content {
-			background-color: transparent;
-		}
-		[class*='area__'] {
-			box-shadow: 2px 2px 6px var(--color-box-shadow);
-			margin: 12px;
-		}
-	}
-}
-
-.experimental {
-	&.app-polls.bgcolored {
-		.app-navigation {
-			border-right: 0px;
-			box-shadow: 2px 0 6px var(--color-box-shadow);
-		}
-		.app-content {
-			background-color: var(--color-primary-light);
-			[class*='area__'] {
-				box-shadow: 2px 2px 6px var(--color-box-shadow);
-				margin: 12px;
-			}
-		}
-	}
-
-	// experimental background image
-	&.app-polls.bgimage {
-		background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)');
-		background-size: cover;
 		.glassy {
 			backdrop-filter: blur(10px);
 			background-color: rgba(255, 255, 255, 0.5);
diff --git a/src/js/components/Navigation/NavigationSettings.vue b/src/js/components/Navigation/NavigationSettings.vue
index d17f7983..4c31d57f 100644
--- a/src/js/components/Navigation/NavigationSettings.vue
+++ b/src/js/components/Navigation/NavigationSettings.vue
@@ -22,22 +22,28 @@
 
 <template>
 	<div>
+		<input id="calendarPeek" v-model="calendarPeek"
+			type="checkbox" class="checkbox">
+		<label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label>
+
 		<input id="experimental" v-model="experimental"
 			type="checkbox" class="checkbox">
-		<label for="experimental">{{ t('polls', 'Activate experimental settings.') }}</label>
+		<label for="experimental">{{ t('polls', 'Try experimental styles') }}</label>
 
 		<div v-if="experimental">
-			<input id="useimage" v-model="useImage"
+			<input id="useImage" v-model="useImage"
 				type="checkbox" class="checkbox">
-			<label for="useimage">{{ t('polls', 'Use background image.') }}</label>
+			<label for="useImage">{{ t('polls', 'Use background image') }}</label>
+
+			<input v-if="useImage" v-model="imageUrl" type="text">
 
-			<!-- <input v-if="bgImage" v-model="imageurl" type="text"> -->
 			<input id="glassyNavigation" v-model="glassyNavigation"
 				type="checkbox" class="checkbox">
-			<label for="glassyNavigation">{{ t('polls', 'Glassy navigation.') }}</label>
+			<label for="glassyNavigation">{{ t('polls', 'Glassy navigation') }}</label>
+
 			<input id="glassySidebar" v-model="glassySidebar"
 				type="checkbox" class="checkbox">
-			<label for="glassySidebar">{{ t('polls', 'Glassy sidebar.') }}</label>
+			<label for="glassySidebar">{{ t('polls', 'Glassy sidebar') }}</label>
 		</div>
 	</div>
 </template>
@@ -45,6 +51,7 @@
 <script>
 
 import { mapState } from 'vuex'
+
 export default {
 	name: 'NavigationSettings',
 
@@ -85,6 +92,14 @@ export default {
 				this.writeValue({ glassyNavigation: value })
 			},
 		},
+		calendarPeek: {
+			get() {
+				return this.settings.calendarPeek
+			},
+			set(value) {
+				this.writeValue({ calendarPeek: value })
+			},
+		},
 		glassySidebar: {
 			get() {
 				return this.settings.glassySidebar
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index 5339b250..aca08205 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -109,13 +109,13 @@
 </template>
 
 <script>
-import ConfigBox from '../Base/ConfigBox'
 import debounce from 'lodash/debounce'
 import { mapState } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import { DatetimePicker } from '@nextcloud/vue'
+import ConfigBox from '../Base/ConfigBox'
 
 export default {
 	name: 'SideBarTabConfiguration',
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 513e8225..6ece1213 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -43,7 +43,7 @@
 				:table-mode="tableMode" />
 		</transition-group>
 
-		<div v-if="poll.type === 'datePoll' && getCurrentUser()" class="vote-table__calendar">
+		<div v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" class="vote-table__calendar">
 			<CalendarPeek
 				v-for="(option) in rankedOptions"
 				:key="option.id"
@@ -113,8 +113,8 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
-		Modal,
 		CalendarPeek,
+		Modal,
 		VoteTableHeaderItem,
 		VoteTableVoteItem,
 	},
@@ -141,14 +141,15 @@ export default {
 
 	computed: {
 		...mapState({
-			poll: state => state.poll,
 			acl: state => state.poll.acl,
+			poll: state => state.poll,
+			settings: state => state.settings.user,
 		}),
 
 		...mapGetters({
-			sortedOptions: 'poll/options/sorted',
-			participants: 'poll/participants',
 			expired: 'poll/expired',
+			participants: 'poll/participants',
+			sortedOptions: 'poll/options/sorted',
 		}),
 
 		rankedOptions() {
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index 406c18bb..a3dc6866 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -27,6 +27,7 @@ const defaultSettings = () => {
 	return {
 		user: {
 			experimental: false,
+			calendarPeek: false,
 			useImage: false,
 			imageUrl: '',
 			glassyNavigation: false,