refactor ActionDelete

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

4 files changed, 62 insertions, 36 deletions

diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue
index 52563d53..e645d138 100644
--- a/src/js/components/Actions/ActionDelete.vue
+++ b/src/js/components/Actions/ActionDelete.vue
@@ -22,32 +22,30 @@
 
 <template>
 	<div class="">
-		<DeleteIcon v-if="iconMode && !deleteTimeout" :size="iconSize" @click="deleteItem()" />
-		<UndoIcon v-if="iconMode && deleteTimeout" :size="iconSize" @click="cancelDelete()" />
-
-		<Actions v-if="!iconMode">
-			<ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()">
-				{{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }}
-			</ActionButton>
-			<ActionButton v-else icon="icon-delete" @click="deleteItem()">
-				{{ title }}
-			</ActionButton>
-		</Actions>
+		<VueButton type="tertiary">
+			<UndoIcon v-if="deleteTimeout"
+				v-tooltip="countdownTitle"
+				:size="iconSize"
+				@click="cancelDelete()" />
+			<DeleteIcon v-else
+				v-tooltip="title"
+				:size="iconSize"
+				@click="deleteItem()" />
+		</VueButton>
 	</div>
 </template>
 
 <script>
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { Button as VueButton } from '@nextcloud/vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue'
 
 export default {
 	name: 'ActionDelete',
 	components: {
-		Actions,
-		ActionButton,
 		DeleteIcon,
 		UndoIcon,
+		VueButton,
 	},
 
 	props: {
@@ -60,10 +58,6 @@ export default {
 			type: String,
 			default: t('polls', 'Delete'),
 		},
-		iconMode: {
-			type: Boolean,
-			default: false,
-		},
 		iconSize: {
 			type: Number,
 			default: 20,
@@ -78,6 +72,12 @@ export default {
 		}
 	},
 
+	computed: {
+		countdownTitle() {
+			return n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', this.countdown, { countdown: this.countdown })
+		},
+	},
+
 	methods: {
 		deleteItem() {
 			this.countDown = this.timeout
@@ -117,5 +117,9 @@ export default {
 	&.delete-icon:hover {
 		color: var(--color-error-hover);
 	}
+	&.arrow-u-left-top-icon {
+		/* force the undo icon always to be visible */
+		visibility: visible !important;
+	}
 }
 </style>
diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 732fd8ce..d5e4b099 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -33,7 +33,6 @@
 					{{ subComment.comment }}
 				</span>
 				<ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner"
-					icon-mode
 					:title="t('polls', 'Delete comment')"
 					@delete="deleteComment(subComment)" />
 			</div>
@@ -107,15 +106,18 @@ export default {
 		flex: 1 1;
 		padding-top: 2px;
 
-		.material-design-icon.delete-icon {
+		.material-design-icon {
 			// display: none;
 			visibility: hidden;
 		}
 
 		.comment-item__subcomment {
 			display: flex;
+			align-items: center;
+
 			&:hover {
-				.material-design-icon.delete-icon {
+				background: var(--color-background-hover);
+				.material-design-icon {
 					visibility: visible;
 					// display: flex;
 				}
diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue
index 439d34eb..de51ec15 100644
--- a/src/js/components/Options/OptionItem.vue
+++ b/src/js/components/Options/OptionItem.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<Component :is="tag" class="option-item" :class="{ draggable: isDraggable, 'date-box': show === 'dateBox' }">
-		<div v-if="isDraggable" class="option-item__handle icon icon-handle" />
+		<DragIcon v-if="isDraggable" :class="{ draggable: isDraggable }" />
 
 		<slot name="icon" />
 
@@ -77,10 +77,15 @@
 <script>
 import moment from '@nextcloud/moment'
 import linkifyStr from 'linkify-string'
+import DragIcon from 'vue-material-design-icons/DragHorizontalVariant.vue'
 
 export default {
 	name: 'OptionItem',
 
+	components: {
+		DragIcon,
+	},
+
 	props: {
 		draggable: {
 			type: Boolean,
@@ -103,6 +108,7 @@ export default {
 			default: 'textPoll',
 		},
 	},
+
 	computed: {
 		isDraggable() {
 			return this.draggable
@@ -210,7 +216,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 	.option-item {
 		display: flex;
 		align-items: center;
@@ -220,6 +225,16 @@ export default {
 			align-items: stretch;
 			flex-direction: column;
 		}
+
+		.material-design-icon {
+			visibility: hidden;
+		}
+
+		&:hover {
+			.material-design-icon {
+				visibility: visible;
+			}
+		}
 	}
 
 	.devider {
@@ -306,13 +321,6 @@ export default {
 			cursor: -moz-grabbing;
 			cursor: -webkit-grabbing;
 		}
-		.option-item__handle {
-			visibility: hidden;
-		}
-		&:hover > .option-item__handle {
-			visibility: visible;
-		}
-
 	}
 
 	.option-item__rank {
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 34ca77dc..4982a5b5 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -105,12 +105,6 @@ export default {
 	display: flex;
 	flex: 1;
 
-	.participant {
-		display: flex;
-		align-self: stretch;
-		justify-content: center;
-	}
-
 	.participant, .vote-item {
 		flex: 0 0 auto;
 		height: 4.5em;
@@ -123,6 +117,24 @@ export default {
 		}
 	}
 
+	.participant {
+		display: flex;
+		align-self: stretch;
+		justify-content: center;
+
+		.material-design-icon {
+			// display: none;
+			visibility: hidden;
+		}
+
+		&:hover {
+			background: var(--color-background-hover);
+			.material-design-icon {
+				visibility: visible;
+			}
+		}
+	}
+
 	.vote-table__users {
 		display: flex;
 		flex-direction: column;