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

Reorder tasks, lists and kanban buckets (#620)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/620
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-07-28 19:56:29 +00:00
parent 39ef4b48f2
commit 3c7f8d7aa2
23 changed files with 1524 additions and 1266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
cypress/integration/list/list.spec.js
View file

@ -436,26 +436,23 @@ describe('Lists', () => {
.should('exist')
})
it('Can drag tasks around', () => {
const tasks = TaskFactory.create(2, {
list_id: 1,
bucket_id: 1,
})
cy.visit('/lists/1/kanban')
// The following test does not work. It seems like vue-smooth-dnd does not use either mousemove or dragstart
// (not sure why this actually works at all?) and as I'm planning to swap that out for vuedraggable/sortable.js
// anyway, I figured it wouldn't be worth the hassle right now.
// it('Can drag tasks around', () => {
// const tasks = TaskFactory.create(2, {
// list_id: 1,
// bucket_id: 1,
// })
// cy.visit('/lists/1/kanban')
//
// cy.get('.kanban .bucket .tasks .task')
// .contains(tasks[0].title)
// .first()
// .drag('.kanban .bucket:nth-child(2) .tasks .smooth-dnd-container.vertical')
// .trigger('mousedown', {which: 1})
// .trigger('mousemove', {clientX: 500, clientY: 0})
// .trigger('mouseup', {force: true})
// })
cy.get('.kanban .bucket .tasks .task')
.contains(tasks[0].title)
.first()
.drag('.kanban .bucket:nth-child(2) .tasks .dropper div')
cy.get('.kanban .bucket:nth-child(2) .tasks')
.should('contain', tasks[0].title)
cy.get('.kanban .bucket:nth-child(1) .tasks')
.should('not.contain', tasks[0].title)
})
it('Should navigate to the task when the task card is clicked', () => {
const tasks = TaskFactory.create(5, {

1
cypress/support/index.js
View file

@ -1,3 +1,4 @@
import './commands'
import 'cypress-file-upload'
import '@4tw/cypress-drag-drop'

4
package.json
View file

@ -21,6 +21,7 @@
"date-fns": "2.23.0",
"dompurify": "2.3.0",
"highlight.js": "11.1.0",
"is-touch-device": "^1.0.1",
"lodash": "4.17.21",
"marked": "2.1.3",
"register-service-worker": "1.7.2",
@ -32,11 +33,12 @@
"vue-easymde": "1.4.0",
"vue-i18n": "8.25.0",
"vue-shortkey": "3.1.7",
"vue-smooth-dnd": "0.8.1",
"vuedraggable": "^2.24.3",
"vuex": "3.6.2",
"workbox-precaching": "6.1.5"
},
"devDependencies": {
"@4tw/cypress-drag-drop": "^1.8.0",
"@fortawesome/fontawesome-svg-core": "1.2.35",
"@fortawesome/free-regular-svg-icons": "5.15.3",
"@fortawesome/free-solid-svg-icons": "5.15.3",

20
src/App.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
<div class="offline" style="height: 0;width: 0;"></div>
@ -24,6 +24,7 @@
<script>
import {mapState} from 'vuex'
import isTouchDevice from 'is-touch-device'
import authTypes from './models/authTypes'
@ -63,12 +64,17 @@ export default {
this.$router.push({name: 'home'})
}
},
computed: mapState({
authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
online: ONLINE,
keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
}),
computed: {
isTouch() {
return isTouchDevice()
},
...mapState({
authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
online: ONLINE,
keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
}),
},
methods: {
setupOnlineStatus() {
this.$store.commit(ONLINE, navigator.onLine)

109
src/components/home/navigation.vue
View file

@ -49,7 +49,7 @@
</div>
<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
<template v-for="n in namespaces">
<template v-for="(n, nk) in namespaces">
<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
<span
@click="toggleLists(n.id)"
@ -73,38 +73,59 @@
</a>
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
</div>
<div :key="n.id + 'child'" class="more-container" v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true">
<div
:key="n.id + 'child'"
class="more-container"
v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true"
>
<ul class="menu-list can-be-hidden">
<template v-for="l in n.lists">
<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
are nested inside of the namespaces makes it a lot harder.-->
<li :key="l.id" v-if="!l.isArchived">
<router-link
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
:to="{ name: 'list.index', params: { listId: l.id} }"
tag="span"
<draggable
v-model="n.lists"
:group="`namespace-${n.id}-lists`"
@start="() => drag = true"
@end="e => saveListPosition(e, nk)"
v-bind="dragOptions"
handle=".handle"
>
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
<li
v-for="l in n.lists"
:key="l.id"
v-if="!l.isArchived"
class="loader-container"
:class="{'is-loading': listUpdating[l.id]}"
>
<span
:style="{ backgroundColor: l.hexColor }"
class="color-bubble"
v-if="l.hexColor !== ''">
</span>
<span class="list-menu-title">
{{ getListTitle(l) }}
</span>
<span
:class="{'is-favorite': l.isFavorite}"
@click.stop="toggleFavoriteList(l)"
class="favorite">
<icon icon="star" v-if="l.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</span>
</router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
<span class="list-setting-spacer" v-else></span>
</li>
</template>
<router-link
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
:to="{ name: 'list.index', params: { listId: l.id} }"
tag="span"
>
<span class="icon handle">
<icon icon="grip-lines"/>
</span>
<span
:style="{ backgroundColor: l.hexColor }"
class="color-bubble"
v-if="l.hexColor !== ''">
</span>
<span class="list-menu-title">
{{ getListTitle(l) }}
</span>
<span
:class="{'is-favorite': l.isFavorite}"
@click.stop="toggleFavoriteList(l)"
class="favorite">
<icon icon="star" v-if="l.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</span>
</router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
<span class="list-setting-spacer" v-else></span>
</li>
</transition-group>
</draggable>
</ul>
</div>
</template>
@ -120,17 +141,26 @@ import {mapState} from 'vuex'
import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
import draggable from 'vuedraggable'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
export default {
name: 'navigation',
data() {
return {
listsVisible: {},
drag: false,
dragOptions: {
animation: 100,
ghostClass: 'ghost',
},
listUpdating: {},
}
},
components: {
ListSettingsDropdown,
NamespaceSettingsDropdown,
draggable,
},
computed: mapState({
namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
@ -176,6 +206,23 @@ export default {
toggleLists(namespaceId) {
this.$set(this.listsVisible, namespaceId, !this.listsVisible[namespaceId] ?? false)
},
saveListPosition(e, namespaceIndex) {
const listsFiltered = this.namespaces[namespaceIndex].lists.filter(l => !l.isArchived)
const list = listsFiltered[e.newIndex]
const listBefore = listsFiltered[e.newIndex - 1] ?? null
const listAfter = listsFiltered[e.newIndex + 1] ?? null
this.$set(this.listUpdating, list.id, true)
list.position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
this.$store.dispatch('lists/updateList', list)
.catch(e => {
this.error(e)
})
.finally(() => {
this.$set(this.listUpdating, list.id, false)
})
},
},
}
</script>

8
src/components/tasks/add-task.vue
View file

@ -66,6 +66,12 @@ export default {
this.labelService = new LabelService()
this.labelTaskService = new LabelTaskService()
},
props: {
defaultPosition: {
type: Number,
required: false,
},
},
methods: {
addTask() {
if (this.newTaskTitle === '') {
@ -74,7 +80,7 @@ export default {
}
this.errorMessage = ''
this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId)
this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
.then(task => {
this.newTaskTitle = ''
this.$emit('taskAdded', task)

17
src/components/tasks/mixins/createTask.js
View file

@ -6,10 +6,12 @@ import LabelModel from '@/models/label'
import LabelTaskService from '@/services/labelTask'
import {mapState} from 'vuex'
import UserService from '@/services/user'
import TaskService from '@/services/task'
export default {
data() {
return {
taskService: TaskService,
labelTaskService: LabelTaskService,
userService: UserService,
}
@ -17,12 +19,13 @@ export default {
created() {
this.labelTaskService = new LabelTaskService()
this.userService = new UserService()
this.taskService = new TaskService()
},
computed: mapState({
labels: state => state.labels.labels,
}),
methods: {
createNewTask(newTaskTitle, bucketId = 0, lId = 0) {
createNewTask(newTaskTitle, bucketId = 0, lId = 0, position = 0) {
const parsedTask = parseTaskText(newTaskTitle)
const assignees = []
@ -36,14 +39,17 @@ export default {
const list = this.$store.getters['lists/findListByExactname'](parsedTask.list)
listId = list === null ? null : list.id
}
if (listId === null) {
listId = lId !== 0 ? lId : this.$route.params.listId
if (lId !== 0) {
listId = lId
}
if (typeof this.$route.params.listId !== 'undefined') {
listId = parseInt(this.$route.params.listId)
}
if (typeof listId === 'undefined' || listId === 0) {
if (typeof listId === 'undefined' || listId === null) {
return Promise.reject('NO_LIST')
}
// Separate closure because we need to wait for the results of the user search if users were entered in the
// task create request. Because _that_ happens in a promise, we'll need something to call when it resolves.
const createTask = () => {
@ -54,6 +60,7 @@ export default {
priority: parsedTask.priority,
assignees: assignees,
bucketId: bucketId,
position: position,
})
return this.taskService.create(task)
.then(task => {

24
src/components/tasks/mixins/taskList.js
View file

@ -1,5 +1,6 @@
import TaskCollectionService from '../../../services/taskCollection'
import cloneDeep from 'lodash/cloneDeep'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
/**
* This mixin provides a base set of methods and properties to get tasks on a list.
@ -20,7 +21,7 @@ export default {
showTaskFilter: false,
params: {
sort_by: ['done', 'id'],
sort_by: ['position', 'id'],
order_by: ['asc', 'desc'],
filter_by: ['done'],
filter_value: ['false'],
@ -148,9 +149,9 @@ export default {
if (a.done > b.done)
return 1
if (a.id > b.id)
if (a.position < b.position)
return -1
if (a.id < b.id)
if (a.position > b.position)
return 1
return 0
})
@ -187,5 +188,22 @@ export default {
},
}
},
saveTaskPosition(e) {
this.drag = false
const task = this.tasks[e.newIndex]
const taskBefore = this.tasks[e.newIndex - 1] ?? null
const taskAfter = this.tasks[e.newIndex + 1] ?? null
task.position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
this.$store.dispatch('tasks/update', task)
.then(r => {
this.$set(this.tasks, e.newIndex, r)
})
.catch(e => {
this.error(e)
})
},
},
}

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

@ -0,0 +1,111 @@
<template>
<div
:class="{
'is-loading': loadingInternal || loading,
'draggable': !(loadingInternal || loading),
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
}"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@click.ctrl="() => markTaskAsDone(task)"
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
@click.meta="() => markTaskAsDone(task)"
class="task loader-container draggable"
>
<span class="task-id">
<span class="is-done" v-if="task.done">Done</span>
<template v-if="task.identifier === ''">
#{{ task.index }}
</template>
<template v-else>
{{ task.identifier }}
</template>
</span>
<span
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="due-date"
v-if="task.dueDate > 0"
v-tooltip="formatDate(task.dueDate)">
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
<span>
{{ formatDateSince(task.dueDate) }}
</span>
</span>
<h3>{{ task.title }}</h3>
<progress
class="progress is-small"
v-if="task.percentDone > 0"
:value="task.percentDone * 100" max="100">
{{ task.percentDone * 100 }}%
</progress>
<div class="footer">
<labels :labels="task.labels"/>
<priority-label :priority="task.priority"/>
<div class="assignees" v-if="task.assignees.length > 0">
<user
:avatar-size="24"
:key="task.id + 'assignee' + u.id"
:show-username="false"
:user="u"
v-for="u in task.assignees"
/>
</div>
<span class="icon" v-if="task.attachments.length > 0">
<icon icon="paperclip"/>
</span>
<span v-if="task.description" class="icon">
<icon icon="align-left"/>
</span>
</div>
</div>
</template>
<script>
import {playPop} from '../../../helpers/playPop'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import Labels from '../../../components/tasks/partials/labels'
export default {
name: 'kanban-card',
components: {
PriorityLabel,
User,
Labels,
},
data() {
return {
loadingInternal: false,
}
},
props: {
task: {
required: true,
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
methods: {
markTaskAsDone(task) {
this.loadingInternal = true
task.done = !task.done
this.$store.dispatch('tasks/update', task)
.then(() => {
if (task.done) {
playPop()
}
})
.catch(e => {
this.error(e)
})
.finally(() => {
this.loadingInternal = false
})
},
},
}
</script>

18
src/helpers/applyDrag.js
View file

@ -1,18 +0,0 @@
export const applyDrag = (arr, dragResult) => {
const {removedIndex, addedIndex, payload} = dragResult
if (removedIndex === null && addedIndex === null) return arr
const result = [...arr]
// The payload comes from the task itself
let itemToAdd = payload
if (removedIndex !== null) {
itemToAdd = result.splice(removedIndex, 1)[0]
}
if (addedIndex !== null) {
result.splice(addedIndex, 0, itemToAdd)
}
return result
}

19
src/helpers/calculateItemPosition.ts Normal file
View file

@ -0,0 +1,19 @@
export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
if (positionBefore === null && positionAfter === null) {
return 0
}
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
if (positionBefore === null && positionAfter !== null) {
return positionAfter / 2
}
// If there is no task after it, we just add 2^16 to the last position to have enough room in the future
if (positionBefore !== null && positionAfter === null) {
return positionBefore + Math.pow(2, 16)
}
// If we have both a task before and after it, we acually calculate the position
// @ts-ignore - can never be null but TS does not seem to understand that
return positionBefore + (positionAfter - positionBefore) / 2
}

18
src/helpers/calculateTaskPosition.test.ts Normal file
View file

@ -0,0 +1,18 @@
import {calculateItemPosition} from './calculateItemPosition'
it('should calculate the task position', () => {
const result = calculateItemPosition(10, 100)
expect(result).toBe(55)
})
it('should return 0 if no position was provided', () => {
const result = calculateItemPosition(null, null)
expect(result).toBe(0)
})
it('should calculate the task position for the first task', () => {
const result = calculateItemPosition(null, 100)
expect(result).toBe(50)
})
it('should calculate the task position for the last task', () => {
const result = calculateItemPosition(10, null)
expect(result).toBe(65546)
})

2
src/main.ts
View file

@ -72,6 +72,7 @@ import {
faShareAlt,
faImage,
faBell,
faGripLines,
} from '@fortawesome/free-solid-svg-icons'
import {
faCalendarAlt,
@ -179,6 +180,7 @@ library.add(faShareAlt)
library.add(faImage)
library.add(faBell)
library.add(faBellSlash)
library.add(faGripLines)
Vue.component('icon', FontAwesomeIcon)

3
src/models/task.js
View file

@ -104,6 +104,9 @@ export default class TaskModel extends AbstractModel {
index: 0,
isFavorite: false,
subscription: null,
position: 0,
kanbanPosition: 0,
createdBy: UserModel,
created: null,

4
src/store/modules/kanban.js
View file

@ -11,7 +11,7 @@ const tasksPerBucket = 25
const addTaskToBucketAndSort = (state, task) => {
const bi = filterObject(state.buckets, b => b.id === task.bucketId)
state.buckets[bi].tasks.push(task)
state.buckets[bi].tasks.sort((a, b) => a.position > b.position ? 1 : -1)
state.buckets[bi].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
}
/**
@ -208,7 +208,7 @@ export default {
const params = cloneDeep(ps)
params.sort_by = 'position'
params.sort_by = 'kanban_position'
params.order_by = 'asc'
let hasBucketFilter = false

480
src/styles/components/kanban.scss
View file

@ -12,292 +12,314 @@ $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem -
$filter-container-height: '1rem - #{$switch-view-height}';
.app-content.list\.kanban {
padding-bottom: 0;
padding-bottom: 0;
}
.kanban {
display: flex;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;
height: calc(#{$crazy-height-calculation});
margin: 0 -1.5rem;
padding: 0 1.5rem;
overflow-x: auto;
overflow-y: hidden;
height: calc(#{$crazy-height-calculation});
margin: 0 -1.5rem;
padding: 0 1.5rem;
@media screen and (max-width: $tablet) {
height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
}
@media screen and (max-width: $tablet) {
height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
}
.bucket {
background-color: $bucket-background;
border-radius: $radius;
position: relative;
&-bucket-container {
display: flex;
align-items: flex-start;
}
flex: 0 0 $bucket-width;
margin: 0 $bucket-right-margin 0 0;
max-height: 100%;
min-height: 20px;
max-width: $bucket-width;
.ghost {
background: transparent !important;
border: 3px dashed $grey-300 !important;
box-shadow: none !important;
.tasks {
max-height: calc(#{$crazy-height-calculation-tasks});
overflow: auto;
* {
opacity: 0;
}
}
@media screen and (max-width: $tablet) {
max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
}
.bucket {
background-color: $bucket-background;
border-radius: $radius;
position: relative;
.task {
margin: 0 $bucket-right-margin 0 0;
max-height: 100%;
min-height: 20px;
width: $bucket-width;
&:first-child {
margin-top: 0;
}
.tasks {
max-height: calc(#{$crazy-height-calculation-tasks});
overflow: auto;
margin-top: 0;
-webkit-touch-callout: none; // iOS Safari
-webkit-user-select: none; // Safari
-khtml-user-select: none; // Konqueror HTML
-moz-user-select: none; // Old versions of Firefox
-ms-user-select: none; // Internet Explorer/Edge
user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
@media screen and (max-width: $tablet) {
max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
}
transition: $ease-out;
cursor: pointer;
box-shadow: $shadow-xs;
display: block;
.task {
-webkit-touch-callout: none; // iOS Safari
-webkit-user-select: none; // Safari
-khtml-user-select: none; // Konqueror HTML
-moz-user-select: none; // Old versions of Firefox
-ms-user-select: none; // Internet Explorer/Edge
user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
font-size: .9rem;
padding: .5rem;
margin: .5rem;
border-radius: $radius;
background: $task-background;
//transition: $ease-out;
cursor: pointer;
box-shadow: $shadow-xs;
display: block;
border: 3px solid transparent;
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
font-size: .9rem;
padding: .5rem;
margin: .5rem;
border-radius: $radius;
background: $task-background;
h3 {
font-family: $family-sans-serif;
font-size: .85rem;
word-break: break-word;
}
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
.progress {
margin: 8px 0 0 0;
width: 100%;
height: 0.5rem;
}
h3 {
font-family: $family-sans-serif;
font-size: .85rem;
word-break: break-word;
}
.due-date {
float: right;
display: flex;
align-items: center;
.progress {
margin: 8px 0 0 0;
width: 100%;
height: 0.5rem;
}
.icon {
margin-right: .25rem;
}
.due-date {
float: right;
display: flex;
align-items: center;
&.overdue {
color: $red;
}
}
.icon {
margin-right: .25rem;
}
.label-wrapper .tag {
margin: .5rem .5rem 0 0;
}
&.overdue {
color: $red;
}
}
.footer {
background: transparent;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
.label-wrapper .tag {
margin: .5rem .5rem 0 0;
}
.tag, .assignees, .icon, .priority-label {
margin-top: .25rem;
margin-right: .25rem;
}
.footer {
background: transparent;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
.assignees {
display: flex;
.tag, .assignees, .icon, .priority-label {
margin-top: .25rem;
margin-right: .25rem;
}
.user {
display: inline;
margin: 0;
.assignees {
display: flex;
img {
margin: 0;
}
}
}
.user {
display: inline;
margin: 0;
.tag {
margin-left: 0;
}
img {
margin: 0;
}
}
}
.priority-label {
font-size: .75rem;
height: 2rem;
.tag {
margin-left: 0;
}
.icon {
height: 1rem;
padding: 0 .25rem;
margin-top: 0;
}
}
}
.priority-label {
font-size: .75rem;
height: 2rem;
.footer .icon,
.due-date,
.priority-label {
background: $grey-100;
border-radius: $radius;
padding: 0 .5rem;
}
.icon {
height: 1rem;
padding: 0 .25rem;
margin-top: 0;
}
}
}
.due-date {
padding: 0 .25rem;
}
.footer .icon,
.due-date,
.priority-label {
background: $grey-100;
border-radius: $radius;
padding: 0 .5rem;
}
.task-id {
color: $grey-500;
font-size: .8rem;
margin-bottom: .25rem;
display: flex;
}
.due-date {
padding: 0 .25rem;
}
.is-done {
font-size: .75rem;
padding: .2rem .3rem;
margin: 0 .25rem 0 0;
}
.task-id {
color: $grey-500;
font-size: .8rem;
margin-bottom: .25rem;
display: flex;
}
&.is-moving {
opacity: .5;
}
.is-done {
font-size: .75rem;
padding: .2rem .3rem;
margin: 0 .25rem 0 0;
}
span {
width: auto;
}
&.is-moving {
opacity: .5;
}
&.has-light-text {
color: $white;
span {
width: auto;
}
.task-id {
color: $grey-200;
}
&.has-light-text {
color: $white;
.footer .icon,
.due-date,
.priority-label {
background: $grey-800;
}
.task-id {
color: $grey-200;
}
.footer {
.icon svg {
fill: $white;
}
}
}
}
.footer .icon,
.due-date,
.priority-label {
background: $grey-800;
}
.drop-preview {
border-radius: $radius;
margin: 0 .5rem .5rem;
background: transparent;
border: 3px dashed $grey-300;
}
}
.footer {
.icon svg {
fill: $white;
}
}
}
h2 {
font-size: 1rem;
margin: 0;
font-weight: 600 !important;
}
&.v-leave, &.v-leave-to, &.v-leave-active
&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
display: none;
}
}
&.new-bucket {
// Because of reasons, this button ignores the margin we gave it to the right.
// To make it still look like it has some, we modify the container to have a padding of 1rem,
// which is the same as the margin it should have. Then we make the container itself bigger
// to hide the fact we just made the button smaller.
min-width: calc(#{$bucket-width} + 1rem);
background: transparent;
padding-right: 1rem;
.dropper {
&, > div {
min-height: 40px;
}
}
}
.button {
background: $bucket-background;
width: 100%;
}
}
.move-card-move {
transition: transform $transition-duration;
}
a.dropdown-item {
padding-right: 1rem;
}
.no-move {
transition: transform 0s;
}
&.is-collapsed {
transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
// 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});
cursor: pointer;
h2 {
font-size: 1rem;
margin: 0;
font-weight: 600 !important;
}
.tasks, .bucket-footer {
display: none;
}
}
}
&.new-bucket {
// Because of reasons, this button ignores the margin we gave it to the right.
// To make it still look like it has some, we modify the container to have a padding of 1rem,
// which is the same as the margin it should have. Then we make the container itself bigger
// to hide the fact we just made the button smaller.
min-width: calc(#{$bucket-width} + 1rem);
background: transparent;
padding-right: 1rem;
.bucket-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
height: $bucket-header-height;
.button {
background: $bucket-background;
width: 100%;
}
}
.limit {
padding-left: .5rem;
font-weight: bold;
a.dropdown-item {
padding-right: 1rem;
}
&.is-max {
color: $red;
}
}
&.is-collapsed {
transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
// 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});
cursor: pointer;
.title.input {
height: auto;
padding: .4rem .5rem;
display: inline-block;
}
}
.tasks, .bucket-footer {
display: none;
}
}
}
.dropdown-trigger {
cursor: pointer;
padding: .5rem;
}
.bucket-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
height: $bucket-header-height;
.bucket-footer {
padding: .5rem;
.limit {
padding-left: .5rem;
font-weight: bold;
.button {
background-color: transparent;
&.is-max {
color: $red;
}
}
&:hover {
background-color: $white;
}
}
}
.title.input {
height: auto;
padding: .4rem .5rem;
display: inline-block;
cursor: pointer;
}
}
.dropdown-trigger {
cursor: pointer;
padding: .5rem;
}
.bucket-footer {
padding: .5rem;
.button {
background-color: transparent;
&:hover {
background-color: $white;
}
}
}
}
.ghost-task {
transition: transform 0.18s ease;
transform: rotateZ(3deg)
.task-dragging {
transition: transform 0.18s ease;
transform: rotateZ(3deg)
}
.ghost-task-drop {
transition: transform 0.18s ease-in-out;
transform: rotateZ(0deg)
transition: transform 0.18s ease-in-out;
transform: rotateZ(0deg)
}

542
src/styles/components/tasks.scss
View file

@ -1,341 +1,363 @@
.tasks-container {
display: flex;
display: flex;
.tasks {
width: 100%;
}
.tasks {
width: 100%;
.taskedit {
width: 50%;
}
.ghost {
border-radius: $radius;
background: $grey-100;
border: 2px dashed $grey-300;
* {
opacity: 0;
}
}
}
.taskedit {
width: 50%;
}
}
.tasks {
margin-top: 1rem;
padding: 0;
text-align: left;
margin-top: 1rem;
padding: 0;
text-align: left;
@media screen and (min-width: $tablet) {
&.short {
max-width: 53vw;
}
}
@media screen and (min-width: $tablet) {
&.short {
max-width: 53vw;
}
}
@media screen and (max-width: $tablet) {
max-width: 100%;
}
@media screen and (max-width: $tablet) {
max-width: 100%;
}
&.noborder {
margin: 1rem -0.5rem;
}
&.noborder {
margin: 1rem -0.5rem;
}
.task {
display: flex;
flex-wrap: wrap;
padding: 0.5rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
margin: 0 .5rem;
border-radius: $radius;
.task {
display: flex;
flex-wrap: wrap;
padding: .4rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
margin: 0 .5rem;
border-radius: $radius;
border: 2px solid transparent;
&:first-child {
margin-top: .5rem;
}
&:first-child {
margin-top: .5rem;
}
&:last-child {
margin-bottom: .5rem;
}
&:last-child {
margin-bottom: .5rem;
}
&:hover {
background-color: $grey-100;
}
&:hover {
background-color: $grey-100;
}
.tasktext,
&.tasktext {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
flex: 1 0 50%;
.tasktext,
&.tasktext {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
flex: 1 0 50%;
.overdue {
color: $red;
}
}
.overdue {
color: $red;
}
}
.task-list {
width: auto;
color: $grey-400;
font-size: .9rem;
white-space: nowrap;
}
.task-list {
width: auto;
color: $grey-400;
font-size: .9rem;
white-space: nowrap;
}
.fancycheckbox span {
display: none;
}
.fancycheckbox span {
display: none;
}
.color-bubble {
height: 10px;
flex: 0 0 10px;
}
.color-bubble {
height: 10px;
flex: 0 0 10px;
}
.tag {
margin: 0 0.5rem;
}
.tag {
margin: 0 0.5rem;
}
.avatar {
border-radius: 50%;
vertical-align: bottom;
margin-left: 5px;
height: 27px;
width: 27px;
}
.avatar {
border-radius: 50%;
vertical-align: bottom;
margin-left: 5px;
height: 27px;
width: 27px;
}
.list-task-icon {
margin-left: 6px;
.list-task-icon {
margin-left: 6px;
&:not(:first-of-type) {
margin-left: 8px;
}
}
&:not(:first-of-type) {
margin-left: 8px;
}
a {
color: $text;
transition: color ease $transition-duration;
}
&:hover {
color: $grey-900;
}
}
a {
color: $text;
transition: color ease $transition-duration;
.favorite {
opacity: 0;
text-align: center;
width: 27px;
transition: opacity $transition, color $transition;
&:hover {
color: $grey-900;
}
}
&:hover {
color: $orange;
}
.favorite {
opacity: 0;
text-align: center;
width: 27px;
transition: opacity $transition, color $transition;
&.is-favorite {
opacity: 1;
color: $orange;
}
}
&:hover {
color: $orange;
}
&:hover .favorite {
opacity: 1;
}
&.is-favorite {
opacity: 1;
color: $orange;
}
}
.fancycheckbox {
height: 18px;
padding-top: 0;
padding-right: .5rem;
&:hover .favorite {
opacity: 1;
}
span {
display: none;
}
}
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
cursor: grab;
}
.tasktext.done {
text-decoration: line-through;
color: $grey-500;
}
&:hover .handle {
opacity: 1;
}
span.parent-tasks {
color: $grey-500;
width: auto;
}
.fancycheckbox {
height: 18px;
padding-top: 0;
padding-right: .5rem;
.remove {
color: $red;
}
span {
display: none;
}
}
input[type="checkbox"] {
vertical-align: middle;
}
.tasktext.done {
text-decoration: line-through;
color: $grey-500;
}
.settings {
float: right;
width: 24px;
cursor: pointer;
}
span.parent-tasks {
color: $grey-500;
width: auto;
}
&.loader-container.is-loading:after {
top: calc(50% - 1rem);
left: calc(50% - 1rem);
width: 2rem;
height: 2rem;
border-left-color: $grey-300;
border-bottom-color: $grey-300;
}
}
.remove {
color: $red;
}
.progress {
width: 50px;
margin: 0 0.5rem 0 0;
flex: 3 1 auto;
input[type="checkbox"] {
vertical-align: middle;
}
@media screen and (max-width: $tablet) {
margin: 0.5rem 0 0 0;
order: 1;
width: 100%;
}
}
.settings {
float: right;
width: 24px;
cursor: pointer;
}
.task:last-child {
border-bottom: none;
}
&.loader-container.is-loading:after {
top: calc(50% - 1rem);
left: calc(50% - 1rem);
width: 2rem;
height: 2rem;
border-left-color: $grey-300;
border-bottom-color: $grey-300;
}
}
.progress {
width: 50px;
margin: 0 0.5rem 0 0;
flex: 3 1 auto;
@media screen and (max-width: $tablet) {
margin: 0.5rem 0 0 0;
order: 1;
width: 100%;
}
}
.task:last-child {
border-bottom: none;
}
}
.is-menu-enabled .tasks .task {
span:not(.tag), a {
.tasktext, &.tasktext {
@media screen and (max-width: $desktop) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
}
span:not(.tag), a {
.tasktext, &.tasktext {
@media screen and (max-width: $desktop) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
}
// Duplicated rule to have it work properly in at least some browsers
// This should be fine as the ui doesn't work in rare edge cases to begin with
@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
}
// Duplicated rule to have it work properly in at least some browsers
// This should be fine as the ui doesn't work in rare edge cases to begin with
@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
}
}
}
}
}
.taskedit {
min-height: calc(100% - 1rem);
margin-top: 1rem;
min-height: calc(100% - 1rem);
margin-top: 1rem;
.priority-select {
.select, select {
width: 100%;
}
}
.priority-select {
.select, select {
width: 100%;
}
}
ul.assingees {
list-style: none;
margin: 0;
ul.assingees {
list-style: none;
margin: 0;
li {
padding: 0.5rem 0.5rem 0;
li {
padding: 0.5rem 0.5rem 0;
a {
float: right;
color: $red;
transition: all $transition;
}
}
}
a {
float: right;
color: $red;
transition: all $transition;
}
}
}
.tag {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
.tag {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
&:last-child {
margin-right: 0;
}
}
&:last-child {
margin-right: 0;
}
}
}
.show-tasks {
h3 {
text-align: left;
h3 {
text-align: left;
&.nothing {
text-align: center;
margin-top: 3rem;
}
&.nothing {
text-align: center;
margin-top: 3rem;
}
.input {
width: 190px;
vertical-align: middle;
margin: .5rem 0;
}
}
.input {
width: 190px;
vertical-align: middle;
margin: .5rem 0;
}
}
img {
margin-top: 2rem;
}
img {
margin-top: 2rem;
}
.user img{
margin: 0;
}
.user img {
margin: 0;
}
.spinner.is-loading:after {
margin-left: calc(40% - 1rem);
}
.spinner.is-loading:after {
margin-left: calc(40% - 1rem);
}
}
.defer-task {
$defer-task-max-width: 350px;
$defer-task-max-width: 350px;
position: absolute;
width: 100%;
max-width: $defer-task-max-width;
border-radius: $radius;
border: 1px solid $grey-200;
padding: 1rem;
margin: 1rem;
background: $white;
color: $text;
cursor: default;
z-index: 10;
box-shadow: $shadow-lg;
position: absolute;
width: 100%;
max-width: $defer-task-max-width;
border-radius: $radius;
border: 1px solid $grey-200;
padding: 1rem;
margin: 1rem;
background: $white;
color: $text;
cursor: default;
z-index: 10;
box-shadow: $shadow-lg;
input.input {
display: none;
}
input.input {
display: none;
}
.flatpickr-calendar {
margin: 0 auto;
box-shadow: none;
.flatpickr-calendar {
margin: 0 auto;
box-shadow: none;
span {
width: auto !important;
}
}
span {
width: auto !important;
}
}
.defer-days {
justify-content: space-between;
display: flex;
margin: .5rem 0;
}
.defer-days {
justify-content: space-between;
display: flex;
margin: .5rem 0;
}
@media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
left: .5rem;
right: .5rem;
max-width: 100%;
width: calc(100vw - 1rem - 2rem);
@media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
left: .5rem;
right: .5rem;
max-width: 100%;
width: calc(100vw - 1rem - 2rem);
.flatpickr-calendar {
max-width: 100%;
.flatpickr-calendar {
max-width: 100%;
.flatpickr-innerContainer {
overflow: scroll;
}
}
}
.flatpickr-innerContainer {
overflow: scroll;
}
}
}
}
.is-max-width-desktop .tasks .task {
max-width: $desktop;
max-width: $desktop;
}
.tasktext {
:focus {
box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
}
:focus {
box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
}
:focus:not(:focus-visible) {
outline: 0;
}
:focus:not(:focus-visible) {
outline: 0;
}
:focus-visible, :-moz-focusring {
box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
}
:focus-visible, :-moz-focusring {
box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
}
}

729
src/styles/theme/navigation.scss
View file

@ -1,397 +1,432 @@
@use "sass:math";
.navbar {
z-index: 4 !important;
z-index: 4 !important;
.navbar-dropdown {
box-shadow: $navbar-dropdown-boxed-shadow;
top: 101%;
}
.navbar-dropdown {
box-shadow: $navbar-dropdown-boxed-shadow;
top: 101%;
}
.navbar-brand {
display: flex;
align-items: center;
.navbar-brand {
display: flex;
align-items: center;
.logo img {
width: $vikunja-nav-logo-full-width;
}
}
.logo img {
width: $vikunja-nav-logo-full-width;
}
}
}
.navbar.main-theme {
background: $light-background;
z-index: 5 !important;
justify-content: space-between;
align-items: center;
background: $light-background;
z-index: 5 !important;
justify-content: space-between;
align-items: center;
.title {
margin: 0;
font-size: 1.75rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.title {
margin: 0;
font-size: 1.75rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-end {
margin-left: 0;
align-items: center;
display: flex;
}
.navbar-end {
margin-left: 0;
align-items: center;
display: flex;
}
@media screen and (max-width: $desktop) {
display: flex;
justify-content: space-between;
@media screen and (max-width: $desktop) {
display: flex;
justify-content: space-between;
@media screen and (max-width: $tablet) {
.navbar-brand {
display: none;
}
@media screen and (max-width: $tablet) {
.navbar-brand {
display: none;
}
.user {
width: $user-dropdown-width-mobile;
display: flex;
align-items: center;
.user {
width: $user-dropdown-width-mobile;
display: flex;
align-items: center;
.dropdown-trigger {
line-height: 1;
.dropdown-trigger {
line-height: 1;
.button {
padding: 0 0.25rem;
height: 1rem;
.button {
padding: 0 0.25rem;
height: 1rem;
.icon {
width: .5rem;
}
}
}
.icon {
width: .5rem;
}
}
}
.username {
display: none;
}
}
}
}
.username {
display: none;
}
}
}
}
}
.navbar-menu .navbar-item .icon {
margin: 0 0.5rem;
margin: 0 0.5rem;
}
.app-container {
.namespace-container {
background: $vikunja-nav-background;
z-index: 6;
color: $vikunja-nav-color;
padding: 0;
transition: all $transition;
position: fixed;
bottom: 0;
top: $navbar-height;
overflow-x: auto;
width: $navbar-width;
.namespace-container {
background: $vikunja-nav-background;
z-index: 6;
color: $vikunja-nav-color;
padding: 0;
transition: all $transition;
position: fixed;
bottom: 0;
top: $navbar-height;
overflow-x: auto;
width: $navbar-width;
padding: 0 0 1rem;
left: -147vw;
bottom: 0;
padding: 0 0 1rem;
left: -147vw;
bottom: 0;
@media screen and (max-width: $tablet) {
top: 0;
width: 70vw;
}
@media screen and (max-width: $tablet) {
top: 0;
width: 70vw;
}
&.is-active {
left: 0;
}
&.is-active {
left: 0;
}
.menu {
.menu-label {
font-size: 1rem;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $vikunja-nav-color;
font-weight: 500;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
.menu {
.menu-label {
font-size: 1rem;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $vikunja-nav-color;
font-weight: 500;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
overflow: hidden;
}
overflow: hidden;
}
.menu-label, .menu-list span.list-menu-link, .menu-list a {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.menu-label, .menu-list span.list-menu-link, .menu-list a {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.list-menu-title {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.list-menu-title {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
.favorite {
margin-left: .25rem;
transition: opacity $transition, color $transition;
opacity: 0;
.favorite {
margin-left: .25rem;
transition: opacity $transition, color $transition;
opacity: 0;
&:hover {
color: $orange;
}
&:hover {
color: $orange;
}
&.is-favorite {
opacity: 1;
color: $orange;
}
}
&.is-favorite {
opacity: 1;
color: $orange;
}
}
&:hover .favorite {
opacity: 1;
}
}
&:hover .favorite {
opacity: 1;
}
}
.menu-label {
.color-bubble {
width: 14px !important;
height: 14px !important;
}
.menu-label {
.color-bubble {
width: 14px !important;
height: 14px !important;
}
.is-archived {
min-width: 85px;
}
}
.is-archived {
min-width: 85px;
}
}
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
.menu-label {
margin-bottom: 0;
flex: 1 1 auto;
.menu-label {
margin-bottom: 0;
flex: 1 1 auto;
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
a:not(.dropdown-item) {
color: $vikunja-nav-color;
padding: 0 .25rem;
}
a:not(.dropdown-item) {
color: $vikunja-nav-color;
padding: 0 .25rem;
}
.dropdown-trigger {
padding: .5rem;
cursor: pointer;
}
.dropdown-trigger {
padding: .5rem;
cursor: pointer;
}
.toggle-lists-icon {
svg {
transition: all $transition;
transform: rotate(90deg);
opacity: 1;
}
.toggle-lists-icon {
svg {
transition: all $transition;
transform: rotate(90deg);
opacity: 1;
}
&.active svg {
transform: rotate(0deg);
opacity: 0;
}
}
&.active svg {
transform: rotate(0deg);
opacity: 0;
}
}
&:hover .toggle-lists-icon svg {
opacity: 1;
}
&:hover .toggle-lists-icon svg {
opacity: 1;
}
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
color: $vikunja-nav-color;
}
.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
color: $vikunja-nav-color;
}
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
.menu-list {
li {
height: 44px;
display: flex;
align-items: center;
.dropdown-trigger {
opacity: 0;
padding: .5rem;
cursor: pointer;
transition: $transition;
}
.dropdown-trigger {
opacity: 0;
padding: .5rem;
cursor: pointer;
transition: $transition;
}
&:hover {
background: $white;
&:hover {
background: $white;
.dropdown-trigger {
opacity: 1;
}
}
}
.dropdown-trigger {
opacity: 1;
}
}
a:hover {
background: transparent;
}
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
}
span.list-menu-link, li > a {
padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
transition: all 0.2s ease;
.flip-list-move {
transition: transform $transition-duration;
}
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
.ghost {
background: $grey-200;
.icon {
height: 1rem;
vertical-align: middle;
padding-bottom: 4px;
padding-right: 0.5rem;
}
* {
opacity: 0;
}
}
&.router-link-exact-active {
color: $primary;
border-left: $vikunja-nav-selected-width solid $primary;
a:hover {
background: transparent;
}
.icon {
color: $primary;
}
}
span.list-menu-link, li > a {
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease;
&:hover {
border-left: $vikunja-nav-selected-width solid $primary;
}
}
}
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
.logo {
display: none;
.icon {
height: 1rem;
vertical-align: middle;
padding-right: 0.5rem;
&.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
cursor: grab;
}
@media screen and (max-width: $tablet) {
display: block;
}
}
}
&:hover .icon.handle {
opacity: 1;
}
&.namespaces-lists {
padding-top: math.div($navbar-padding, 2);
}
&.router-link-exact-active {
color: $primary;
border-left: $vikunja-nav-selected-width solid $primary;
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
.icon {
color: $primary;
}
}
.icon {
color: $grey-400 !important;
}
}
&:hover {
border-left: $vikunja-nav-selected-width solid $primary;
}
}
}
.top-menu {
margin-top: math.div($navbar-padding, 2);
.logo {
display: none;
.menu-list {
li {
font-weight: 500;
font-family: $vikunja-font;
}
@media screen and (max-width: $tablet) {
display: block;
}
}
span.list-menu-link, li > a {
padding-left: 2rem;
display: inline-block;
}
}
&.namespaces-lists {
padding-top: math.div($navbar-padding, 2);
}
}
}
&.loader-container.is-loading:after {
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
.icon {
color: $grey-400 !important;
}
}
.top-menu {
margin-top: math.div($navbar-padding, 2);
.menu-list {
li {
font-weight: 500;
font-family: $vikunja-font;
}
span.list-menu-link, li > a {
padding-left: 2rem;
display: inline-block;
.icon {
padding-bottom: .25rem;
}
}
}
}
}
}
.navbar {
.trigger-button {
cursor: pointer;
color: $grey-400;
padding: .5rem;
font-size: 1.25rem;
position: relative;
}
.trigger-button {
cursor: pointer;
color: $grey-400;
padding: .5rem;
font-size: 1.25rem;
position: relative;
}
> * > .trigger-button {
width: $navbar-icon-width;
}
> * > .trigger-button {
width: $navbar-icon-width;
}
.user {
display: flex;
align-items: center;
.user {
display: flex;
align-items: center;
span {
font-family: $vikunja-font;
}
span {
font-family: $vikunja-font;
}
.avatar {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
vertical-align: middle;
height: 40px;
}
.avatar {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
vertical-align: middle;
height: 40px;
}
.logout-icon {
color: $grey-900;
.logout-icon {
color: $grey-900;
.icon {
vertical-align: middle;
}
}
.icon {
vertical-align: middle;
}
}
.dropdown-trigger .button {
background: none;
.dropdown-trigger .button {
background: none;
&:focus:not(:active), &:active {
outline: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
}
}
&:focus:not(:active), &:active {
outline: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
}
}
}
.menu-hide-button, .menu-show-button {
display: none;
z-index: 31;
font-weight: bold;
font-size: 2rem;
color: $grey-400;
line-height: 1;
transition: all $transition;
display: none;
z-index: 31;
font-weight: bold;
font-size: 2rem;
color: $grey-400;
line-height: 1;
transition: all $transition;
&:hover, &:focus {
height: 1rem;
color: $grey-600;
}
&:hover, &:focus {
height: 1rem;
color: $grey-600;
}
}
.menu-show-button {
height: .75rem;
width: 2rem;
&:before, &:after {
display: block;
content: '';
@ -399,18 +434,18 @@
border-radius: $radius;
transition: all $transition;
}
&:before {
margin-bottom: .5rem;
}
&:after {
margin-top: .5rem;
}
&:hover, &:focus {
color: $grey-600;
&:before {
margin-bottom: .75rem;
}
@ -422,61 +457,61 @@
}
.menu-hide-button {
position: fixed;
position: fixed;
&:hover, &:focus {
color: $text;
}
&:hover, &:focus {
color: $text;
}
}
.navbar-brand .menu-show-button {
display: block;
display: block;
}
.mobile-overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(250, 250, 250, 0.8);
z-index: 5;
opacity: 0;
transition: all $transition;
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(250, 250, 250, 0.8);
z-index: 5;
opacity: 0;
transition: all $transition;
}
@media screen and (max-width: $tablet) {
.menu-hide-button {
display: block;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
.menu-hide-button {
display: block;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
.menu-show-button {
display: block;
margin-left: $hamburger-menu-icon-spacing;
}
.menu-show-button {
display: block;
margin-left: $hamburger-menu-icon-spacing;
}
.mobile-overlay {
display: block;
opacity: 1;
}
.mobile-overlay {
display: block;
opacity: 1;
}
.navbar.is-dark .navbar-brand > .navbar-item {
margin: 0 auto;
}
.navbar.is-dark .navbar-brand > .navbar-item {
margin: 0 auto;
}
}
.logout-icon {
margin-right: 0.85rem !important;
margin-right: 0.85rem !important;
}
.menu-bottom-link {
width: 100%;
color: $grey-300;
text-align: center;
display: block;
margin: 1rem 0;
font-size: .8rem;
width: 100%;
color: $grey-300;
text-align: center;
display: block;
margin: 1rem 0;
font-size: .8rem;
}

4
src/styles/theme/theme.scss
View file

@ -153,3 +153,7 @@ button.table {
.is-strikethrough {
text-decoration: line-through;
}
.is-touch .handle {
opacity: 1 !important;
}

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

@ -16,217 +16,165 @@
v-model="params"
/>
</div>
<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
<div
:key="`bucket${bucket.id}`"
class="bucket"
:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
v-for="bucket in buckets"
<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban kanban-bucket-container loader-container">
<draggable
v-model="buckets"
@start="() => dragBucket = true"
@end="updateBucketPosition"
group="buckets"
v-bind="dragOptions"
:disabled="!canWrite"
>
<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
<span
v-if="bucket.isDoneBucket"
class="icon is-small has-text-success mr-2"
v-tooltip="$t('list.kanban.doneBucketHint')"
<transition-group type="transition" :name="!dragBucket ? 'move-bucket': null" tag="div" class="kanban-bucket-container">
<div
:key="`bucket${bucket.id}`"
class="bucket"
:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
v-for="(bucket, k) in buckets"
>
<icon icon="check-double"/>
</span>
<h2
:ref="`bucket${bucket.id}title`"
@focusout="() => saveBucketTitle(bucket.id)"
@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
class="title input"
:contenteditable="canWrite && !collapsedBuckets[bucket.id]"
spellcheck="false">{{ bucket.title }}</h2>
<span
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
class="limit"
v-if="bucket.limit > 0">
{{ bucket.tasks.length }}/{{ bucket.limit }}
</span>
<dropdown
class="is-right options"
v-if="canWrite && !collapsedBuckets[bucket.id]"
trigger-icon="ellipsis-v"
@close="() => showSetLimitInput = false"
>
<a
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
<input
@change="() => setBucketLimit(bucket)"
@keyup.enter="() => setBucketLimit(bucket)"
@keyup.esc="() => showSetLimitInput = false"
class="input"
type="number"
min="0"
v-focus.always
v-model="bucket.limit"
/>
</div>
<div class="control">
<x-button
:disabled="bucket.limit < 0"
:icon="['far', 'save']"
:shadow="false"
/>
</div>
</div>
<template v-else>
{{
$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
}}
</template>
</a>
<a
@click.stop="toggleDoneBucket(bucket)"
class="dropdown-item"
v-tooltip="$t('list.kanban.doneBucketHintExtended')"
>
<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}"><icon
icon="check-double"/></span>
{{ $t('list.kanban.doneBucket') }}
</a>
<a
class="dropdown-item"
@click.stop="() => collapseBucket(bucket)"
>
{{ $t('list.kanban.collapse') }}
</a>
<a
:class="{'is-disabled': buckets.length <= 1}"
@click.stop="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
>
<span class="icon is-small"><icon icon="trash-alt"/></span>
{{ $t('misc.delete') }}
</a>
</dropdown>
</div>
<div :ref="`tasks-container${bucket.id}`" class="tasks">
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
:animation-duration="150"
:drop-placeholder="dropPlaceholderOptions"
:get-child-payload="getTaskPayload(bucket.id)"
:is="canWrite ? 'Container' : 'div'"
:should-accept-drop="() => shouldAcceptDrop(bucket)"
@drop="e => onDrop(bucket.id, e)"
drag-class="ghost-task"
drag-class-drop="ghost-task-drop"
drag-handle-selector=".task.draggable"
group-name="buckets"
>
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
:is="canWrite ? 'Draggable' : 'div'"
:key="`bucket${bucket.id}-task${task.id}`"
v-for="task in bucket.tasks"
>
<div
:class="{
'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
'draggable': !(taskService.loading || taskLoading) || !taskUpdating[task.id],
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
}"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@click.ctrl="() => markTaskAsDone(task)"
@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
@click.meta="() => markTaskAsDone(task)"
class="task loader-container draggable"
<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
<span
v-if="bucket.isDoneBucket"
class="icon is-small has-text-success mr-2"
v-tooltip="$t('list.kanban.doneBucketHint')"
>
<span class="task-id">
<span class="is-done" v-if="task.done">Done</span>
<template v-if="task.identifier === ''">
#{{ task.index }}
</template>
<template v-else>
{{ task.identifier }}
</template>
<icon icon="check-double"/>
</span>
<span
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="due-date"
v-if="task.dueDate > 0"
v-tooltip="formatDate(task.dueDate)">
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
<span>
{{ formatDateSince(task.dueDate) }}
</span>
</span>
<h3>{{ task.title }}</h3>
<progress
class="progress is-small"
v-if="task.percentDone > 0"
:value="task.percentDone * 100" max="100">
{{ task.percentDone * 100 }}%
</progress>
<div class="footer">
<span
:key="label.id"
:style="{'background': label.hexColor, 'color': label.textColor}"
class="tag"
v-for="label in task.labels">
<span>{{ label.title }}</span>
</span>
<priority-label :priority="task.priority"/>
<div class="assignees" v-if="task.assignees.length > 0">
<user
:avatar-size="24"
:key="task.id + 'assignee' + u.id"
:show-username="false"
:user="u"
v-for="u in task.assignees"
/>
<h2
:ref="`bucket${bucket.id}title`"
@focusout="() => saveBucketTitle(bucket.id)"
@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
@click="focusBucketTitle"
class="title input"
:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
spellcheck="false">{{ bucket.title }}</h2>
<span
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
class="limit"
v-if="bucket.limit > 0">
{{ bucket.tasks.length }}/{{ bucket.limit }}
</span>
<dropdown
class="is-right options"
v-if="canWrite && !collapsedBuckets[bucket.id]"
trigger-icon="ellipsis-v"
@close="() => showSetLimitInput = false"
>
<a
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
<input
@change="() => setBucketLimit(bucket)"
@keyup.enter="() => setBucketLimit(bucket)"
@keyup.esc="() => showSetLimitInput = false"
class="input"
type="number"
min="0"
v-focus.always
v-model="bucket.limit"
/>
</div>
<div class="control">
<x-button
:disabled="bucket.limit < 0"
:icon="['far', 'save']"
:shadow="false"
/>
</div>
</div>
<span class="icon" v-if="task.attachments.length > 0">
<icon icon="paperclip"/>
<template v-else>
{{
$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
}}
</template>
</a>
<a
@click.stop="toggleDoneBucket(bucket)"
class="dropdown-item"
v-tooltip="$t('list.kanban.doneBucketHintExtended')"
>
<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
<icon icon="check-double"/>
</span>
<span v-if="task.description" class="icon">
<icon icon="align-left"/>
{{ $t('list.kanban.doneBucket') }}
</a>
<a
class="dropdown-item"
@click.stop="() => collapseBucket(bucket)"
>
{{ $t('list.kanban.collapse') }}
</a>
<a
:class="{'is-disabled': buckets.length <= 1}"
@click.stop="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
>
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
</div>
</div>
</component>
</component>
</div>
<div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control" :class="{'is-loading': taskService.loading || loading}">
<input
class="input"
:disabled="taskService.loading || loading"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
:placeholder="$t('list.kanban.addTaskPlaceholder')"
type="text"
v-focus.always
v-model="newTaskText"
/>
{{ $t('misc.delete') }}
</a>
</dropdown>
</div>
<div :ref="`tasks-container${bucket.id}`" class="tasks">
<draggable
v-model="bucket.tasks"
@start="() => drag = true"
@end="updateTaskPosition"
:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
v-bind="dragOptions"
:disabled="!canWrite"
:data-bucket-index="k"
class="dropper"
>
<transition-group type="transition" :name="!drag ? 'move-card': null" tag="div">
<kanban-card
:key="`bucket${bucket.id}-task${task.id}`"
v-for="task in bucket.tasks"
:task="task"
/>
</transition-group>
</draggable>
</div>
<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"
@focusout="toggleShowNewTaskInput(bucket.id)"
@keyup.enter="addTaskToBucket(bucket.id)"
@keyup.esc="toggleShowNewTaskInput(bucket.id)"
:placeholder="$t('list.kanban.addTaskPlaceholder')"
type="text"
v-focus.always
v-model="newTaskText"
/>
</div>
<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
{{ $t('list.list.addTitleRequired') }}
</p>
</div>
<x-button
@click="toggleShowNewTaskInput(bucket.id)"
class="is-transparent is-fullwidth has-text-centered"
:shadow="false"
v-if="!showNewTaskInput[bucket.id]"
icon="plus"
type="secondary"
>
{{
bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
}}
</x-button>
</div>
<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
{{ $t('list.list.addTitleRequired') }}
</p>
</div>
<x-button
@click="toggleShowNewTaskInput(bucket.id)"
class="is-transparent is-fullwidth has-text-centered"
:shadow="false"
v-if="!showNewTaskInput[bucket.id]"
icon="plus"
type="secondary"
>
{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
</x-button>
</div>
</div>
</transition-group>
</draggable>
<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
<input
@ -276,50 +224,43 @@
</template>
<script>
import TaskService from '../../../services/task'
import BucketModel from '../../../models/bucket'
import {Container, Draggable} from 'vue-smooth-dnd'
import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
import User from '../../../components/misc/user'
import Labels from '../../../components/tasks/partials/labels'
import {filterObject} from '@/helpers/filterObject'
import {applyDrag} from '@/helpers/applyDrag'
import {mapState} from 'vuex'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import Dropdown from '@/components/misc/dropdown.vue'
import {playPop} from '@/helpers/playPop'
import createTask from '@/components/tasks/mixins/createTask'
import createTask from '../../../components/tasks/mixins/createTask'
import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
import draggable from 'vuedraggable'
import KanbanCard from '../../../components/tasks/partials/kanban-card'
export default {
name: 'Kanban',
components: {
KanbanCard,
Dropdown,
FilterPopup,
Container,
Draggable,
Labels,
User,
PriorityLabel,
draggable,
},
data() {
return {
taskService: TaskService,
dropPlaceholderOptions: {
className: 'drop-preview',
animationDuration: 150,
showOnTop: true,
drag: false,
dragBucket: false,
dragOptions: {
animation: 150,
ghostClass: 'ghost',
dragClass: 'task-dragging',
},
sourceBucket: 0,
showBucketDeleteModal: false,
bucketToDelete: 0,
bucketTitleEditable: false,
newTaskText: '',
showNewTaskInput: {},
@ -347,7 +288,6 @@ export default {
createTask,
],
created() {
this.taskService = new TaskService()
this.loadBuckets()
// Save the current list view to local storage
@ -357,14 +297,23 @@ export default {
watch: {
'$route.params.listId': 'loadBuckets',
},
computed: mapState({
buckets: state => state.kanban.buckets,
loadedListId: state => state.kanban.listId,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',
taskLoading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
canWrite: state => state.currentList.maxRight > Rights.READ,
list: state => state.currentList,
}),
computed: {
buckets: {
get() {
return this.$store.state.kanban.buckets
},
set(value) {
this.$store.commit('kanban/setBuckets', value)
},
},
...mapState({
loadedListId: state => state.kanban.listId,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',
taskLoading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
canWrite: state => state.currentList.maxRight > Rights.READ,
list: state => state.currentList,
}),
},
methods: {
loadBuckets() {
@ -412,76 +361,23 @@ export default {
this.error(e)
})
},
onDrop(bucketId, dropResult) {
updateTaskPosition(e) {
this.drag = false
// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
// While we could just pass the bucket index in through the function call, this would not give us the
// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
// of the drop target works all the time.
const bucketIndex = parseInt(e.to.parentNode.dataset.bucketIndex)
const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
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
if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
task.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
task.bucketId = newBucket.id
// FIXME: This is probably not the best solution and more of a naive brute-force approach
// Duplicate the buckets to avoid stuff moving around without noticing
const buckets = Object.assign({}, this.buckets)
// Get the index of the bucket and the bucket itself
const bucket = buckets[bucketIndex]
// Rebuild the tasks from the bucket, removing/adding the moved task
bucket.tasks = applyDrag(bucket.tasks, dropResult)
// Update the bucket in the list of all buckets
delete buckets[bucketIndex]
buckets[bucketIndex] = bucket
// Set the buckets, triggering a state update in vue
// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
// Not sure what to do about this.
// this.$store.commit('kanban/setBuckets', buckets)
}
if (dropResult.addedIndex !== null) {
const taskIndex = dropResult.addedIndex
const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
const task = this.buckets[bucketIndex].tasks[taskIndex]
this.$set(this.taskUpdating, task.id, true)
this.oneTaskUpdating = true
// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
if (taskBefore === null && taskAfter !== null) {
task.position = taskAfter.position / 2
}
// If there is no task after it, we just add 2^16 to the last position
if (taskBefore !== null && taskAfter === null) {
task.position = taskBefore.position + Math.pow(2, 16)
}
// If we have both a task before and after it, we acually calculate the position
if (taskAfter !== null && taskBefore !== null) {
task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
}
task.bucketId = bucketId
this.$store.dispatch('tasks/update', task)
.catch(e => {
this.error(e)
})
.finally(() => {
this.$set(this.taskUpdating, task.id, false)
this.oneTaskUpdating = false
})
}
},
markTaskAsDone(task) {
this.oneTaskUpdating = true
this.$set(this.taskUpdating, task.id, true)
task.done = !task.done
this.$store.dispatch('tasks/update', task)
.then(() => {
if (task.done) {
playPop()
}
})
.catch(e => {
this.error(e)
})
@ -490,13 +386,6 @@ export default {
this.oneTaskUpdating = false
})
},
getTaskPayload(bucketId) {
return index => {
const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
this.sourceBucket = bucket.id
return bucket.tasks[index]
}
},
toggleShowNewTaskInput(bucket) {
this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
},
@ -567,7 +456,13 @@ export default {
this.showBucketDeleteModal = false
})
},
focusBucketTitle(e) {
// This little helper allows us to drag a bucket around at the title without focusing on it right away.
this.bucketTitleEditable = true
this.$nextTick(() => e.target.focus())
},
saveBucketTitle(bucketId) {
this.bucketTitleEditable = false
const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
const bucketTitle = bucketTitleElement.textContent
const bucket = new BucketModel({
@ -604,6 +499,20 @@ export default {
this.error(e)
})
},
updateBucketPosition(e) {
this.dragBucket = false
const bucket = this.buckets[e.newIndex]
const bucketBefore = this.buckets[e.newIndex - 1] ?? null
const bucketAfter = this.buckets[e.newIndex + 1] ?? null
bucket.position = calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null)
this.$store.dispatch('kanban/updateBucket', bucket)
.catch(e => {
this.error(e)
})
},
setBucketLimit(bucket) {
if (bucket.limit < 0) {
return

89
src/views/list/views/List.vue
View file

@ -21,7 +21,7 @@
v-model="searchTerm"
/>
<span class="icon is-left">
<icon icon="search" />
<icon icon="search"/>
</span>
</div>
<div class="control">
@ -63,16 +63,15 @@
<add-task
@taskAdded="updateTaskList"
ref="newTaskInput"
:default-position="firstNewPosition"
/>
</template>
<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
{{ $t('list.list.empty') }}
<a @click="focusNewTaskInput()">
{{ $t('list.list.newTaskCta') }}
</a>
</nothing>
<div class="tasks-container">
@ -81,23 +80,35 @@
class="tasks mt-0"
v-if="tasks && tasks.length > 0"
>
<single-task-in-list
:show-list-color="false"
:disabled="!canWrite"
:key="t.id"
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
v-for="t in tasks"
<draggable
v-model="tasks"
group="tasks"
@start="() => drag = true"
@end="saveTaskPosition"
v-bind="dragOptions"
handle=".handle"
>
<div
@click="editTask(t.id)"
class="icon settings"
v-if="!list.isArchived && canWrite"
<single-task-in-list
:show-list-color="false"
:disabled="!canWrite"
:key="t.id"
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
v-for="t in tasks"
>
<icon icon="pencil-alt" />
</div>
</single-task-in-list>
<span class="icon handle">
<icon icon="grip-lines"/>
</span>
<div
@click="editTask(t.id)"
class="icon settings"
v-if="!list.isArchived && canWrite"
>
<icon icon="pencil-alt"/>
</div>
</single-task-in-list>
</draggable>
</div>
<card
v-if="isTaskEdit"
@ -150,7 +161,7 @@
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal">
<router-view />
<router-view/>
</transition>
</div>
</template>
@ -163,14 +174,17 @@ import EditTask from '../../../components/tasks/edit-task'
import AddTask from '../../../components/tasks/add-task'
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
import taskList from '../../../components/tasks/mixins/taskList'
import { saveListView } from '@/helpers/saveListView'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import { mapState } from 'vuex'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import { HAS_TASKS } from '@/store/mutation-types'
import {HAS_TASKS} from '@/store/mutation-types'
import Nothing from '@/components/misc/nothing.vue'
import createTask from '@/components/tasks/mixins/createTask'
import {mapState} from 'vuex'
import draggable from 'vuedraggable'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
export default {
name: 'List',
data() {
@ -179,6 +193,12 @@ export default {
isTaskEdit: false,
taskEditTask: TaskModel,
ctaVisible: false,
drag: false,
dragOptions: {
animation: 100,
ghostClass: 'ghost',
},
}
},
mixins: [
@ -191,6 +211,7 @@ export default {
SingleTaskInList,
EditTask,
AddTask,
draggable,
},
created() {
this.taskService = new TaskService()
@ -199,10 +220,19 @@ export default {
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
computed: mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
list: state => state.currentList,
}),
computed: {
firstNewPosition() {
if (this.tasks.length === 0) {
return 0
}
return calculateItemPosition(null, this.tasks[0].position)
},
...mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
list: state => state.currentList,
}),
},
mounted() {
this.$nextTick(() => (this.ctaVisible = true))
},
@ -217,8 +247,11 @@ export default {
this.$refs.newTaskInput.$refs.newTaskInput.focus()
},
updateTaskList(task) {
this.tasks.push(task)
this.sortTasks()
const tasks = [
task,
...this.tasks,
]
this.tasks = tasks
this.$store.commit(HAS_TASKS, true)
},
editTask(id) {

4
src/views/namespaces/ListNamespaces.vue
View file

@ -90,6 +90,10 @@ export default {
computed: mapState({
namespaces(state) {
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
// return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived).map(n => {
// n.lists = n.lists.filter(l => !l.isArchived)
// return n
// })
},
loading: LOADING,
}),

34
yarn.lock
View file

@ -2,6 +2,11 @@
# yarn lockfile v1
"@4tw/cypress-drag-drop@^1.8.0":
version "1.8.0"
resolved "https://registry.yarnpkg.com/@4tw/cypress-drag-drop/-/cypress-drag-drop-1.8.0.tgz#f2990a414b18445cc117540ba6aba6994ecdd0e8"
integrity sha512-hPg9JvG3f+rzunVj6cZjgHaNtZ8JMbHBwD00PZjyl6/ysqyZzeR74b8yWUF0zohWcCG9bHVu666EhotOiIKhZw==
"@babel/code-frame@7.12.11":
version "7.12.11"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@ -5013,6 +5018,11 @@ is-stream@^2.0.0:
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
is-touch-device@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-touch-device/-/is-touch-device-1.0.1.tgz#9a2fd59f689e9a9bf6ae9a86924c4ba805a42eab"
integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
is-typedarray@^1.0.0, is-typedarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@ -7202,11 +7212,6 @@ slice-ansi@^4.0.0:
astral-regex "^2.0.0"
is-fullwidth-code-point "^3.0.0"
smooth-dnd@0.12.1:
version "0.12.1"
resolved "https://registry.yarnpkg.com/smooth-dnd/-/smooth-dnd-0.12.1.tgz#cdb44c972355659e32770368b29b6a80e0ed96f1"
integrity sha512-Dndj/MOG7VP83mvzfGCLGzV2HuK1lWachMtWl/Iuk6zV7noDycIBnflwaPuDzoaapEl3Pc4+ybJArkkx9sxPZg==
snake-case@3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@ -7245,6 +7250,11 @@ snapdragon@^0.8.1:
source-map-resolve "^0.5.0"
use "^3.1.0"
sortablejs@1.10.2:
version "1.10.2"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
source-map-js@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@ -8144,13 +8154,6 @@ vue-shortkey@3.1.7:
custom-event-polyfill "^1.0.7"
element-matches "^0.1.2"
vue-smooth-dnd@0.8.1:
version "0.8.1"
resolved "https://registry.yarnpkg.com/vue-smooth-dnd/-/vue-smooth-dnd-0.8.1.tgz#b1c584cfe49b830a402548b4bf08f00f68f430e5"
integrity sha512-eZVVPTwz4A1cs0+CjXx/ihV+gAl3QBoWQnU6+23Gp59t0WBU99z7ducBQ4FvjBamqOlg8SDOE5eFHQedxwB4Wg==
dependencies:
smooth-dnd "0.12.1"
vue-template-compiler@2.6.14:
version "2.6.14"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
@ -8169,6 +8172,13 @@ vue@2.6.14:
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
vuedraggable@^2.24.3:
version "2.24.3"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
dependencies:
sortablejs "1.10.2"
vuex@3.6.2:
version "3.6.2"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"