add feedback effects on voting and fix reactivity

CHANGELOG.md

@@ -21,6 +21,12 @@ All notable changes to this project will be documented in this file.
 - Dont't add tags to description in plain text invitation mail
 - poll list in admin page should not link to a poll
 
+## [dev] - tbd
+## Changes
+- #2377 - Changed transitions on vote vlicks and add hover state 
+
+## Fixed
+
 ## [3.6.0-beta2] - 2022-04-13
 ## New
 - #2373 - Add icon symbol for locked vote options 

lib/Controller/PollController.php

@@ -117,7 +117,7 @@ public function update(int $pollId, array $poll): DataResponse {
 
 			return [
 				'poll' => $this->pollService->update($pollId, $poll),
-				'acl' => $this->acl,
+				'acl' => $this->acl->setPollId($pollId),
 			];
 		});
 	}

src/js/components/VoteTable/VoteColumn.vue

@@ -22,7 +22,7 @@
 
 <template lang="html">
 	<div :class="componentClass">
-		<VoteTableHeaderItem :option="option" :view-mode="viewMode" />
+		<OptionItem :option="option" :poll-type="poll.type" :display="poll.type === 'datePoll' ? 'dateBox' : 'textBox'" />
 
 		<Counter v-if="acl.allowSeeResults"
 			:show-maybe="!!poll.allowMaybe"
@@ -42,6 +42,8 @@
 			:avatar-size="24"
 			class="owner" />
 
+		<Spacer v-if="poll.type === 'datePoll' && viewMode === 'list-view'" />
+
 		<div v-if="acl.allowEdit && closed" class="action confirm">
 			<VueButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
 				type="tertiary"
@@ -59,8 +61,9 @@
 import { mapState, mapGetters } from 'vuex'
 import { Button as VueButton } from '@nextcloud/vue'
 import Counter from '../Options/Counter'
+import OptionItem from '../Options/OptionItem'
+import Spacer from '../Base/Spacer'
 import VoteItem from './VoteItem'
-import VoteTableHeaderItem from './VoteTableHeaderItem'
 import { confirmOption } from '../../mixins/optionMixins'
 import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
 import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
@@ -71,7 +74,8 @@ export default {
 		ConfirmIcon,
 		UnconfirmIcon,
 		Counter,
-		VoteTableHeaderItem,
+		OptionItem,
+		Spacer,
 		VoteItem,
 		VueButton,
 		CalendarPeek: () => import('../Calendar/CalendarPeek'),
@@ -81,14 +85,17 @@ export default {
 	mixins: [confirmOption],
 
 	props: {
-		viewMode: {
-			type: String,
-			default: 'table-view',
-		},
 		option: {
 			type: Object,
 			default: undefined,
 		},
+		viewMode: {
+			type: String,
+			default: 'table-view',
+			validator(value) {
+				return ['table-view', 'list-view'].includes(value)
+			},
+		},
 	},
 
 	computed: {
@@ -120,7 +127,7 @@ export default {
 
 			classList.push(this.ownAnswer)
 
-			return classList.join(' ').trim()
+			return classList
 		},
 
 		isConfirmed() {

src/js/components/VoteTable/VoteItem.vue

@@ -125,7 +125,7 @@ export default {
 .vote-item {
 	display: flex;
 	background-color: var(--color-polls-background-no);
-	transition: background-color 1s ease-out;
+	transition: all 0.4s ease-in-out;
 	> .icon {
 		color: var(--color-polls-foreground-no);
 		background-position: center;
@@ -134,6 +134,7 @@ export default {
 		width: 30px;
 		height: 30px;
 		flex: 0 0 auto;
+		transition: all 0.4s ease-in-out;
 	}
 
 	&.yes {
@@ -169,6 +170,12 @@ export default {
 		}
 	}
 
+	&.active > .icon:hover {
+		background-size: 100%;
+		width: 35px;
+		height: 35px;
+	}
+
 }
 
 .vote-item.confirmed {

src/js/components/VoteTable/VoteTable.vue

@@ -163,7 +163,7 @@ export default {
 			justify-content: center;
 			align-items: center;
 		}
-		.vote-table-header-item {
+		.option-item {
 			align-items: stretch;
 			flex: 1;
 			order: 1;
@@ -213,7 +213,7 @@ export default {
 
 	.spacer {
 		flex: 1;
-		order: 1;
+		order: 0;
 	}
 
 	&.table-view {
@@ -282,6 +282,8 @@ export default {
 
 		.owner {
 			order: 0;
+			flex: 1;
+			justify-content: flex-end;
 		}
 
 		.counter {
@@ -303,10 +305,12 @@ export default {
 			flex-direction: column;
 		}
 
-		.vote-table-header-item {
+		.option-item {
 			flex-direction: row;
-			.option-item {
-				padding: 8px 4px;
+			padding: 8px 4px;
+			&.date-box {
+				flex: 0;
+				align-items: baseline;
 			}
 		}
 
@@ -340,10 +344,6 @@ export default {
 			display: none;
 		}
 
-		.option-item.date-box {
-			align-items: baseline;
-		}
-
 		.option-item__option--datebox {
 			min-width: 120px;
 		}