1
0

Make sure all popups & dropdowns are animated

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

View File

@ -2,7 +2,7 @@
<div class="attachments">
<h3>
<span class="icon is-grey">
<icon icon="paperclip" />
<icon icon="paperclip"/>
</span>
Attachments
</h3>
@ -38,8 +38,8 @@
<span>
created
<span v-tooltip="formatDate(a.created)">{{
formatDateSince(a.created)
}}</span>
formatDateSince(a.created)
}}</span>
by
<user
:avatar-size="24"
@ -93,25 +93,27 @@
>
<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 -->
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteAttachment()"
>
<span slot="header">Delete attachment</span>
<p slot="text">
Are you sure you want to delete the attachment
{{ attachmentToDelete.file.name }}?<br />
<b>This CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="showDeleteModal = false"
v-if="showDeleteModal"
@submit="deleteAttachment()"
>
<span slot="header">Delete attachment</span>
<p slot="text">
Are you sure you want to delete the attachment
{{ 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',

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>
@ -38,8 +38,8 @@
<strong>{{ c.author.getDisplayName() }}</strong
>&nbsp;
<span v-tooltip="formatDate(c.created)">{{
formatDateSince(c.created)
}}</span>
formatDateSince(c.created)
}}</span>
<span
v-if="+new Date(c.created) !== +new Date(c.updated)"
v-tooltip="formatDate(c.updated)"
@ -140,17 +140,20 @@
</div>
</div>
</div>
<modal
@close="showDeleteModal = false"
@submit="deleteComment()"
v-if="showDeleteModal"
>
<span slot="header">Delete this comment</span>
<p slot="text">
Are you sure you want to delete this comment? <br />This
<b>CANNOT BE UNDONE!</b>
</p>
</modal>
<transition name="modal">
<modal
@close="showDeleteModal = false"
@submit="deleteComment()"
v-if="showDeleteModal"
>
<span slot="header">Delete this comment</span>
<p slot="text">
Are you sure you want to delete this comment? <br/>This
<b>CANNOT BE UNDONE!</b>
</p>
</modal>
</transition>
</div>
</template>
@ -167,7 +170,7 @@ export default {
editor: () => ({
component: import(
/* webpackChunkName: "editor" */ '../../input/editor'
),
),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
@ -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
)
})

View File

@ -88,14 +88,16 @@
</p>
<!-- Delete modal -->
<modal
@close="showDeleteModal = false"
@submit="removeTaskRelation()"
v-if="showDeleteModal">
<span slot="header">Delete Task Relation</span>
<p slot="text">Are you sure you want to delete this task relation?<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
<transition name="modal">
<modal
@close="showDeleteModal = false"
@submit="removeTaskRelation()"
v-if="showDeleteModal">
<span slot="header">Delete Task Relation</span>
<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>