adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move all content to cards (#387) 

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#387
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-01-24 13:00:21 +00:00
parent e0d120da5d
commit 8828426c91
13 changed files with 277 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/integration/list/list.spec.js
View File

@ -156,7 +156,7 @@ describe('Lists', () => {
TaskFactory.create(1)
cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks')
cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('be.empty')
})
@ -164,7 +164,7 @@ describe('Lists', () => {
const now = new Date()
cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .months')
cy.get('.gantt-chart-container .gantt-chart .months')
.should('contain', format(now, 'MMMM'))
.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
})
@ -177,9 +177,9 @@ describe('Lists', () => {
})
cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks')
cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('not.be.empty')
cy.get('.gantt-chart-container .gantt-chart.box .tasks')
cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('contain', tasks[0].title)
})
@ -194,9 +194,9 @@ describe('Lists', () => {
.contains('Show tasks which don\'t have dates set')
.click()
cy.get('.gantt-chart-container .gantt-chart.box .tasks')
cy.get('.gantt-chart-container .gantt-chart .tasks')
.should('not.be.empty')
cy.get('.gantt-chart-container .gantt-chart.box .tasks .task.nodate')
cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
.should('exist')
})
@ -208,7 +208,7 @@ describe('Lists', () => {
})
cy.visit('/lists/1/gantt')
cy.get('.gantt-chart-container .gantt-chart.box .tasks .task')
cy.get('.gantt-chart-container .gantt-chart .tasks .task')
.first()
.trigger('mousedown', {which: 1})
.trigger('mousemove', {clientX: 500, clientY: 0})

6
src/components/misc/card.vue
View File

@ -11,7 +11,7 @@
</a>
</header>
<div class="card-content" :class="{'p-0': !padding}">
<div class="content">
<div :class="{'content': hasContent}">
<slot></slot>
</div>
</div>
@ -42,6 +42,10 @@ export default {
type: Boolean,
default: true,
},
hasContent: {
type: Boolean,
default: true,
},
},
}
</script>

2
src/components/tasks/gantt-component.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="gantt-chart box">
<div class="gantt-chart">
<div class="filter-container">
<div class="items">
<x-button

6
src/styles/components/gantt.scss
View File

@ -6,8 +6,8 @@ $gantt-vertical-border-color: $grey-100;
}
.gantt-chart {
padding: 5px 0;
overflow-x: auto;
border-top: 1px solid $grey-200;
.dates {
display: flex;
@ -195,10 +195,6 @@ $gantt-vertical-border-color: $grey-100;
font-size: .68rem;
}
}
.filter-container {
margin-top: -136px;
}
}
.gantt-options {

2
src/styles/components/kanban.scss
View File

@ -81,7 +81,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
font-size: .85rem;
word-break: break-word;
}
.progress {
margin: 8px 0 0 0;
width: 100%;

2
src/styles/components/list.scss
View File

@ -144,7 +144,7 @@
.link-share-container .gantt-chart-container .filter-container,
.gantt-chart-container .filter-container {
margin-top: -136px;
margin-top: calc(-138px - 2rem);
}
.link-share-container .list-view .filter-container {

25
src/styles/components/tasks.scss
View File

@ -1,3 +1,15 @@
.tasks-container {
display: flex;
.tasks {
width: 100%;
}
.taskedit {
width: 50%;
}
}
.tasks {
margin-top: 1rem;
padding: 0;
@ -20,14 +32,19 @@
.task {
display: flex;
flex-wrap: wrap;
padding: 0.5rem 1rem;
border-bottom: 1px solid $grey-200;
padding: 0.5rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
margin: 0 .5rem;
border-radius: $radius;
&:last-child {
margin-bottom: .5rem;
}
&:hover {
background-color: $grey-200;
background-color: $grey-100;
}
.tasktext,
@ -112,6 +129,7 @@
.fancycheckbox {
height: 18px;
padding-top: 0;
padding-right: .5rem;
span {
display: none;
@ -300,7 +318,6 @@
}
.is-max-width-desktop .tasks .task {
width: 100%;
max-width: $desktop;
}

26
src/styles/theme/background.scss
View File

@ -5,28 +5,6 @@
background-attachment: fixed;
min-height: 100vh;
.namespace-container {
background: $transparent-background-light;
}
.tasks {
background: $transparent-background-light;
border-radius: $radius;
.task:first-child {
border-radius: $radius $radius 0 0;
}
.task:last-child {
border-radius: 0 0 $radius $radius;
}
}
.table-view .table {
background: $transparent-background-light;
border-radius: $radius;
}
.pagination-link:not(.is-current) {
background: $light-background;
}
@ -54,10 +32,6 @@
}
}
.navbar.has-background {
background: $transparent-background-light;
}
.link-share-container.has-background .view {
background: transparent;
border: none;

1
src/styles/theme/variables/variables.scss
View File

@ -19,7 +19,6 @@ $bulmaswatch-import-font: false !default;
$light-background: $grey-100;
$transition-duration: 100ms;
$flash-background-duration: 750ms;
$transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: $grey-100;

4
src/views/list/views/Gantt.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="gantt-chart-container">
<div class="gantt-options">
<card :padding="false" class="has-overflow">
<div class="gantt-options p-4">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
Show tasks which don't have dates set
</fancycheckbox>
@ -56,6 +57,7 @@
<router-view/>
</transition>
</card>
</div>
</template>

147
src/views/list/views/List.vue
View File

@ -51,46 +51,48 @@
/>
</div>
<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
<div class="field is-grouped">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
<input
:class="{ 'disabled': taskService.loading}"
@keyup.enter="addTask()"
class="input"
placeholder="Add a new task..."
type="text"
v-focus
v-model="newTaskText"
ref="newTaskInput"
/>
<span class="icon is-small is-left">
<card :padding="false" :has-content="false">
<div class="field task-add p-4 mb-0" v-if="!list.isArchived && canWrite && list.id > 0">
<div class="field is-grouped">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
<input
:class="{ 'disabled': taskService.loading}"
@keyup.enter="addTask()"
class="input"
placeholder="Add a new task..."
type="text"
v-focus
v-model="newTaskText"
ref="newTaskInput"
/>
<span class="icon is-small is-left">
<icon icon="tasks"/>
</span>
</p>
<p class="control">
<x-button
:disabled="newTaskText.length === 0"
@click="addTask()"
icon="plus"
>
Add
</x-button>
</p>
<p class="control">
<x-button
:disabled="newTaskText.length === 0"
@click="addTask()"
icon="plus"
>
Add
</x-button>
</p>
</div>
<p class="help is-danger" v-if="showError && newTaskText === ''">
Please specify a list title.
</p>
</div>
<p class="help is-danger" v-if="showError && newTaskText === ''">
Please specify a list title.
<p
class="has-text-centered has-text-grey is-italic p-4 mb-4"
v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
This list is currently empty.
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
</p>
</div>
<p class="has-text-centered has-text-grey is-italic" v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
This list is currently empty.
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
</p>
<div class="columns">
<div class="column">
<div :class="{'short': isTaskEdit}" class="tasks" v-if="tasks && tasks.length > 0">
<div class="tasks-container">
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
<single-task-in-list
:disabled="!canWrite"
:key="t.id"
@ -104,48 +106,49 @@
</div>
</single-task-in-list>
</div>
</div>
<div class="column is-4" v-if="isTaskEdit">
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false">
<card
v-if="isTaskEdit"
class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"
:shadow="false">
<edit-task :task="taskEditTask"/>
</card>
</div>
</div>
<nav
aria-label="pagination"
class="pagination is-centered"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1)"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1)"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
<template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number)"
class="pagination-link">
{{ p.number }}
</router-link>
</li>
</template>
</ul>
</nav>
<nav
aria-label="pagination"
class="pagination is-centered p-4"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1)"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1)"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
<template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number)"
class="pagination-link">
{{ p.number }}
</router-link>
</li>
</template>
</ul>
</nav>
</card>
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal">

276
src/views/list/views/Table.vue
View File

@ -41,144 +41,146 @@
/>
</div>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th v-if="activeColumns.id">
#
<sort :order="sortBy.id" @click="sort('id')"/>
</th>
<th v-if="activeColumns.done">
Done
<sort :order="sortBy.done" @click="sort('done')"/>
</th>
<th v-if="activeColumns.title">
Name
<sort :order="sortBy.title" @click="sort('title')"/>
</th>
<th v-if="activeColumns.priority">
Priority
<sort :order="sortBy.priority" @click="sort('priority')"/>
</th>
<th v-if="activeColumns.labels">
Labels
</th>
<th v-if="activeColumns.assignees">
Assignees
</th>
<th v-if="activeColumns.dueDate">
Due&nbsp;Date
<sort :order="sortBy.due_date" @click="sort('due_date')"/>
</th>
<th v-if="activeColumns.startDate">
Start&nbsp;Date
<sort :order="sortBy.start_date" @click="sort('start_date')"/>
</th>
<th v-if="activeColumns.endDate">
End&nbsp;Date
<sort :order="sortBy.end_date" @click="sort('end_date')"/>
</th>
<th v-if="activeColumns.percentDone">
%&nbsp;Done
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
</th>
<th v-if="activeColumns.created">
Created
<sort :order="sortBy.created" @click="sort('created')"/>
</th>
<th v-if="activeColumns.updated">
Updated
<sort :order="sortBy.updated" @click="sort('updated')"/>
</th>
<th v-if="activeColumns.createdBy">
Created&nbsp;By
</th>
</tr>
</thead>
<tbody>
<tr :key="t.id" v-for="t in tasks">
<td v-if="activeColumns.id">
<router-link :to="{name: 'task.detail', params: { id: t.id }}">
<template v-if="t.identifier === ''">
#{{ t.index }}
</template>
<template v-else>
{{ t.identifier }}
</template>
</router-link>
</td>
<td v-if="activeColumns.done">
<div class="is-done" v-if="t.done">Done</div>
</td>
<td v-if="activeColumns.title">
<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
</td>
<td v-if="activeColumns.priority">
<priority-label :priority="t.priority" :show-all="true"/>
</td>
<td v-if="activeColumns.labels">
<labels :labels="t.labels"/>
</td>
<td v-if="activeColumns.assignees">
<user
:avatar-size="27"
:is-inline="true"
:key="t.id + 'assignee' + a.id + i"
:show-username="false"
:user="a"
v-for="(a, i) in t.assignees"
/>
</td>
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
<date-table-cell :date="t.created" v-if="activeColumns.created"/>
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
<td v-if="activeColumns.createdBy">
<user
:avatar-size="27"
:show-username="false"
:user="t.createdBy"/>
</td>
</tr>
</tbody>
</table>
<nav
aria-label="pagination"
class="pagination is-centered"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1, 'table')"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1, 'table')"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
<template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number, 'table')"
class="pagination-link">
{{ p.number }}
<card :padding="false" :has-content="false">
<table class="table is-hoverable is-fullwidth mb-0">
<thead>
<tr>
<th v-if="activeColumns.id">
#
<sort :order="sortBy.id" @click="sort('id')"/>
</th>
<th v-if="activeColumns.done">
Done
<sort :order="sortBy.done" @click="sort('done')"/>
</th>
<th v-if="activeColumns.title">
Name
<sort :order="sortBy.title" @click="sort('title')"/>
</th>
<th v-if="activeColumns.priority">
Priority
<sort :order="sortBy.priority" @click="sort('priority')"/>
</th>
<th v-if="activeColumns.labels">
Labels
</th>
<th v-if="activeColumns.assignees">
Assignees
</th>
<th v-if="activeColumns.dueDate">
Due&nbsp;Date
<sort :order="sortBy.due_date" @click="sort('due_date')"/>
</th>
<th v-if="activeColumns.startDate">
Start&nbsp;Date
<sort :order="sortBy.start_date" @click="sort('start_date')"/>
</th>
<th v-if="activeColumns.endDate">
End&nbsp;Date
<sort :order="sortBy.end_date" @click="sort('end_date')"/>
</th>
<th v-if="activeColumns.percentDone">
%&nbsp;Done
<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
</th>
<th v-if="activeColumns.created">
Created
<sort :order="sortBy.created" @click="sort('created')"/>
</th>
<th v-if="activeColumns.updated">
Updated
<sort :order="sortBy.updated" @click="sort('updated')"/>
</th>
<th v-if="activeColumns.createdBy">
Created&nbsp;By
</th>
</tr>
</thead>
<tbody>
<tr :key="t.id" v-for="t in tasks">
<td v-if="activeColumns.id">
<router-link :to="{name: 'task.detail', params: { id: t.id }}">
<template v-if="t.identifier === ''">
#{{ t.index }}
</template>
<template v-else>
{{ t.identifier }}
</template>
</router-link>
</li>
</template>
</ul>
</nav>
</td>
<td v-if="activeColumns.done">
<div class="is-done" v-if="t.done">Done</div>
</td>
<td v-if="activeColumns.title">
<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
</td>
<td v-if="activeColumns.priority">
<priority-label :priority="t.priority" :show-all="true"/>
</td>
<td v-if="activeColumns.labels">
<labels :labels="t.labels"/>
</td>
<td v-if="activeColumns.assignees">
<user
:avatar-size="27"
:is-inline="true"
:key="t.id + 'assignee' + a.id + i"
:show-username="false"
:user="a"
v-for="(a, i) in t.assignees"
/>
</td>
<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
<date-table-cell :date="t.created" v-if="activeColumns.created"/>
<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
<td v-if="activeColumns.createdBy">
<user
:avatar-size="27"
:show-username="false"
:user="t.createdBy"/>
</td>
</tr>
</tbody>
</table>
<nav
aria-label="pagination"
class="pagination is-centered p-4"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
:disabled="currentPage === 1"
:to="getRouteForPagination(currentPage - 1, 'table')"
class="pagination-previous"
tag="button">
Previous
</router-link>
<router-link
:disabled="currentPage === taskCollectionService.totalPages"
:to="getRouteForPagination(currentPage + 1, 'table')"
class="pagination-next"
tag="button">
Next page
</router-link>
<ul class="pagination-list">
<template v-for="(p, i) in pages">
<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
<li :key="'page'+i" v-else>
<router-link
:aria-label="'Goto page ' + p.number"
:class="{'is-current': p.number === currentPage}"
:to="getRouteForPagination(p.number, 'table')"
class="pagination-link">
{{ p.number }}
</router-link>
</li>
</template>
</ul>
</nav>
</card>
<!-- This router view is used to show the task popup while keeping the table view itself -->
<transition name="modal">

38
src/views/tasks/ShowTasks.vue
View File

@ -9,7 +9,7 @@
Show tasks without dates
</fancycheckbox>
<h3 v-if="showAll && tasks.length > 0">Current tasks</h3>
<h3 v-else-if="!showAll">
<h3 v-else-if="!showAll" class="mb-2">
Tasks from
<flat-pickr
:class="{ 'disabled': taskService.loading}"
@ -29,25 +29,28 @@
v-model="cEndDate"
/>
</h3>
<div v-if="!showAll">
<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button>
<x-button type="secondary" @click="setDatesToNextWeek()" :shadow="false" class="mr-2">Next Week</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button>
<div v-if="!showAll" class="mb-4">
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">Today</x-button>
<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">Next Week</x-button>
<x-button type="secondary" @click="setDatesToNextMonth()">Next Month</x-button>
</div>
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0) && showNothingToDo">
<h3 class="nothing">Nothing to do - Have a nice day!</h3>
<img alt="" src="/images/cool.svg"/>
</template>
<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
<div class="tasks" v-if="tasks && tasks.length > 0">
<single-task-in-list
:key="t.id"
class="task"
v-for="t in tasks"
:show-list="true"
:the-task="t"
@taskUpdated="updateTasks"/>
</div>
<card :padding="false" :has-content="false" v-if="tasks && tasks.length > 0">
<div class="tasks">
<single-task-in-list
:key="t.id"
class="task"
v-for="t in tasks"
:show-list="true"
:the-task="t"
@taskUpdated="updateTasks"/>
</div>
</card>
</div>
</template>
<script>
@ -78,6 +81,8 @@ export default {
cStartDate: null,
cEndDate: null,
showNothingToDo: false,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
@ -98,6 +103,9 @@ export default {
this.cEndDate = this.endDate
this.loadPendingTasks()
},
mounted() {
setTimeout(() => this.showNothingToDo = true, 100)
},
watch: {
'$route': 'loadPendingTasks',
startDate(newVal) {