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

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

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

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

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

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

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

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

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

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

@ -5,28 +5,6 @@
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh; 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) { .pagination-link:not(.is-current) {
background: $light-background; background: $light-background;
} }
@ -54,10 +32,6 @@
} }
} }
.navbar.has-background {
background: $transparent-background-light;
}
.link-share-container.has-background .view { .link-share-container.has-background .view {
background: transparent; background: transparent;
border: none; border: none;

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

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

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

@ -1,6 +1,7 @@
<template> <template>
<div class="gantt-chart-container"> <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"> <fancycheckbox class="is-block" v-model="showTaskswithoutDates">
Show tasks which don't have dates set Show tasks which don't have dates set
</fancycheckbox> </fancycheckbox>
@ -56,6 +57,7 @@
<router-view/> <router-view/>
</transition> </transition>
</card>
</div> </div>
</template> </template>

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

@ -51,7 +51,8 @@
/> />
</div> </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"> <div class="field is-grouped">
<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded"> <p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
<input <input
@ -83,14 +84,15 @@
</p> </p>
</div> </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. This list is currently empty.
<a @click="$refs.newTaskInput.focus()">Create a new task.</a> <a @click="$refs.newTaskInput.focus()">Create a new task.</a>
</p> </p>
<div class="columns"> <div class="tasks-container">
<div class="column"> <div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
<div :class="{'short': isTaskEdit}" class="tasks" v-if="tasks && tasks.length > 0">
<single-task-in-list <single-task-in-list
:disabled="!canWrite" :disabled="!canWrite"
:key="t.id" :key="t.id"
@ -104,17 +106,17 @@
</div> </div>
</single-task-in-list> </single-task-in-list>
</div> </div>
</div> <card
<div class="column is-4" v-if="isTaskEdit"> v-if="isTaskEdit"
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"> class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false"
:shadow="false">
<edit-task :task="taskEditTask"/> <edit-task :task="taskEditTask"/>
</card> </card>
</div> </div>
</div>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="pagination is-centered" class="pagination is-centered p-4"
role="navigation" role="navigation"
v-if="taskCollectionService.totalPages > 1"> v-if="taskCollectionService.totalPages > 1">
<router-link <router-link
@ -146,6 +148,7 @@
</template> </template>
</ul> </ul>
</nav> </nav>
</card>
<!-- This router view is used to show the task popup while keeping the kanban board itself --> <!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal"> <transition name="modal">

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

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

22
src/views/tasks/ShowTasks.vue
View file

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