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

Custom backgrounds for lists (#144)

Browse source 
Make backgrounds list responsive

Show initial collection of backgrounds

Remove test data

Fix "backgroundInformation is null" when navigating

Fix kanban height

Remove debug log

Move list title to top header

Add styling for title in top header

Set the current list (and background) when loading settings

Only load the background if it changed

Make task detail view look good again

Fix bottom spacing

Make list and table view look good again

Make pages with background at least 100vh

Fix kanban height

Make extra buttons look good again

Move list title and view-switcher in one row

Add styling for backgrounds

Set background globally

Add getting list background and putting it in vuex

Add setting list background

Move list background setting to seperate list

Add search timeout to not search on every keypress

Add getting thumbnails through api

Add basic search for unsplash backgrounds

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/144
This commit is contained in:
konrad 2020-05-31 19:17:10 +00:00
parent 7fc0756b01
commit 4b3f92ae34
27 changed files with 513 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/App.vue
View file

@ -3,13 +3,27 @@
<div v-if="online">
<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
<div class="offline" style="height: 0;width: 0;"></div>
<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation"
v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
<nav
class="navbar main-theme is-fixed-top"
:class="{'has-background': background}"
role="navigation"
aria-label="main navigation"
v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
<div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo">
<img src="/images/logo-full.svg" alt="Vikunja"/>
</router-link>
</div>
<div class="list-title" v-if="currentList.id">
<h1
class="title"
:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
{{ currentList.title === '' ? 'Loading...': currentList.title}}
</h1>
<router-link :to="{ name: 'editList', params: { id: currentList.id } }" class="icon">
<icon icon="cog" size="2x"/>
</router-link>
</div>
<div class="navbar-end">
<div v-if="updateAvailable" class="update-notification">
<p>There is an update for Vikunja available!</p>
@ -49,7 +63,11 @@
<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
<icon icon="times"></icon>
</a>
<div class="app-container">
<div
class="app-container"
:class="{'has-background': background}"
:style="{'background-image': `url(${background})`}"
>
<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
<div class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo">
@ -141,7 +159,7 @@
<div class="more-container" :key="n.id + 'child'">
<ul class="menu-list can-be-hidden" >
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'list.index', params: { listId: l.id} }" :class="{'router-link-exact-active': currentList === l.id}">
<router-link :to="{ name: 'list.index', params: { listId: l.id} }" :class="{'router-link-exact-active': currentList.id === l.id}">
<span class="name">
<span class="color-bubble" v-if="l.hexColor !== ''" :style="{ backgroundColor: l.hexColor }"></span>
{{l.title}}
@ -316,6 +334,7 @@
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
},
currentList: CURRENT_LIST,
background: 'background',
}),
methods: {
logout() {
@ -351,7 +370,7 @@
this.$route.name === 'migrate.wunderlist' ||
this.$route.name === 'userSettings'
) {
this.$store.commit(CURRENT_LIST, 0)
this.$store.commit(CURRENT_LIST, {})
}
},
showRefreshUI(e) {