converting mobile and desktop view to list-view and table-view

Signed-off-by: dartcafe <github@dartcafe.de>

12 files changed, 82 insertions, 31 deletions

diff --git a/src/js/assets/icons/anonymous.svg b/src/js/assets/icons/anonymous.svg
new file mode 100644
index 00000000..9bd2d46a
--- /dev/null
+++ b/src/js/assets/icons/anonymous.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16">
+  <g
+     transform="matrix(0.02467591,0,0,0.02467591,1.609349,0.97068923)">
+    <path
+       d="m 511.086,187.131 c -37.584,-20.402 -77.071,-34.679 -120.667,-33.221 -24.969,0.843 -49.149,6.877 -73.324,12.632 -13.353,3.173 -26.705,6.403 -39.988,9.887 -4.051,1.066 -8.036,1.528 -11.982,1.682 -3.943,-0.147 -7.929,-0.616 -11.976,-1.682 -13.287,-3.484 -26.635,-6.714 -39.992,-9.887 -24.178,-5.75 -48.355,-11.789 -73.324,-12.632 -43.6,-1.458 -83.086,12.823 -120.667,33.221 -17.105,9.285 -21.56,17.524 -18.052,32.65 4.172,17.987 9.73,35.785 17.702,52.374 7.078,14.739 14.834,29.23 23.48,43.306 14.003,22.785 29.139,43.353 55.571,52.846 16.043,5.759 32.413,8.97 49.392,7.948 9.458,-0.574 18.027,-4.621 26.472,-8.807 8.387,-4.163 16.956,-8 24.498,-13.623 7.488,-5.587 15.45,-10.791 21.951,-17.408 0,0 26.892,-26.174 44.946,-30.196 18.064,4.027 44.946,30.196 44.946,30.196 6.501,6.617 14.464,11.821 21.959,17.408 7.537,5.623 16.115,9.455 24.497,13.623 8.438,4.186 17.007,8.232 26.472,8.807 16.979,1.021 33.347,-2.189 49.392,-7.948 26.43,-9.488 41.574,-30.061 55.566,-52.846 8.648,-14.071 16.4,-28.566 23.48,-43.306 7.967,-16.589 13.525,-34.382 17.702,-52.374 3.504,-15.126 -0.953,-23.365 -18.054,-32.65 z M 132.998,288.92 C 99.066,277.378 81.464,238.886 81.464,238.886 c 0,0 37.416,-19.77 71.348,-8.233 33.932,11.537 51.527,50.029 51.527,50.029 0,0 -37.414,19.775 -71.341,8.238 z m 264.258,0 c -33.93,11.537 -71.35,-8.237 -71.35,-8.237 0,0 17.604,-38.492 51.538,-50.029 33.925,-11.537 71.341,8.233 71.341,8.233 0,0 -17.594,38.491 -51.529,50.033 z" />
+  </g>
+</svg>
diff --git a/src/js/assets/icons/back.svg b/src/js/assets/icons/back.svg
index c9e56bcf..7f7db51d 100644
--- a/src/js/assets/icons/back.svg
+++ b/src/js/assets/icons/back.svg
@@ -1,4 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16">
-  <path
-     d="m 7.4983269,0.5 c 0.8974,0 1.3404,1.0909 0.6973,1.7168 L 3.4119269,7 H 14.984927 c 1.3523,-0.019125 1.3523,2.0191 0,2 H 3.4129269 l 4.7832,4.7832 c 0.98163,0.94251 -0.47155,2.3957 -1.4141,1.4141 l -6.49109997,-6.49 c -0.387,-0.3878 -0.391,-1.0228 0,-1.414 L 6.7815269,0.803 c 0.1883,-0.1935 0.4468,-0.30268 0.7168,-0.3027 z" />
+	<path d="m 7.4983269,0.5 c 0.8974,0 1.3404,1.0909 0.6973,1.7168 L 3.4119269,7 H 14.984927 c 1.3523,-0.019125 1.3523,2.0191 0,2 H 3.4129269 l 4.7832,4.7832 c 0.98163,0.94251 -0.47155,2.3957 -1.4141,1.4141 l -6.49109997,-6.49 c -0.387,-0.3878 -0.391,-1.0228 0,-1.414 L 6.7815269,0.803 c 0.1883,-0.1935 0.4468,-0.30268 0.7168,-0.3027 z" />
 </svg>
diff --git a/src/js/assets/icons/list-view.svg b/src/js/assets/icons/list-view.svg
new file mode 100644
index 00000000..2aff8b9f
--- /dev/null
+++ b/src/js/assets/icons/list-view.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16">
+  <path style="stroke-width:0.01602012" d="M 1.3612776,0.415548 C 0.84010773,0.400604 0.4,0.851437 0.4,1.347809 v 13.302908 c 0,0.496372 0.42740373,0.947173 0.9612776,0.933808 V 15.6 H 14.587434 C 15.146663,15.6 15.6,15.174974 15.6,14.650676 V 1.349325 C 15.6,0.825026 15.146663,0.4 14.587438,0.4 H 1.3612776 Z M 14.8,12.000085 v 2.799768 H 3.9999981 V 12.000085 Z M 14.8,8.4 v 2.799915 H 3.9999981 V 8.4 Z m -1.1e-5,-7.2 V 4 H 4.0000019 V 1.2 Z M 14.8,4.8 V 7.6 H 3.9999981 V 4.8 Z" />
+</svg>
diff --git a/src/js/assets/icons/table-view.svg b/src/js/assets/icons/table-view.svg
new file mode 100644
index 00000000..3960d8a8
--- /dev/null
+++ b/src/js/assets/icons/table-view.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" version="1.1" width="16" viewbox="0 0 16 16">
+	<path style="stroke-width:0.01602012" d="M 15.584452,1.3612776 C 15.599396,0.84010773 15.148563,0.4 14.652191,0.4 H 1.3492833 C 0.85291094,0.4 0.40211039,0.82740373 0.4154746,1.3612776 H 0.4 V 14.587434 C 0.4,15.146663 0.82502596,15.6 1.3493243,15.6 H 14.650675 C 15.174974,15.6 15.6,15.146663 15.6,14.587438 V 1.3612776 Z M 5.2001695,14.799989 H 1.2000091 v -2.8 h 3.9998214 z m -3.39e-4,-3.59986 -3.9998214,-2.61e-4 -1.377e-4,-2.7998756 h 3.9999591 z m 0,-3.6001328 H 1.2001469 v -2.8 H 5.1998305 Z M 10,14.799989 H 6 v -2.8 h 4 z m 0,-3.59986 H 6 V 8.3999924 h 4 z M 10,7.5999962 H 6 v -2.8 h 4 z m 4.8,7.1999928 h -4 v -2.8 h 4 z m 0,-3.59986 h -4 V 8.3999924 h 4 z m 0,-3.6001328 h -4 v -2.8 h 4 z" />
+</svg>
diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss
index 4ecaa2bb..d12fb47e 100644
--- a/src/js/assets/scss/icons.scss
+++ b/src/js/assets/scss/icons.scss
@@ -4,7 +4,10 @@
 	--icon-polls: url('../icons/polls.svg');
 	--icon-polls--fff: url('../icons/polls-fff.svg');
 	--icon-circles: url('../icons/circles.svg');
+	--icon-clock: url('../icons/clock.svg');
+	--icon-clock--fff: url('../icons/clock-fff.svg');
 	--icon-circles--fff: url('../icons/circles-fff.svg');
+	--icon-polls-anonymous: url('../icons/anonymous.svg');
 	--icon-polls-back: url('../icons/back.svg');
 	--icon-polls-back--fff: url('../icons/back-fff.svg');
 	--icon-polls-confirmed: url('../icons/confirmed.svg');
@@ -24,6 +27,8 @@
 	--icon-polls-mail: url('../icons/mail.svg');
 	--icon-polls-mail--fff: url('../icons/mail-fff.svg');
 	--icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg');
+	--icon-polls-table-view: url('../icons/table-view.svg');
+	--icon-polls-list-view: url('../icons/list-view.svg');
 	--icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg');
 	--icon-polls-loading: url('../icons/loading-small.gif');
 	--icon-polls-open: url('../icons/open.svg');
@@ -118,6 +123,14 @@
 	background-image: var(--icon-polls-handle);
 }
 
+.icon-table-view {
+	background-image: var(--icon-polls-table-view);
+}
+
+.icon-list-view {
+	background-image: var(--icon-polls-list-view);
+}
+
 .theme--dark {
 	.icon-polls {
 		background-image: var(--icon-polls--fff);
diff --git a/src/js/components/Base/Counter.vue b/src/js/components/Base/Counter.vue
index 2ff72cf1..f43c8786 100644
--- a/src/js/components/Base/Counter.vue
+++ b/src/js/components/Base/Counter.vue
@@ -151,7 +151,7 @@ export default {
 
 }
 
-.mobile .counter {
+.list-view .counter {
 	flex: 0;
 }
 
diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue
index 8f16f7dc..a8ed9b4e 100644
--- a/src/js/components/Calendar/CalendarPeek.vue
+++ b/src/js/components/Calendar/CalendarPeek.vue
@@ -143,7 +143,7 @@ export default {
 	margin: 4px auto;
 }
 
-.mobile .calendar-peek__caption {
+.list-view .calendar-peek__caption {
 	display: none;
 }
 
diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue
index 62692768..4485f5ff 100644
--- a/src/js/components/Settings/FeatureSettings.vue
+++ b/src/js/components/Settings/FeatureSettings.vue
@@ -98,25 +98,25 @@ export default {
 
 		defaultViewTextPoll: {
 			get() {
-				return (this.settings.defaultViewTextPoll === 'mobile')
+				return (this.settings.defaultViewTextPoll === 'list-view')
 			},
 			set(value) {
 				if (value) {
-					this.writeValue({ defaultViewTextPoll: 'mobile' })
+					this.writeValue({ defaultViewTextPoll: 'list-view' })
 				} else {
-					this.writeValue({ defaultViewTextPoll: 'desktop' })
+					this.writeValue({ defaultViewTextPoll: 'table-view' })
 				}
 			},
 		},
 		defaultViewDatePoll: {
 			get() {
-				return (this.settings.defaultViewDatePoll === 'mobile')
+				return (this.settings.defaultViewDatePoll === 'list-view')
 			},
 			set(value) {
 				if (value) {
-					this.writeValue({ defaultViewDatePoll: 'mobile' })
+					this.writeValue({ defaultViewDatePoll: 'list-view' })
 				} else {
-					this.writeValue({ defaultViewDatePoll: 'desktop' })
+					this.writeValue({ defaultViewDatePoll: 'table-view' })
 				}
 			},
 		},
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 0aeb53cc..9965fb53 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -47,8 +47,8 @@
 
 				<Counter v-else :show-maybe="!!poll.allowMaybe"
 					:option="option"
-					:counter-style="viewMode === 'desktop' ? 'iconStyle' : 'barStyle'"
-					:show-no="viewMode === 'mobile'" />
+					:counter-style="viewMode === 'table-view' ? 'iconStyle' : 'barStyle'"
+					:show-no="viewMode === 'list-view'" />
 				<CalendarPeek v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" :option="option" />
 				<div v-for="(participant) in participants" :key="participant.userId" class="vote-item-wrapper"
 					:class="{currentuser: participant.userId === acl.userId}">
@@ -110,7 +110,7 @@ export default {
 	props: {
 		viewMode: {
 			type: String,
-			default: 'desktop',
+			default: 'table-view',
 		},
 		ranked: {
 			type: Boolean,
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.vote-table.mobile {
+.vote-table.list-view {
 	flex-direction: column;
 
 	.counter {
diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue
index dd8a123a..e0f810b7 100644
--- a/src/js/components/VoteTable/VoteTableHeaderItem.vue
+++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue
@@ -45,7 +45,7 @@ export default {
 		},
 		viewMode: {
 			type: String,
-			default: 'desktop',
+			default: 'table-view',
 		},
 	},
 
@@ -61,21 +61,21 @@ export default {
 		}),
 
 		optionStyle() {
-			if (this.viewMode === 'desktop') {
+			if (this.viewMode === 'table-view') {
 				return 'dateBox'
 			} else {
 				return 'textBox'
 			}
 		},
 		counterStyle() {
-			if (this.viewMode === 'desktop') {
+			if (this.viewMode === 'table-view') {
 				return 'iconStyle'
 			} else {
 				return 'barStyle'
 			}
 		},
 		showNo() {
-			return (this.viewMode === 'mobile')
+			return (this.viewMode === 'list-view')
 		},
 		isWinner() {
 			// highlight best option until poll is closed and
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index 64d069a5..53d3441d 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -33,13 +33,13 @@ const defaultSettings = () => {
 			imageUrl: '',
 			glassyNavigation: false,
 			glassySidebar: false,
-			defaultViewTextPoll: 'mobile',
-			defaultViewDatePoll: 'desktop',
+			defaultViewTextPoll: 'list-view',
+			defaultViewDatePoll: 'table-view',
 		},
 		availableCalendars: [],
 		viewModes: [
-			'mobile',
-			'desktop',
+			'list-view',
+			'table-view',
 		],
 	}
 }
@@ -53,6 +53,20 @@ const mutations = {
 	},
 
 	setPreference(state, payload) {
+
+		if (payload.defaultViewTextPoll === 'desktop') {
+			payload.defaultViewTextPoll = 'table-view'
+		}
+		if (payload.defaultViewTextPoll === 'mobile') {
+			payload.defaultViewTextPoll = 'list-view'
+		}
+		if (payload.defaultViewDatePoll === 'desktop') {
+			payload.defaultViewDatePoll = 'table-view'
+		}
+		if (payload.defaultViewDatePoll === 'mobile') {
+			payload.defaultViewDatePoll = 'list-view'
+		}
+
 		Object.keys(payload).filter(key => key in state.user).forEach(key => {
 			state.user[key] = payload[key]
 		})
@@ -70,6 +84,18 @@ const actions = {
 		const endPoint = 'apps/polls/preferences/get'
 		try {
 			const response = await axios.get(generateUrl(endPoint))
+			if (response.data.preferences.defaultViewTextPoll === 'desktop') {
+				response.data.preferences.defaultViewTextPoll = 'table-view'
+			}
+			if (response.data.preferences.defaultViewTextPoll === 'mobile') {
+				response.data.preferences.defaultViewTextPoll = 'list-view'
+			}
+			if (response.data.preferences.defaultViewDatePoll === 'desktop') {
+				response.data.preferences.defaultViewDatePoll = 'table-view'
+			}
+			if (response.data.preferences.defaultViewDatePoll === 'mobile') {
+				response.data.preferences.defaultViewDatePoll = 'list-view'
+			}
 			context.commit('setPreference', response.data.preferences)
 		} catch {
 			context.commit('reset')
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index c71e0d2f..1c1dd971 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -165,7 +165,7 @@ export default {
 				if (window.innerWidth > 480) {
 					return this.settings.user.defaultViewTextPoll
 				} else {
-					return 'mobile'
+					return 'list-view'
 				}
 			}
 		},
@@ -177,7 +177,7 @@ export default {
 				if (window.innerWidth > 480) {
 					return this.settings.user.defaultViewDatePoll
 				} else {
-					return 'mobile'
+					return 'list-view'
 				}
 			}
 		},
@@ -188,7 +188,7 @@ export default {
 			} else if (this.poll.type === 'datePoll') {
 				return this.viewDatePoll
 			} else {
-				return 'desktop'
+				return 'table-view'
 			}
 		},
 
@@ -227,10 +227,10 @@ export default {
 		},
 
 		viewCaption() {
-			if (this.viewMode === 'desktop') {
-				return t('polls', 'Switch to mobile view')
+			if (this.viewMode === 'table-view') {
+				return t('polls', 'Switch to list view')
 			} else {
-				return t('polls', 'Switch to desktop view')
+				return t('polls', 'Switch to table view')
 			}
 		},
 		orderCaption() {
@@ -266,10 +266,10 @@ export default {
 		},
 
 		toggleViewIcon() {
-			if (this.viewMode === 'desktop') {
-				return 'icon-phone'
+			if (this.viewMode === 'table-view') {
+				return 'icon-list-view'
 			} else {
-				return 'icon-desktop'
+				return 'icon-table-view'
 			}
 		},