vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Move list title and view-switcher in one row

Browse Source
This commit is contained in:
kolaente 2020-05-30 00:08:42 +02:00
parent e328ebf0be
commit 0ccda59012
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 60 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/lists/ShowList.vue
View File

@ -3,22 +3,43 @@
class="loader-container"
:class="{ 'is-loading': listService.loading}"
>
<div class="content">
<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
<icon icon="cog" size="2x"/>
</router-link>
<h1 :style="{ 'opacity': list.title === '' ? '0': '1' }">{{ list.title === '' ? 'Loading...': list.title}}</h1>
<div class="notification is-warning" v-if="list.isArchived">
This list is archived.
It is not possible to create new or edit tasks or it.
<div class="list-header">
<div class="content">
<h1
:style="{ 'opacity': list.title === '' ? '0': '1' }">
{{ list.title === '' ? 'Loading...': list.title}}
</h1>
<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon">
<icon icon="cog" size="2x"/>
</router-link>
</div>
<div class="switch-view">
<router-link :to="{ name: 'list.list', params: { listId: listId } }" :class="{'is-active': $route.name === 'list.list'}">List</router-link>
<router-link :to="{ name: 'list.gantt', params: { listId: listId } }" :class="{'is-active': $route.name === 'list.gantt'}">Gantt</router-link>
<router-link :to="{ name: 'list.table', params: { listId: listId } }" :class="{'is-active': $route.name === 'list.table'}">Table</router-link>
<router-link :to="{ name: 'list.kanban', params: { listId: listId } }" :class="{'is-active': $route.name === 'list.kanban'}">Kanban</router-link>
<router-link
:to="{ name: 'list.list', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.list'}">
List
</router-link>
<router-link
:to="{ name: 'list.gantt', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.gantt'}">
Gantt
</router-link>
<router-link
:to="{ name: 'list.table', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.table'}">
Table
</router-link>
<router-link
:to="{ name: 'list.kanban', params: { listId: listId } }"
:class="{'is-active': $route.name === 'list.kanban'}">
Kanban
</router-link>
</div>
</div>
<div class="notification is-warning" v-if="list.isArchived">
This list is archived.
It is not possible to create new or edit tasks or it.
</div>
<router-view/>
</div>
@ -64,7 +85,7 @@
loadList() {
// Don't load the list if we either already loaded it or aren't dealing with a list at all currently
if(this.$route.params.listId === this.listLoaded || typeof this.$route.params.listId === 'undefined') {
if (this.$route.params.listId === this.listLoaded || typeof this.$route.params.listId === 'undefined') {
return
}

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

@ -61,3 +61,29 @@
}
}
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
.content {
display: flex;
align-items: center;
h1 {
margin: 0;
}
.icon {
color: $grey-dark;
margin-left: 1rem;
height: 1rem;
width: 1rem;
}
}
.switch-view {
margin-bottom: 1rem;
}
}

1
src/styles/components/switch-view.scss
View File

@ -1,7 +1,6 @@
.switch-view {
background: $white;
display: inline-block;
margin: 1em 0;
border-radius: $radius;
font-size: .8em;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);

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

@ -1,8 +1,3 @@
.settings{
float: right;
color: rgb(74, 74, 74);
}
.tasks {
margin-top: 1rem;
padding: 0;