Move list view content to card
This commit is contained in:
parent
e0d120da5d
commit
cc05341b44
GPG Key ID:
F40E70337AB24C9B
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid $grey-200;
|
||||
border-bottom: 1px solid $grey-100;
|
||||
transition: background-color $transition;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-200;
|
||||
background-color: $grey-100;
|
||||
}
|
||||
|
||||
.tasktext,
|
||||
|
|
|
|||
|
|
@ -9,19 +9,6 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -51,101 +51,105 @@
|
|||
/>
|
||||
</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"
|
||||
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">
|
||||
<single-task-in-list
|
||||
:disabled="!canWrite"
|
||||
:key="t.id"
|
||||
:the-task="t"
|
||||
@taskUpdated="updateTasks"
|
||||
task-detail-route="task.detail"
|
||||
v-for="t in tasks"
|
||||
>
|
||||
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
|
||||
<icon icon="pencil-alt"/>
|
||||
</div>
|
||||
</single-task-in-list>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
|
||||
<single-task-in-list
|
||||
:disabled="!canWrite"
|
||||
:key="t.id"
|
||||
:the-task="t"
|
||||
@taskUpdated="updateTasks"
|
||||
task-detail-route="task.detail"
|
||||
v-for="t in tasks"
|
||||
>
|
||||
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
|
||||
<icon icon="pencil-alt"/>
|
||||
</div>
|
||||
</single-task-in-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isTaskEdit">
|
||||
<card class="taskedit mt-0" title="Edit Task" :has-close="true" @close="() => isTaskEdit = false" :shadow="false">
|
||||
<edit-task :task="taskEditTask"/>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isTaskEdit">
|
||||
<card class="taskedit" title="Edit Task" :has-close="true" @close="() => isTaskEdit = 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">…</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">…</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">
|
||||
|
|
|
|||
Reference in New Issue