local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Make sure all popups & dropdowns are animated

Browse source
This commit is contained in:
kolaente 2021-01-23 18:54:22 +01:00
parent a4fb3e19be
commit 0d64506d73
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
10 changed files with 276 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/sharing/linkSharing.vue
View file

@ -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>

20
src/components/sharing/userTeam.vue
View file

@ -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)
})

12
src/components/tasks/partials/attachments.vue
View file

@ -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',

17
src/components/tasks/partials/comments.vue
View file

@ -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
)
})

2
src/components/tasks/partials/relatedTasks.vue
View file

@ -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>

2
src/views/list/EditList.vue
View file

@ -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>

13
src/views/list/views/Kanban.vue
View file

@ -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

2
src/views/namespaces/EditNamespace.vue
View file

@ -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>

2
src/views/tasks/TaskDetailView.vue
View file

@ -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>

4
src/views/teams/EditTeam.vue
View file

@ -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>