ami/tl-vikunja
1
0
Fork 0
Code 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
10 changed files with 276 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/list/EditList.vue
View File

@ -128,14 +128,16 @@
<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
<modal
@close="showDeleteModal = false"
@submit="deleteList()"
v-if="showDeleteModal">
<span slot="header">Delete the list</span>
<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 name="modal">
<modal
@close="showDeleteModal = false"
@submit="deleteList()"
v-if="showDeleteModal">
<span slot="header">Delete the list</span>
<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>

105
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,45 +41,47 @@
<icon icon="ellipsis-v"/>
</span>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
<input
@change="() => updateBucket(bucket)"
@keyup.enter="() => updateBucket(bucket)"
class="input"
type="number"
v-focus.always
v-model="bucket.limit"
/>
<transition name="fade">
<div class="dropdown-menu" role="menu" v-if="bucketOptionsDropDownActive[bucket.id]">
<div class="dropdown-content">
<a
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
<input
@change="() => updateBucket(bucket)"
@keyup.enter="() => updateBucket(bucket)"
class="input"
type="number"
v-focus.always
v-model="bucket.limit"
/>
</div>
<div class="control">
<x-button
:icon="['far', 'save']"
:shadow="false"
/>
</div>
</div>
<div class="control">
<x-button
:icon="['far', 'save']"
:shadow="false"
/>
</div>
</div>
<template v-else>
Limit: {{ bucket.limit > 0 ? bucket.limit : 'Not set' }}
</template>
</a>
<a
:class="{'is-disabled': buckets.length <= 1}"
@click="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
>
<span class="icon is-small"><icon icon="trash-alt"/></span>
Delete
</a>
<template v-else>
Limit: {{ bucket.limit > 0 ? bucket.limit : 'Not set' }}
</template>
</a>
<a
:class="{'is-disabled': buckets.length <= 1}"
@click="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
>
<span class="icon is-small"><icon icon="trash-alt"/></span>
Delete
</a>
</div>
</div>
</div>
</transition>
</div>
</div>
<div :ref="`tasks-container${bucket.id}`" class="tasks">
@ -241,17 +242,18 @@
<router-view/>
</transition>
<modal
@close="showBucketDeleteModal = false"
@submit="deleteBucket()"
v-if="showBucketDeleteModal">
<span slot="header">Delete the bucket</span>
<p slot="text">
Are you sure you want to delete this bucket?<br/>
This will not delete any tasks but move them into the default bucket.
</p>
</modal>
<transition name="modal">
<modal
@close="showBucketDeleteModal = false"
@submit="deleteBucket()"
v-if="showBucketDeleteModal">
<span slot="header">Delete the bucket</span>
<p slot="text">
Are you sure you want to delete this bucket?<br/>
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

18
src/views/namespaces/EditNamespace.vue
View File

@ -86,14 +86,16 @@
shareType="team"
type="namespace"/>
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteNamespace()">
<span slot="header">Delete the namespace</span>
<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 name="modal">
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteNamespace()">
<span slot="header">Delete the namespace</span>
<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>

24
src/views/tasks/TaskDetailView.vue
View File

@ -382,17 +382,19 @@
</div>
</div>
<modal
@close="showDeleteModal = false"
@submit="deleteTask()"
v-if="showDeleteModal">
<span slot="header">Delete this task</span>
<p slot="text">
Are you sure you want to remove this task? <br/>
This will also remove all attachments, reminders and relations associated with this task and
<b>cannot be undone!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="showDeleteModal = false"
@submit="deleteTask()"
v-if="showDeleteModal">
<span slot="header">Delete this task</span>
<p slot="text">
Are you sure you want to remove this task? <br/>
This will also remove all attachments, reminders and relations associated with this task and
<b>cannot be undone!</b>
</p>
</modal>
</transition>
</div>
</template>

58
src/views/teams/EditTeam.vue
View File

@ -134,34 +134,38 @@
</card>
<!-- Team delete modal -->
<modal
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal"
>
<span slot="header">Delete the team</span>
<p slot="text">
Are you sure you want to delete this team and all of its
members?<br/>
All team members will loose access to lists and namespaces
shared with this team.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal"
>
<span slot="header">Delete the team</span>
<p slot="text">
Are you sure you want to delete this team and all of its
members?<br/>
All team members will loose access to lists and namespaces
shared with this team.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
</transition>
<!-- User delete modal -->
<modal
@close="showUserDeleteModal = false"
@submit="deleteUser()"
v-if="showUserDeleteModal"
>
<span slot="header">Remove a user from the team</span>
<p slot="text">
Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has
access to.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="showUserDeleteModal = false"
@submit="deleteUser()"
v-if="showUserDeleteModal"
>
<span slot="header">Remove a user from the team</span>
<p slot="text">
Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has
access to.<br/>
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
</transition>
</div>
</template>