From de8fd91cbbf9a9267182eeaa4b53fff2bef1ced0 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 14:09:52 +0200 Subject: [PATCH 01/40] Started adding gantt view --- src/components/lists/ShowList.vue | 4 ++ src/components/tasks/Gantt.vue | 54 +++++++++++++++++ src/components/{lists => tasks}/ShowTasks.vue | 0 .../{lists => tasks}/ShowTasksInRange.vue | 0 src/components/tasks/gantt-component.vue | 59 +++++++++++++++++++ src/main.js | 2 +- src/router/index.js | 9 ++- 7 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 src/components/tasks/Gantt.vue rename src/components/{lists => tasks}/ShowTasks.vue (100%) rename src/components/{lists => tasks}/ShowTasksInRange.vue (100%) create mode 100644 src/components/tasks/gantt-component.vue diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index e366104e7..29fc1ecec 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -5,6 +5,10 @@

{{ list.title }}

+
+ List + Gantt +
diff --git a/src/components/tasks/Gantt.vue b/src/components/tasks/Gantt.vue new file mode 100644 index 000000000..95959d2ca --- /dev/null +++ b/src/components/tasks/Gantt.vue @@ -0,0 +1,54 @@ + + + \ No newline at end of file diff --git a/src/components/lists/ShowTasks.vue b/src/components/tasks/ShowTasks.vue similarity index 100% rename from src/components/lists/ShowTasks.vue rename to src/components/tasks/ShowTasks.vue diff --git a/src/components/lists/ShowTasksInRange.vue b/src/components/tasks/ShowTasksInRange.vue similarity index 100% rename from src/components/lists/ShowTasksInRange.vue rename to src/components/tasks/ShowTasksInRange.vue diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue new file mode 100644 index 000000000..be9743182 --- /dev/null +++ b/src/components/tasks/gantt-component.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e0e49f1f7..59fc0de5b 100644 --- a/src/main.js +++ b/src/main.js @@ -8,7 +8,7 @@ import Modal from './components/modal/Modal' Vue.component('modal', Modal) // Register the task overview component -import TaskOverview from './components/lists/ShowTasks' +import TaskOverview from './components/tasks/ShowTasks' Vue.component('TaskOverview', TaskOverview) // Add CSS diff --git a/src/router/index.js b/src/router/index.js index 6fd237c33..3ac52c1a3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,7 +11,7 @@ import GetPasswordResetComponent from '@/components/user/RequestPasswordReset' import ShowListComponent from '@/components/lists/ShowList' import NewListComponent from '@/components/lists/NewList' import EditListComponent from '@/components/lists/EditList' -import ShowTasksInRangeComponent from '@/components/lists/ShowTasksInRange' +import ShowTasksInRangeComponent from '@/components/tasks/ShowTasksInRange' // Namespace Handling import NewNamespaceComponent from '@/components/namespaces/NewNamespace' import EditNamespaceComponent from '@/components/namespaces/EditNamespace' @@ -21,6 +21,8 @@ import EditTeamComponent from '@/components/teams/EditTeam' import NewTeamComponent from '@/components/teams/NewTeam' // Label Handling import ListLabelsComponent from '@/components/labels/ListLabels' +// Task Handling +import GanttComponent from '@/components/tasks/Gantt' Vue.use(Router) @@ -62,6 +64,11 @@ export default new Router({ name: 'editList', component: EditListComponent }, + { + path: '/list/:id/gantt', + name: 'listGantt', + component: GanttComponent, + }, { path: '/namespaces/:id/list', name: 'newList', -- 2.45.1 From 38e3bed316d6dbe1dc4d11a9f7f90a8e0f3d516a Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 16:11:12 +0200 Subject: [PATCH 02/40] Added tasks & styling --- src/components/tasks/Gantt.vue | 9 ++- src/components/tasks/gantt-component.vue | 80 ++++++++++++++++-------- src/styles/gantt.scss | 65 +++++++++++++++++++ src/vikunja.scss | 1 + 4 files changed, 128 insertions(+), 27 deletions(-) create mode 100644 src/styles/gantt.scss diff --git a/src/components/tasks/Gantt.vue b/src/components/tasks/Gantt.vue index 95959d2ca..9ee3bd5d1 100644 --- a/src/components/tasks/Gantt.vue +++ b/src/components/tasks/Gantt.vue @@ -1,10 +1,13 @@ diff --git a/src/styles/gantt.scss b/src/styles/gantt.scss new file mode 100644 index 000000000..d4f2ca648 --- /dev/null +++ b/src/styles/gantt.scss @@ -0,0 +1,65 @@ +$gantt-border: 1px solid $grey-lighter; + +.gantt-chart { + border: $gantt-border; + overflow-x: auto; + + .dates { + display: flex; + text-align: center; + border-bottom: $gantt-border; + + .year { + border-right: $gantt-border; + + &:last-child { + border-right: none; + } + + .months { + display: flex; + border-top: $gantt-border; + + .month { + padding: 0.5em 0; + border-right: $gantt-border; + + &:last-child { + border-right: none; + } + + .days { + display: flex; + + .day { + padding: 0.5em; + } + } + } + } + } + } + + .tasks { + max-width: 100%; + margin: 0; + + .row { + background: lighten($grey, 50); + + &:nth-child(even) { + background: lighten($grey, 55); + } + + .task { + display: inline-block; + border: 2px solid $primary; + background: lighten($primary, 40); + font-size: 0.85em; + margin: 0.5em; + border-radius: 6px; + padding: 0.25em 0.5em; + } + } + } +} \ No newline at end of file diff --git a/src/vikunja.scss b/src/vikunja.scss index 3a7658873..21ce6aa53 100644 --- a/src/vikunja.scss +++ b/src/vikunja.scss @@ -8,5 +8,6 @@ @import 'styles/fancycheckbox'; @import 'styles/tooltip'; +@import 'styles/gantt'; @import 'styles/multiselect'; \ No newline at end of file -- 2.45.1 From 12210136c7e7096c9b789dcb87d9da94c693d5cb Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 17:00:45 +0200 Subject: [PATCH 03/40] Added tasks filtering --- src/components/tasks/gantt-component.vue | 33 +++++++++++++++++++----- src/styles/gantt.scss | 7 ++++- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 8e6c76292..ef0a6c08b 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -1,5 +1,5 @@ @@ -29,6 +42,7 @@ listService: ListService, tasks: [], listID: 0, + showTaskswithoutDates: false, } }, beforeMount() { diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 2a2dc6112..8e526a3b1 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -25,11 +25,13 @@ {{t.text}}
-
-
- {{t.text}} +
@@ -41,7 +43,11 @@ tasks: { type: Array, required: true, - } + }, + showTaskswithoutDates: { + type: Boolean, + default: false, + }, }, data() { return { diff --git a/src/styles/fancycheckbox.scss b/src/styles/fancycheckbox.scss index cd051fbc9..f12045cc7 100644 --- a/src/styles/fancycheckbox.scss +++ b/src/styles/fancycheckbox.scss @@ -5,6 +5,10 @@ padding-right: 5px; padding-top: 3px; + &.is-block { + margin: .5em .2em; + } + .check { cursor: pointer; position: relative; @@ -18,6 +22,11 @@ stroke: $primary; } + span { + font-size: 0.8em; + vertical-align: top; + } + svg { position: relative; z-index: 1; -- 2.45.1 From 340065bd1a493136017a97c1549c97386bbcf96a Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 18:23:06 +0200 Subject: [PATCH 08/40] fixed gantt url --- src/router/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router/index.js b/src/router/index.js index 3ac52c1a3..8aef4e09b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -65,7 +65,7 @@ export default new Router({ component: EditListComponent }, { - path: '/list/:id/gantt', + path: '/lists/:id/gantt', name: 'listGantt', component: GanttComponent, }, -- 2.45.1 From 014d50e3fb1ca98c070fca2ece56db42bc1ca58f Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 18:27:38 +0200 Subject: [PATCH 09/40] Added weekday --- src/components/tasks/gantt-component.vue | 7 ++++++- src/styles/gantt.scss | 10 +++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 8e526a3b1..f7141252e 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -12,7 +12,12 @@ :key="dk + 'day'" :style="{'width': dayWidth + 'px'}" :class="{'today': d.toDateString() === now.toDateString()}"> - {{d.getDate()}} + + {{d.getDate()}} + + + {{d.toLocaleString('en-us', { weekday: 'short' })}} + diff --git a/src/styles/gantt.scss b/src/styles/gantt.scss index fea3934f6..43717a3e0 100644 --- a/src/styles/gantt.scss +++ b/src/styles/gantt.scss @@ -27,7 +27,7 @@ $gantt-vertical-border-color: lighten($grey, 45); display: flex; .day { - padding: 0.5em; + padding: 0.5em 0; font-weight: normal; &.today { @@ -36,6 +36,14 @@ $gantt-vertical-border-color: lighten($grey, 45); border-radius: 5px 5px 0 0; font-weight: bold; } + + .theday{ + padding: 0 .5em; + } + + .weekday { + font-size: 0.8em; + } } } } -- 2.45.1 From a1430e857fdc5a0c6e49d0fcbd8099ec4617fb2d Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 19:47:29 +0200 Subject: [PATCH 10/40] Added dragging of tasks --- package.json | 3 ++- src/components/tasks/gantt-component.vue | 33 +++++++++++++++++++++--- src/styles/gantt.scss | 10 +++++-- yarn.lock | 5 ++++ 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index c6fd04e99..293c20c34 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "lodash": "^4.17.11", "v-tooltip": "^2.0.0-rc.33", "verte": "^0.0.10", - "vue": "^2.5.17" + "vue": "^2.5.17", + "vue-drag-resize": "^1.3.2" }, "devDependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.4", diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index f7141252e..e86597fd8 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -26,9 +26,25 @@
-
- {{t.text}} -
+ + {{t.text}} +
-- 2.45.1 From f35df71591f3f660027a9736ed9c64efb1422e32 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 21:34:04 +0200 Subject: [PATCH 14/40] Fixed dragging tasks which didn't had dates set before --- src/components/tasks/gantt-component.vue | 28 ++++++++++-------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index f4de6d23b..24ce22d57 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -151,11 +151,10 @@ parseTasks() { this.setDates() // The following three are split up in different functions to be able to call them independently - this.filterTask() + this.prepareTasks() this.sortTasks() - this.addTaskGanttAttributes() }, - filterTask() { + prepareTasks() { this.theTasks = this.tasks .filter(t => { if(t.startDate === null && !t.done) { @@ -163,18 +162,18 @@ } return t.startDate >= this.startDate }) + .map(t => { + return this.addGantAttributes(t) + }) }, - addTaskGanttAttributes() { - this.theTasks.map(t => { - t.endDate === null ? this.endDate : t.endDate - t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1 - t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1 - return t - }) + addGantAttributes(t) { + t.endDate === null ? this.endDate : t.endDate + t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1 + t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1 + return t }, sortTasks() { - this.theTasks - .sort(function(a,b) { + this.theTasks = this.theTasks.sort(function(a,b) { if (a.startDate < b.startDate) return -1 if (a.startDate > b.startDate) @@ -199,8 +198,6 @@ this.taskService.update(this.taskDragged) .then(r => { - this.taskDragged = r - // If the task didn't have dates before, we'll update the list if(didntHaveDates) { for (const t in this.tasksWithoutDates) { @@ -208,9 +205,8 @@ this.tasksWithoutDates.splice(t, 1) } } - this.theTasks.push(r) + this.theTasks.push(this.addGantAttributes(r)) this.sortTasks() - this.addTaskGanttAttributes() } message.success({message: 'The task was successfully updated.'}, this) -- 2.45.1 From 59bfacc7710647cb24454d91b98d4a9825f076a4 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 21:36:05 +0200 Subject: [PATCH 15/40] Fixed task sorting --- src/components/tasks/gantt-component.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 24ce22d57..80d5e5fcd 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -173,7 +173,7 @@ return t }, sortTasks() { - this.theTasks = this.theTasks.sort(function(a,b) { + this.theTasks.sort(function(a,b) { if (a.startDate < b.startDate) return -1 if (a.startDate > b.startDate) -- 2.45.1 From 2810618101e9be39a9d51d946cb512d268cd8aad Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 21:39:57 +0200 Subject: [PATCH 16/40] Fixed task sorting --- src/components/tasks/gantt-component.vue | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 80d5e5fcd..0a102a39c 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -150,9 +150,7 @@ }, parseTasks() { this.setDates() - // The following three are split up in different functions to be able to call them independently this.prepareTasks() - this.sortTasks() }, prepareTasks() { this.theTasks = this.tasks @@ -165,15 +163,7 @@ .map(t => { return this.addGantAttributes(t) }) - }, - addGantAttributes(t) { - t.endDate === null ? this.endDate : t.endDate - t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1 - t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1 - return t - }, - sortTasks() { - this.theTasks.sort(function(a,b) { + .sort(function(a,b) { if (a.startDate < b.startDate) return -1 if (a.startDate > b.startDate) @@ -181,6 +171,12 @@ return 0 }) }, + addGantAttributes(t) { + t.endDate === null ? this.endDate : t.endDate + t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1 + t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1 + return t + }, resizeTask(newRect) { let didntHaveDates = this.taskDragged.startDate === null ? true : false @@ -206,7 +202,6 @@ } } this.theTasks.push(this.addGantAttributes(r)) - this.sortTasks() } message.success({message: 'The task was successfully updated.'}, this) -- 2.45.1 From f65694370c34fef4910d520f7a4234759c1bf6e8 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 23:16:37 +0200 Subject: [PATCH 17/40] Moved show tasks to own component --- src/components/lists/ShowList.vue | 541 +---------------------- src/components/tasks/ShowListTasks.vue | 579 +++++++++++++++++++++++++ 2 files changed, 587 insertions(+), 533 deletions(-) create mode 100644 src/components/tasks/ShowListTasks.vue diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index a42c28f70..fe401471f 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -10,362 +10,31 @@ Gantt
- -
-

- - - - -

-

- -

-
- -
-
-
-
- -
- -
-
-
-
-
-
-
-

- Edit Task -

- - - - - -
-
-
-
-
- -
- -
-
-
- -
- -
-
- - Reminder Dates -
- - - -
- -
- -
- - -
-
- -
- -
-
- - -
-
- - -
-
-
- -
- -
-
- -
-
-
- -
-
-
-
- -
- -
-
- -
-
-
- -
- -
    -
  • - {{a.username}} - -
    • -
-
- -
-
- - - Oops! No user found. Consider changing the search query. - -
-
- - - - - -
-
- -
- -
- - - - -
-
- -
- -
-
- -
-
-
-
-
- -
-
- -
-
- - - -
-
-
-
-
-
+ \ No newline at end of file diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue new file mode 100644 index 000000000..bce7ce577 --- /dev/null +++ b/src/components/tasks/ShowListTasks.vue @@ -0,0 +1,579 @@ + + + \ No newline at end of file -- 2.45.1 From 430de1e855694d5040abb78aaa6682a95cac9c55 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 23:31:14 +0200 Subject: [PATCH 18/40] Further refactored list page --- src/components/lists/ShowList.vue | 20 ++++++++++----- src/components/tasks/Gantt.vue | 41 +++---------------------------- src/router/index.js | 8 +++--- 3 files changed, 21 insertions(+), 48 deletions(-) diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index fe401471f..c772c4fe8 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -6,22 +6,24 @@

{{ list.title }}

- List - Gantt + List + Gantt
- + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 8aef4e09b..cbd8964d4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -21,8 +21,6 @@ import EditTeamComponent from '@/components/teams/EditTeam' import NewTeamComponent from '@/components/teams/NewTeam' // Label Handling import ListLabelsComponent from '@/components/labels/ListLabels' -// Task Handling -import GanttComponent from '@/components/tasks/Gantt' Vue.use(Router) @@ -65,9 +63,9 @@ export default new Router({ component: EditListComponent }, { - path: '/lists/:id/gantt', - name: 'listGantt', - component: GanttComponent, + path: '/lists/:id/:type', + name: 'showListWithType', + component: ShowListComponent, }, { path: '/namespaces/:id/list', -- 2.45.1 From 81c0689853f7ef294ed24e7bea9579d47f6d9ee4 Mon Sep 17 00:00:00 2001 From: konrad Date: Sun, 28 Apr 2019 23:51:13 +0200 Subject: [PATCH 19/40] Updated todo --- todo.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/todo.md b/todo.md index e573cffa3..47979d1be 100644 --- a/todo.md +++ b/todo.md @@ -49,6 +49,19 @@ * [x] Overdue rot anzeigen * [x] Beim Team bearbeiten Nutzer suchen einbauen * [ ] Keyboard shortcuts +* [ ] Gantt chart + * [x] Basics + * [x] Add tasks without dates set + * [ ] Edit tasks with a kind of popup when clicking on them - needs refactoring edit task into an own component + * [ ] Add a new task with a button or so + * [ ] Be able to choose the range for the chart + * [ ] Show task priority + * [ ] Show task done or not done + * [ ] Colors - needs api change before + * [ ] More view modes + * [ ] Month: "The big picture" + * [ ] Day: 3-hour slices of a day + * [ ] When switching between views, should also narrow or wide the date range ## Funktionen aus der API -- 2.45.1 From 5148f37fb12a9749cfbead28981454baadad1cdb Mon Sep 17 00:00:00 2001 From: kolaente Date: Mon, 29 Apr 2019 09:40:18 +0200 Subject: [PATCH 20/40] Show done tasks in gantt --- src/components/tasks/gantt-component.vue | 5 +++-- src/main.js | 2 ++ src/styles/gantt.scss | 4 ++++ todo.md | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 0a102a39c..35432dc30 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -43,9 +43,10 @@ @resizestop="resizeTask" @dragstop="resizeTask" @clicked="taskDragged = t" + :class="{'done': t.done}" > - {{t.text}} - + {{t.text}} + @@ -83,10 +100,12 @@ import VueDragResize from 'vue-drag-resize' import TaskService from '../../services/task' import message from '../../message' + import EditTask from "./edit-task"; export default { name: 'GanttChart', components: { + EditTask, VueDragResize, }, props: { @@ -114,6 +133,7 @@ now: null, dayOffsetUntilToday: 0, isTaskEdit: false, + taskToEdit: null, } }, watch: { @@ -225,9 +245,8 @@ }, 100) }, editTask(task) { + this.taskToEdit = task this.isTaskEdit = true - // eslint-disable-next-line - console.log(task) }, }, } diff --git a/src/styles/gantt.scss b/src/styles/gantt.scss index 49d17f627..f404cb3bb 100644 --- a/src/styles/gantt.scss +++ b/src/styles/gantt.scss @@ -118,6 +118,18 @@ $gantt-vertical-border-color: lighten($grey, 45); } } } + + .taskedit{ + position: fixed; + min-height: 0; + top: 10vh; + right: 10vw; + + .card-content{ + max-height: 60vh; + overflow-y: auto; + } + } } .vdr.active::before { -- 2.45.1 From d4ab949f274768e291418b323b8d9561b1b3c23f Mon Sep 17 00:00:00 2001 From: konrad Date: Mon, 29 Apr 2019 17:27:14 +0200 Subject: [PATCH 28/40] Fixed task save --- src/components/tasks/edit-task.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue index 696b26dff..a2d4e8c5f 100644 --- a/src/components/tasks/edit-task.vue +++ b/src/components/tasks/edit-task.vue @@ -1,5 +1,5 @@ -
-
-

- Edit Task -

- - - - - -
-
-
- + +
+
+

+ Edit Task +

+ + + + + +
+
+
+ +
-
+
diff --git a/src/styles/general.scss b/src/styles/general.scss index 2f84630df..aeb4dd859 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -194,13 +194,6 @@ } } - .fade-enter-active, .fade-leave-active { - transition: opacity 150ms; - } - .fade-enter, .fade-leave-to { - opacity: 0; - } - .dropdown-trigger .button { background: none; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 4317efb12..1b846c026 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -280,4 +280,11 @@ h1,h2,h3,h4,h5,h6{ background: lighten($primary, 5); } } +} + +.fade-enter-active, .fade-leave-active { + transition: opacity 150ms; +} +.fade-enter, .fade-leave-to { + opacity: 0; } \ No newline at end of file -- 2.45.1 From ff5ec5893440d1dca241c8fe6be7a4a157421931 Mon Sep 17 00:00:00 2001 From: konrad Date: Mon, 29 Apr 2019 18:19:03 +0200 Subject: [PATCH 31/40] Added create new task button --- src/components/tasks/gantt-component.vue | 54 +++++++++++++++++++++++- src/styles/_variables.scss | 1 + src/styles/gantt.scss | 15 +++++++ src/styles/theme.scss | 7 --- src/styles/transitions.scss | 13 ++++++ src/vikunja.scss | 1 + todo.md | 2 +- 7 files changed, 84 insertions(+), 9 deletions(-) create mode 100644 src/styles/transitions.scss diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 1f4d94daf..641ad544b 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -76,13 +76,32 @@
+
+ + + + +

Edit Task

- + @@ -103,6 +122,7 @@ import TaskService from '../../services/task' import message from '../../message' import EditTask from "./edit-task"; + import TaskModel from "../../models/task"; export default { name: 'GanttChart', @@ -136,6 +156,8 @@ dayOffsetUntilToday: 0, isTaskEdit: false, taskToEdit: null, + newTaskTitle: '', + newTaskFieldActive: false, } }, watch: { @@ -250,6 +272,36 @@ this.taskToEdit = task this.isTaskEdit = true }, + showCreateNewTask() { + if(!this.newTaskFieldActive) { + // Timeout to not send the form if the field isn't even shown + setTimeout(() => { + this.newTaskFieldActive = true + this.$nextTick(() => this.$refs.newTaskTitleField.focus()) + }, 100) + } + }, + hideCrateNewTask() { + if(this.newTaskTitle === '') { + this.$nextTick(() => this.newTaskFieldActive = false) + } + }, + addNewTask() { + if (!this.newTaskFieldActive) { + return + } + let task = new TaskModel({text: this.newTaskTitle}) + this.taskService.create(task) + .then(r => { + this.theTasks.push(this.addGantAttributes(r)) + this.newTaskTitle = '' + this.hideCrateNewTask() + message.success({message: 'The task was successfully created.'}, this) + }) + .catch(e => { + message.error(e, this) + }) + }, }, } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 897bd2617..89f9f3a55 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -17,6 +17,7 @@ $dropdown-content-shadow: none; $navbar-dropdown-boxed-shadow: $dropdown-content-shadow; $bulmaswatch-import-font: false !default; $light-background: #F1F5F8; +$transition-duration: 100ms; $vikunja-font: 'Quicksand', sans-serif; $vikunja-light-text: darken(#fff, 10%); diff --git a/src/styles/gantt.scss b/src/styles/gantt.scss index 2482d93c0..d468749fb 100644 --- a/src/styles/gantt.scss +++ b/src/styles/gantt.scss @@ -135,6 +135,21 @@ $gantt-vertical-border-color: lighten($grey, 45); overflow-y: auto; } } + + .add-new-task{ + padding: 1em .7em .4em .7em; + display: flex; + max-width: 450px; + + .input { + margin-right: .7em; + font-size: .8em; + } + + .button { + font-size: .68em; + } + } } .vdr.active::before { diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 1b846c026..4afd5c735 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -281,10 +281,3 @@ h1,h2,h3,h4,h5,h6{ } } } - -.fade-enter-active, .fade-leave-active { - transition: opacity 150ms; -} -.fade-enter, .fade-leave-to { - opacity: 0; -} \ No newline at end of file diff --git a/src/styles/transitions.scss b/src/styles/transitions.scss new file mode 100644 index 000000000..6e53d81be --- /dev/null +++ b/src/styles/transitions.scss @@ -0,0 +1,13 @@ +.fade-enter-active, .fade-leave-active { + transition: opacity $transition-duration; +} +.fade-enter, .fade-leave-to { + opacity: 0; +} + +.width-enter-active, .width-leave-active { + transition: width $transition-duration; +} +.width-enter, .width-leave-to { + width: 0; +} \ No newline at end of file diff --git a/src/vikunja.scss b/src/vikunja.scss index c7f7eb39b..c30f9a124 100644 --- a/src/vikunja.scss +++ b/src/vikunja.scss @@ -1,6 +1,7 @@ @import 'styles/theme'; @import 'styles/scrollbars'; @import 'styles/general'; +@import 'styles/transitions'; @import 'styles/tasks'; @import 'styles/teams'; diff --git a/todo.md b/todo.md index 81367c525..fb09880fc 100644 --- a/todo.md +++ b/todo.md @@ -53,7 +53,7 @@ * [x] Basics * [x] Add tasks without dates set * [x] Edit tasks with a kind of popup when clicking on them - needs refactoring edit task into an own component - * [ ] Add a new task with a button or so + * [x] Add a new task with a button or so * [ ] Be able to choose the range for the chart * [ ] Show task priority * [x] Show task done or not done -- 2.45.1 From 128a7f8f2a96c5e3db5bd34f6fac6036f9755ce1 Mon Sep 17 00:00:00 2001 From: konrad Date: Mon, 29 Apr 2019 18:49:28 +0200 Subject: [PATCH 32/40] Pass the list id to the gantt chart --- src/components/lists/ShowList.vue | 2 +- src/components/tasks/Gantt.vue | 7 ++++--- src/components/tasks/gantt-component.vue | 18 ++++++++++-------- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue index 8cb49ff49..14ec3fa41 100644 --- a/src/components/lists/ShowList.vue +++ b/src/components/lists/ShowList.vue @@ -11,7 +11,7 @@
- + diff --git a/src/components/tasks/Gantt.vue b/src/components/tasks/Gantt.vue index 7a82c77bb..ea1cdb361 100644 --- a/src/components/tasks/Gantt.vue +++ b/src/components/tasks/Gantt.vue @@ -13,7 +13,7 @@ @@ -21,6 +21,7 @@