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

Move all content to cards (#387)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/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/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>

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

@ -51,7 +51,8 @@
/>
</div>
<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
<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
@ -83,14 +84,15 @@
</p>
</div>
<p class="has-text-centered has-text-grey is-italic" v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
<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 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,17 +106,17 @@
</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"
class="pagination is-centered p-4"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
@ -146,6 +148,7 @@
</template>
</ul>
</nav>
</card>
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal">

6
src/views/list/views/Table.vue
View file

@ -41,7 +41,8 @@
/>
</div>
<table class="table is-hoverable is-fullwidth">
<card :padding="false" :has-content="false">
<table class="table is-hoverable is-fullwidth mb-0">
<thead>
<tr>
<th v-if="activeColumns.id">
@ -147,7 +148,7 @@
<nav
aria-label="pagination"
class="pagination is-centered"
class="pagination is-centered p-4"
role="navigation"
v-if="taskCollectionService.totalPages > 1">
<router-link
@ -179,6 +180,7 @@
</template>
</ul>
</nav>
</card>
<!-- This router view is used to show the task popup while keeping the table view itself -->
<transition name="modal">

22
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,17 +29,19 @@
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">
<card :padding="false" :has-content="false" v-if="tasks && tasks.length > 0">
<div class="tasks">
<single-task-in-list
:key="t.id"
class="task"
@ -48,6 +50,7 @@
: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) {