feat: add fade in for background images

src/components/home/contentAuth.vue

@@ -4,10 +4,14 @@
 			<icon icon="times"/>
 		</a>
 		<div
-			:class="{'has-background': background}"
-			:style="{'background-image': background && `url(${background})`}"
+			:class="{'has-background': background || blurHash}"
+			:style="{'background-image': blurHash && `url(${blurHash})`}"
 			class="app-container"
 		>
+			<div
+				:class="{'is-visible': background}"
+				class="app-container-background"
+				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
 			<div
 				:class="[
@@ -53,6 +57,7 @@ import QuickActions from '@/components/quick-actions/quick-actions.vue'
 const store = useStore()
 
 const background = computed(() => store.state.background)
+const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
 
 function showKeyboardShortcuts() {
@@ -160,7 +165,8 @@ store.dispatch('labels/loadAllLabels')
 
 	.app-content {
 		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
+		z-index: 10;
+		position: relative;
 
 		@media screen and (max-width: $tablet) {
 			margin-left: 0;

src/store/index.js

@@ -2,6 +2,7 @@ import {createStore} from 'vuex'
 import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
 import {
 	BACKGROUND,
+	BLUR_HASH,
 	CURRENT_LIST,
 	HAS_TASKS,
 	KEYBOARD_SHORTCUTS_ACTIVE,
@@ -41,6 +42,7 @@ export const store = createStore({
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
+		blurHash: '',
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
@@ -87,6 +89,9 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
+		[BLUR_HASH](state, blurHash) {
+			state.blurHash = blurHash
+		},
 		vikunjaReady(state, ready) {
 			state.vikunjaReady = ready
 		},
@@ -97,6 +102,7 @@ export const store = createStore({
 			if (currentList === null) {
 				commit(CURRENT_LIST, {})
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 				return
 			}
 
@@ -131,7 +137,7 @@ export const store = createStore({
 					try {
 						const blurHash = await getBlobFromBlurHash(currentList.backgroundBlurHash)
 						if (blurHash) {
-							commit(BACKGROUND, window.URL.createObjectURL(blurHash))
+							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
 						}
 
 						const listService = new ListService()
@@ -145,6 +151,7 @@ export const store = createStore({
 
 			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
 				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
 			}
 
 			commit(CURRENT_LIST, currentList)

src/store/mutation-types.js

@@ -7,6 +7,7 @@ export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
 export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
 export const BACKGROUND = 'background'
+export const BLUR_HASH = 'blurHash'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'

src/styles/theme/background.scss

@@ -1,10 +1,14 @@
 .app-container.has-background,
 .link-share-container.has-background {
+  position: relative;
+
+  &, .app-container-background {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     min-height: 100vh;
+  }
 
   // FIXME: move to pagination component
   .pagination-link:not(.is-current) {
@@ -33,3 +37,17 @@
     }
   }
 }
+
+.app-container-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 0;
+  opacity: 0;
+  transition: opacity $transition;
+  transition-delay: $transition-duration * 2; // To fake an appearing background
+
+  &.is-visible {
+    opacity: 1;
+  }
+}

src/views/list/ShowList.vue

@@ -71,7 +71,7 @@ export default {
 	computed: {
 		// Computed property to let "listId" always have a value
 		listId() {
-			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
+			return typeof this.$route.params.listId === 'undefined' ? 0 : parseInt(this.$route.params.listId)
 		},
 		background() {
 			return this.$store.state.background
@@ -99,9 +99,11 @@ export default {
 			const listData = {id: parseInt(this.$route.params.listId)}
 
 			saveListToHistory(listData)
-
 			this.setTitle(this.currentList.id ? this.getListTitle(this.currentList) : '')
 
+			const listFromStore = this.$store.getters['lists/getListById'](this.listId)
+			await this.$store.dispatch(CURRENT_LIST, listFromStore)
+
 			// This invalidates the loaded list at the kanban board which lets it reload its content when
 			// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
 			// shown in all views while preventing reloads when closing a task popup.