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

Browse source
This commit is contained in:
Dominik Pschenitschni 2022-02-08 21:46:54 +01:00
parent 80664b6182
commit 69654b823e
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
3 changed files with 89 additions and 84 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;

94
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
},
@ -610,7 +611,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
&-bucket-container {
display: flex;
align-items: flex-start;
}
.ghost {
@ -624,7 +624,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.bucket {
background-color: var(--grey-100);
border-radius: $radius;
position: relative;
@ -632,22 +631,20 @@ $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: .5rem .5rem 0;
}
.move-card-move {
transition: transform $transition-duration;
}
@ -682,10 +679,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 +693,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 +724,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;