Make sure all popups & dropdowns are animated

src/components/sharing/linkSharing.vue

@@ -97,6 +97,7 @@
 			</table>
 		</div>
 
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="remove()"
@@ -110,6 +111,7 @@
 					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 	</card>
 </template>
 

src/components/sharing/userTeam.vue

@@ -16,7 +16,7 @@
 					/>
 				</p>
 				<p class="control">
-					<x-button @click="add()"> Share </x-button>
+					<x-button @click="add()"> Share</x-button>
 				</p>
 			</div>
 		</div>
@@ -46,19 +46,19 @@
 				<td class="type">
 					<template v-if="s.right === rights.ADMIN">
 							<span class="icon is-small">
-								<icon icon="lock" />
+								<icon icon="lock"/>
 							</span>
 						Admin
 					</template>
 					<template v-else-if="s.right === rights.READ_WRITE">
 							<span class="icon is-small">
-								<icon icon="pen" />
+								<icon icon="pen"/>
 							</span>
 						Write
 					</template>
 					<template v-else>
 							<span class="icon is-small">
-								<icon icon="users" />
+								<icon icon="users"/>
 							</span>
 						Read-only
 					</template>
@@ -105,6 +105,7 @@
 			</tbody>
 		</table>
 
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="deleteSharable()"
@@ -115,15 +116,16 @@
 			>
 				<p slot="text">
 					Are you sure you want to remove this {{ shareType }} from the
-				{{ typeString }}?<br />
+					{{ typeString }}?<br/>
 					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 	</card>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
@@ -194,7 +196,7 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new UserListService()
-				this.stuffModel = new UserListModel({ listId: this.id })
+				this.stuffModel = new UserListModel({listId: this.id})
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new UserNamespaceService()
@@ -212,7 +214,7 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new TeamListService()
-				this.stuffModel = new TeamListModel({ listId: this.id })
+				this.stuffModel = new TeamListModel({listId: this.id})
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new TeamNamespaceService()
@@ -362,7 +364,7 @@ export default {
 			}
 
 			this.searchService
-				.getAll({}, { s: query })
+				.getAll({}, {s: query})
 				.then((response) => {
 					this.$set(this, 'found', response)
 				})

src/components/tasks/partials/attachments.vue

@@ -2,7 +2,7 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="paperclip" />
+				<icon icon="paperclip"/>
 			</span>
 			Attachments
 		</h3>
@@ -93,13 +93,14 @@
 		>
 			<div class="drop-hint">
 				<div class="icon">
-					<icon icon="cloud-upload-alt" />
+					<icon icon="cloud-upload-alt"/>
 				</div>
 				<div class="hint">Drop files here to upload</div>
 			</div>
 		</div>
 
 		<!-- Delete modal -->
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				v-if="showDeleteModal"
@@ -108,10 +109,11 @@
 				<span slot="header">Delete attachment</span>
 				<p slot="text">
 					Are you sure you want to delete the attachment
-				{{ attachmentToDelete.file.name }}?<br />
+					{{ attachmentToDelete.file.name }}?<br/>
 					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 
 		<transition name="modal">
 			<modal
@@ -123,7 +125,7 @@
 				"
 				v-if="showImageModal"
 			>
-				<img :src="attachmentImageBlobUrl" alt="" />
+				<img :src="attachmentImageBlobUrl" alt=""/>
 			</modal>
 		</transition>
 	</div>
@@ -134,7 +136,7 @@ import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
 import attachmentUpload from '@/components/tasks/mixins/attachmentUpload'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'attachments',

src/components/tasks/partials/comments.vue

@@ -2,7 +2,7 @@
 	<div class="content details">
 		<h3 v-if="canWrite || comments.length > 0">
 			<span class="icon is-grey">
-				<icon :icon="['far', 'comments']" />
+				<icon :icon="['far', 'comments']"/>
 			</span>
 			Comments
 		</h3>
@@ -140,6 +140,8 @@
 				</div>
 			</div>
 		</div>
+
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="deleteComment()"
@@ -147,10 +149,11 @@
 			>
 				<span slot="header">Delete this comment</span>
 				<p slot="text">
-				Are you sure you want to delete this comment? <br />This
+					Are you sure you want to delete this comment? <br/>This
 					<b>CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 	</div>
 </template>
 
@@ -205,9 +208,9 @@ export default {
 	},
 	created() {
 		this.taskCommentService = new TaskCommentService()
-		this.newComment = new TaskCommentModel({ taskId: this.taskId })
-		this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
-		this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
+		this.newComment = new TaskCommentModel({taskId: this.taskId})
+		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
+		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
 		this.comments = []
 	},
 	mounted() {
@@ -229,7 +232,7 @@ export default {
 	methods: {
 		loadComments() {
 			this.taskCommentService
-				.getAll({ taskId: this.taskId })
+				.getAll({taskId: this.taskId})
 				.then((r) => {
 					this.$set(this, 'comments', r)
 					this.makeActions()
@@ -258,7 +261,7 @@ export default {
 					this.comments.push(r)
 					this.newComment.comment = ''
 					this.success(
-						{ message: 'The comment was added successfully.' },
+						{message: 'The comment was added successfully.'},
 						this
 					)
 				})

src/components/tasks/partials/relatedTasks.vue

@@ -88,6 +88,7 @@
 		</p>
 
 		<!-- Delete modal -->
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="removeTaskRelation()"
@@ -96,6 +97,7 @@
 				<p slot="text">Are you sure you want to delete this task relation?<br/>
 					<b>This CANNOT BE UNDONE!</b></p>
 			</modal>
+		</transition>
 	</div>
 </template>
 

src/views/list/EditList.vue

@@ -128,6 +128,7 @@
 
 		<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
 
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="deleteList()"
@@ -136,6 +137,7 @@
 				<p slot="text">Are you sure you want to delete this list and all of its contents?
 					<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
 			</modal>
+		</transition>
 	</div>
 </template>
 

src/views/list/views/Kanban.vue

@@ -33,8 +33,7 @@
 						{{ bucket.tasks.length }}/{{ bucket.limit }}
 					</span>
 					<div
-						:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
-						class="dropdown is-right options"
+						class="dropdown is-right is-active options"
 						v-if="canWrite"
 					>
 						<div @click.stop="toggleBucketDropdown(bucket.id)" class="dropdown-trigger">
@@ -42,7 +41,8 @@
 							<icon icon="ellipsis-v"/>
 						</span>
 						</div>
-						<div class="dropdown-menu" role="menu">
+						<transition name="fade">
+							<div class="dropdown-menu" role="menu" v-if="bucketOptionsDropDownActive[bucket.id]">
 								<div class="dropdown-content">
 									<a
 										@click.stop="showSetLimitInput = true"
@@ -81,6 +81,7 @@
 									</a>
 								</div>
 							</div>
+						</transition>
 					</div>
 				</div>
 				<div :ref="`tasks-container${bucket.id}`" class="tasks">
@@ -241,6 +242,7 @@
 			<router-view/>
 		</transition>
 
+		<transition name="modal">
 			<modal
 				@close="showBucketDeleteModal = false"
 				@submit="deleteBucket()"
@@ -251,7 +253,7 @@
 					This will not delete any tasks but move them into the default bucket.
 				</p>
 			</modal>
-
+		</transition>
 	</div>
 </template>
 
@@ -448,8 +450,9 @@ export default {
 			this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
 		},
 		toggleBucketDropdown(bucketId) {
+			const oldState = this.bucketOptionsDropDownActive[bucketId]
 			this.closeBucketDropdowns() // Close all eventually open dropdowns
-			this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
+			this.$set(this.bucketOptionsDropDownActive, bucketId, !oldState)
 		},
 		closeBucketDropdowns() {
 			this.showSetLimitInput = false

src/views/namespaces/EditNamespace.vue

@@ -86,6 +86,7 @@
 			shareType="team"
 			type="namespace"/>
 
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				v-if="showDeleteModal"
@@ -94,6 +95,7 @@
 				<p slot="text">Are you sure you want to delete this namespace and all of its contents?
 					<br/>This includes lists & tasks and <b>CANNOT BE UNDONE!</b></p>
 			</modal>
+		</transition>
 	</div>
 </template>
 

src/views/tasks/TaskDetailView.vue

@@ -382,6 +382,7 @@
 			</div>
 		</div>
 
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="deleteTask()"
@@ -393,6 +394,7 @@
 					<b>cannot be undone!</b>
 				</p>
 			</modal>
+		</transition>
 	</div>
 </template>
 

src/views/teams/EditTeam.vue

@@ -134,6 +134,7 @@
 		</card>
 
 		<!-- Team delete modal -->
+		<transition name="modal">
 			<modal
 				@close="showDeleteModal = false"
 				@submit="deleteTeam()"
@@ -148,7 +149,9 @@
 					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 		<!-- User delete modal -->
+		<transition name="modal">
 			<modal
 				@close="showUserDeleteModal = false"
 				@submit="deleteUser()"
@@ -162,6 +165,7 @@
 					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
+		</transition>
 	</div>
 </template>