define default settings for view modes

src/js/components/Navigation/NavigationSettings.vue

@@ -26,6 +26,14 @@
 			type="checkbox" class="checkbox">
 		<label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label>
 
+		<input id="defaultViewTextPoll" v-model="defaultViewTextPoll"
+			type="checkbox" class="checkbox">
+		<label for="defaultViewTextPoll">{{ t('polls', 'Text polls default to table view') }}</label>
+
+		<input id="defaultViewDatePoll" v-model="defaultViewDatePoll"
+			type="checkbox" class="checkbox">
+		<label for="defaultViewDatePoll">{{ t('polls', 'Date polls default to table view') }}</label>
+
 		<input id="experimental" v-model="experimental"
 			type="checkbox" class="checkbox">
 		<label for="experimental">{{ t('polls', 'Try experimental styles') }}</label>
@@ -55,11 +63,52 @@ import { mapState } from 'vuex'
 export default {
 	name: 'NavigationSettings',
 
+	data() {
+		return {
+			viewOptions: [
+				'desktop',
+				'mobile',
+			],
+		}
+	},
+
 	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' })
+				}
+			},
+		},
 		experimental: {
 			get() {
 				return this.settings.experimental
@@ -92,14 +141,6 @@ export default {
 				this.writeValue({ glassyNavigation: value })
 			},
 		},
-		calendarPeek: {
-			get() {
-				return this.settings.calendarPeek
-			},
-			set(value) {
-				this.writeValue({ calendarPeek: value })
-			},
-		},
 		glassySidebar: {
 			get() {
 				return this.settings.glassySidebar

src/js/store/modules/settings.js

@@ -32,11 +32,13 @@ const defaultSettings = () => {
 			imageUrl: '',
 			glassyNavigation: false,
 			glassySidebar: false,
-			defaultView: {
-				textPoll: 'mobile',
-				datePoll: 'desktop',
-			},
+			defaultViewTextPoll: 'mobile',
+			defaultViewDatePoll: 'desktop',
 		},
+		viewModes: [
+			'mobile',
+			'desktop',
+		],
 	}
 }
 
@@ -79,7 +81,6 @@ const actions = {
 				throw error
 			})
 	},
-
 }
 
 export default { namespaced, state, mutations, actions }

src/js/views/Vote.vue

@@ -128,8 +128,8 @@ export default {
 			delay: 50,
 			isLoading: true,
 			ranked: false,
-			manualViewDatePoll: false,
-			manualViewTextPoll: false,
+			manualViewDatePoll: '',
+			manualViewTextPoll: '',
 		}
 	},
 
@@ -148,37 +148,33 @@ export default {
 
 		viewTextPoll() {
 			if (this.manualViewTextPoll) {
-				if (this.settings.user.defaultView.textPoll === 'desktop') {
-					return 'mobile'
+				return this.manualViewTextPoll
+			} else {
+				if (window.innerWidth > 480) {
+					return this.settings.user.defaultViewTextPoll
 				} else {
-					return 'desktop'
+					return 'mobile'
 				}
-			} else {
-				return this.settings.user.defaultView.textPoll
 			}
 		},
 
 		viewDatePoll() {
 			if (this.manualViewDatePoll) {
-				if (this.settings.user.defaultView.datePoll === 'desktop') {
-					return 'mobile'
-				} else {
-					return 'desktop'
-				}
+				return this.manualViewDatePoll
 			} else {
-				if (window.innerWidth < 481) {
-					return 'mobile'
+				if (window.innerWidth > 480) {
+					return this.settings.user.defaultViewDatePoll
 				} else {
-					return this.settings.user.defaultView.datePoll
+					return 'mobile'
 				}
 			}
 		},
 
 		viewMode() {
-			if (this.poll.type === 'datePoll') {
-				return this.viewDatePoll
-			} else if (this.poll.type === 'textPoll') {
+			if (this.poll.type === 'textPoll') {
 				return this.viewTextPoll
+			} else if (this.poll.type === 'datePoll') {
+				return this.viewDatePoll
 			} else {
 				return 'desktop'
 			}
@@ -275,6 +271,14 @@ export default {
 			emit('toggle-sidebar', { open: true, activeTab: 'options' })
 		},
 
+		getNextViewMode() {
+			if (this.settings.viewModes.indexOf(this.viewMode) < 0) {
+				return this.settings.viewModes[1]
+			} else {
+				return this.settings.viewModes[(this.settings.viewModes.indexOf(this.viewMode) + 1) % this.settings.viewModes.length]
+			}
+		},
+
 		openConfiguration() {
 			emit('toggle-sidebar', { open: true, activeTab: 'configuration' })
 		},
@@ -286,9 +290,17 @@ export default {
 		toggleView() {
 			emit('transitions-off', { delay: 500 })
 			if (this.poll.type === 'datePoll') {
-				this.manualViewDatePoll = !this.manualViewDatePoll
-			} else {
-				this.manualViewTextPoll = !this.manualViewTextPoll
+				if (this.manualViewDatePoll) {
+					this.manualViewDatePoll = ''
+				} else {
+					this.manualViewDatePoll = this.getNextViewMode()
+				}
+			} else if (this.poll.type === 'textPoll') {
+				if (this.manualViewTextPoll) {
+					this.manualViewTextPoll = ''
+				} else {
+					this.manualViewTextPoll = this.getNextViewMode()
+				}
 			}
 		},