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

feat: increase task drop area size for bucket list (#1512)

Browse source 
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1512
Reviewed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2022-02-13 13:12:58 +00:00
commit cb395f3f69
3 changed files with 147 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/list/list-view-kanban.spec.js
View file

@ -132,7 +132,7 @@ describe('List View Kanban', () => {
cy.getSettled('.kanban .bucket .tasks .task')
.contains(tasks[0].title)
.first()
.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
.drag('.kanban .bucket:nth-child(2) .tasks')
cy.get('.kanban .bucket:nth-child(2) .tasks')
.should('contain', tasks[0].title)

1
src/components/tasks/partials/kanban-card.vue
View file

@ -138,7 +138,6 @@ $task-background: var(--white);
border: 3px solid transparent;
font-size: .9rem;
margin: .5rem;
padding: .4rem;
border-radius: $radius;
background: $task-background;

162
src/views/list/ListKanban.vue
View file

@ -123,11 +123,7 @@
</a>
</dropdown>
</div>
<div
:ref="(el) => setTaskContainerRef(bucket.id, el)"
@scroll="($event) => handleTaskContainerScroll(bucket.id, bucket.listId, $event.target)"
class="tasks"
>
<draggable
v-bind="dragOptions"
:modelValue="bucket.tasks"
@ -139,19 +135,15 @@
:data-bucket-index="bucketIndex"
tag="transition-group"
:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
:component-data="taskDraggableTaskComponentData"
:component-data="getTaskDraggableTaskComponentData(bucket)"
>
<template #item="{element: task}">
<kanban-card :task="task"/>
</template>
</draggable>
</div>
<template #footer>
<div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control" :class="{'is-loading': loading}">
<input
class="input"
:disabled="loading || null"
:disabled="loading || undefined"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@ -167,17 +159,23 @@
</div>
<x-button
@click="toggleShowNewTaskInput(bucket.id)"
class="is-transparent is-fullwidth has-text-centered"
class="is-fullwidth has-text-centered"
:shadow="false"
v-if="!showNewTaskInput[bucket.id]"
v-else
icon="plus"
variant="secondary"
>
{{
bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
}}
{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
</x-button>
</div>
</template>
<template #item="{element: task}">
<div class="task-item">
<kanban-card class="kanban-card" :task="task"/>
</div>
</template>
</draggable>
</div>
</template>
</draggable>
@ -197,10 +195,10 @@
v-model="newBucketTitle"
/>
<x-button
v-else
@click="() => showNewBucketInput = true"
:shadow="false"
class="is-transparent is-fullwidth has-text-centered"
v-else
variant="secondary"
icon="plus"
>
@ -313,6 +311,20 @@ export default {
},
},
computed: {
getTaskDraggableTaskComponentData() {
return (bucket) => ({
ref: (el) => this.setTaskContainerRef(bucket.id, el),
onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
type: 'transition',
tag: 'div',
name: !this.drag ? 'move-card' : null,
class: [
'tasks',
{'dragging-disabled': !this.canWrite},
],
})
},
isSavedFilter() {
return this.list.isSavedFilter && !this.list.isSavedFilter()
},
@ -333,17 +345,6 @@ export default {
],
}
},
taskDraggableTaskComponentData() {
return {
type: 'transition',
tag: 'div',
name: !this.drag ? 'move-card' : null,
class: [
'dropper',
{'dragging-disabled': !this.canWrite},
],
}
},
buckets() {
return this.$store.state.kanban.buckets
},
@ -406,10 +407,25 @@ export default {
// of the drop target works all the time.
const bucketIndex = parseInt(e.to.dataset.bucketIndex)
const newBucket = this.buckets[bucketIndex]
const task = newBucket.tasks[e.newIndex]
const taskBefore = newBucket.tasks[e.newIndex - 1] ?? null
const taskAfter = newBucket.tasks[e.newIndex + 1] ?? null
// HACK:
// this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot
// the problem: https://github.com/SortableJS/vue.draggable.next/issues/108
// This hack doesn't remove the problem that the ghost item is still displayed below the footer
// It just makes releasing the item possible.
// The newIndex of the event doesn't count in the elements of the footer slot.
// This is why in case the length of the tasks is identical with the newIndex
// we have to remove 1 to get the correct index.
const newTaskIndex = newBucket.tasks.length === e.newIndex
? e.newIndex - 1
: e.newIndex
const task = newBucket.tasks[newTaskIndex]
const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
newTask.bucketId = newBucket.id,
@ -525,7 +541,10 @@ export default {
const updatedData = {
id: bucket.id,
position: calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null),
position: calculateItemPosition(
bucketBefore !== null ? bucketBefore.position : null,
bucketAfter !== null ? bucketAfter.position : null,
),
}
this.$store.dispatch('kanban/updateBucket', updatedData)
@ -546,9 +565,14 @@ export default {
},
shouldAcceptDrop(bucket) {
return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
return (
// When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.id === this.sourceBucket ||
// If there is no limit set, dragging & dropping should always work
bucket.limit === 0 ||
// Disallow dropping to buckets which have their limit reached
bucket.tasks.length < bucket.limit
)
},
dragstart(bucket) {
@ -597,7 +621,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.kanban {
overflow-x: auto;
overflow-y: hidden;
height: calc(#{$crazy-height-calculation});
@ -610,21 +633,28 @@ $filter-container-height: '1rem - #{$switch-view-height}';
&-bucket-container {
display: flex;
align-items: flex-start;
}
.ghost {
background: transparent !important;
border: 3px dashed var(--grey-300) !important;
box-shadow: none !important;
position: relative;
* {
opacity: 0;
}
&::after {
content: '';
position: absolute;
display: block;
top: 0.25rem;
right: 0.5rem;
bottom: 0.25rem;
left: 0.5rem;
border: 3px dashed var(--grey-300);
border-radius: $radius;
}
}
.bucket {
background-color: var(--grey-100);
border-radius: $radius;
position: relative;
@ -632,24 +662,24 @@ $filter-container-height: '1rem - #{$switch-view-height}';
max-height: 100%;
min-height: 20px;
width: $bucket-width;
display: flex;
flex-direction: column;
.tasks {
max-height: calc(#{$crazy-height-calculation-tasks});
overflow: auto;
@media screen and (max-width: $tablet) {
max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
overflow: hidden auto;
height: 100%;
}
.dropper {
&, > div {
min-height: 40px;
}
}
}
.task-item {
background-color: var(--grey-100);
padding: .25rem .5rem;
.move-card-move {
transition: transform $transition-duration;
&:first-of-type {
padding-top: .5rem;
}
&:last-of-type {
padding-bottom: .5rem;
}
}
.no-move {
@ -682,10 +712,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
&.is-collapsed {
transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
align-self: flex-start;
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
// Using negative margins instead of translateY here to make all other buckets fill the empty space
margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
margin-right: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
cursor: pointer;
.tasks, .bucket-footer {
@ -695,6 +726,8 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.bucket-header {
background-color: var(--grey-100);
height: min-content;
display: flex;
align-items: center;
justify-content: space-between;
@ -724,7 +757,13 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.bucket-footer {
position: sticky;
bottom: 0;
height: min-content;
padding: .5rem;
background-color: var(--grey-100);
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
.button {
background-color: transparent;
@ -737,8 +776,13 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.task-dragging {
transform: rotateZ(3deg);
transition: transform 0.18s ease;
transform: rotateZ(3deg)
}
.move-card-move {
transform: rotateZ(3deg);
transition: transform $transition-duration;
}
.move-card-leave-from,