feat: use blurHash when loading list backgrounds (#1188)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1188
This commit is contained in:
konrad
parent
53787a65df
commit
4cff3ebee1
13 changed files with 387 additions and 234 deletions
|
|
@ -26,6 +26,7 @@
|
|||
"@vue/compat": "3.2.31",
|
||||
"@vueuse/core": "8.2.3",
|
||||
"@vueuse/router": "8.2.3",
|
||||
"blurhash": "^1.1.4",
|
||||
"bulma-css-variables": "0.9.33",
|
||||
"camel-case": "4.1.2",
|
||||
"codemirror": "5.65.2",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-auth" :class="{'modal-active': modalActive}">
|
||||
<BaseButton
|
||||
v-if="menuActive"
|
||||
@click="$store.commit('menuActive', false)"
|
||||
class="menu-hide-button"
|
||||
>
|
||||
<icon icon="times" />
|
||||
<icon icon="times"/>
|
||||
</BaseButton>
|
||||
<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 background-fade-in"
|
||||
:style="{'background-image': background && `url(${background})`}"></div>
|
||||
<navigation/>
|
||||
<main
|
||||
:class="[
|
||||
|
|
@ -31,7 +35,7 @@
|
|||
|
||||
<router-view :route="routeWithModal" v-slot="{ Component }">
|
||||
<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
|
||||
<component :is="Component" />
|
||||
<component :is="Component"/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
|
||||
|
|
@ -42,7 +46,7 @@
|
|||
variant="scrolling"
|
||||
class="task-detail-view-modal"
|
||||
>
|
||||
<component :is="currentModal" />
|
||||
<component :is="currentModal"/>
|
||||
</modal>
|
||||
</transition>
|
||||
|
||||
|
|
@ -115,16 +119,17 @@ function useRouteWithModal() {
|
|||
}
|
||||
}
|
||||
|
||||
return { routeWithModal, currentModal, closeModal }
|
||||
return {routeWithModal, currentModal, closeModal}
|
||||
}
|
||||
|
||||
const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
|
||||
|
||||
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const background = computed(() => store.state.background)
|
||||
const blurHash = computed(() => store.state.blurHash)
|
||||
const menuActive = computed(() => store.state.menuActive)
|
||||
const modalActive = computed(() => store.state.modalActive)
|
||||
|
||||
function showKeyboardShortcuts() {
|
||||
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
|
||||
|
|
@ -227,39 +232,41 @@ store.dispatch('labels/loadAllLabels')
|
|||
}
|
||||
|
||||
.app-container {
|
||||
min-height: calc(100vh - 65px);
|
||||
min-height: calc(100vh - 65px);
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||
|
||||
// Used to make sure the spinner is always in the middle while loading
|
||||
> .loader-container {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
padding-top: 1.5rem;
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
.app-content {
|
||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
&.is-menu-enabled {
|
||||
margin-left: $navbar-width;
|
||||
// Used to make sure the spinner is always in the middle while loading
|
||||
> .loader-container {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
min-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
padding-top: 1.5rem;
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
&.is-menu-enabled {
|
||||
margin-left: $navbar-width;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
min-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
|
|
@ -296,5 +303,14 @@ store.dispatch('labels/loadAllLabels')
|
|||
}
|
||||
}
|
||||
|
||||
.content-auth {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&.modal-active {
|
||||
z-index: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
||||
|
|
@ -2,28 +2,34 @@
|
|||
<router-link
|
||||
:class="{
|
||||
'has-light-text': !colorIsDark(list.hexColor),
|
||||
'has-background': background !== null
|
||||
'has-background': blurHashUrl !== ''
|
||||
}"
|
||||
:style="{
|
||||
'background-color': list.hexColor,
|
||||
'background-image': background !== null ? `url(${background})` : false,
|
||||
'background-image': blurHashUrl !== null ? `url(${blurHashUrl})` : false,
|
||||
}"
|
||||
:to="{ name: 'list.index', params: { listId: list.id} }"
|
||||
class="list-card"
|
||||
v-if="list !== null && (showArchived ? true : !list.isArchived)"
|
||||
>
|
||||
<div class="is-archived-container">
|
||||
<div
|
||||
class="list-background background-fade-in"
|
||||
:class="{'is-visible': background}"
|
||||
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
||||
<div class="list-content">
|
||||
<div class="is-archived-container">
|
||||
<span class="is-archived" v-if="list.isArchived">
|
||||
{{ $t('namespace.archived') }}
|
||||
</span>
|
||||
<span
|
||||
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
|
||||
@click.stop="toggleFavoriteList(list)"
|
||||
class="favorite">
|
||||
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
|
||||
<span
|
||||
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
|
||||
@click.stop="toggleFavoriteList(list)"
|
||||
class="favorite">
|
||||
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="title">{{ list.title }}</div>
|
||||
</div>
|
||||
<div class="title">{{ list.title }}</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,12 +38,14 @@ import {PropType, ref, watch} from 'vue'
|
|||
import {useStore} from 'vuex'
|
||||
|
||||
import ListService from '@/services/list'
|
||||
import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
|
||||
|
||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
const background = ref<string | null>(null)
|
||||
const backgroundLoading = ref(false)
|
||||
const blurHashUrl = ref('')
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
|
|
@ -50,13 +58,18 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
watch(props.list, loadBackground, { immediate: true })
|
||||
watch(props.list, loadBackground, {immediate: true})
|
||||
|
||||
async function loadBackground() {
|
||||
if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const blurHash = await getBlobFromBlurHash(props.list.backgroundBlurHash)
|
||||
if (blurHash) {
|
||||
blurHashUrl.value = window.URL.createObjectURL(blurHash)
|
||||
}
|
||||
|
||||
backgroundLoading.value = true
|
||||
|
||||
const listService = new ListService()
|
||||
|
|
@ -81,129 +94,145 @@ function toggleFavoriteList(list: ListModel) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.list-card {
|
||||
cursor: pointer;
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
height: $list-height;
|
||||
background: var(--white);
|
||||
margin: 0 $list-spacing $list-spacing 0;
|
||||
padding: 1rem;
|
||||
border-radius: $radius;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow $transition;
|
||||
cursor: pointer;
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
height: $list-height;
|
||||
background: var(--white);
|
||||
margin: 0 $list-spacing $list-spacing 0;
|
||||
border-radius: $radius;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow $transition;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
&.has-light-text .title {
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
&.has-background, .list-background {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: var(--shadow-xs) !important;
|
||||
}
|
||||
&.has-background .list-content .title {
|
||||
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $widescreen) {
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.list-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $widescreen) and (min-width: $tablet) {
|
||||
$lists-per-row: 3;
|
||||
& {
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: var(--shadow-xs) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
$lists-per-row: 2;
|
||||
& {
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
}
|
||||
@media screen and (min-width: $widescreen) {
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $widescreen) and (min-width: $tablet) {
|
||||
$lists-per-row: 3;
|
||||
& {
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile) {
|
||||
$lists-per-row: 1;
|
||||
& {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-archived-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
@media screen and (max-width: $tablet) {
|
||||
$lists-per-row: 2;
|
||||
& {
|
||||
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
||||
}
|
||||
|
||||
.is-archived {
|
||||
font-size: .75rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&:nth-child(#{$lists-per-row}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: flex-end;
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@media screen and (max-width: $mobile) {
|
||||
$lists-per-row: 1;
|
||||
& {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.list-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.has-light-text .title {
|
||||
color: var(--light);
|
||||
}
|
||||
.is-archived-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
&.has-background {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.is-archived {
|
||||
font-size: .75rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
align-self: flex-end;
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.favorite {
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--warning);
|
||||
}
|
||||
.favorite {
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
|
||||
&.is-archived {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-favorite {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
&.is-archived {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
&.is-favorite {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,6 +64,9 @@
|
|||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {ref, watch} from 'vue'
|
||||
import {useScrollLock} from '@vueuse/core'
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
enabled?: boolean,
|
||||
|
|
@ -86,6 +89,7 @@ watch(
|
|||
() => props.enabled,
|
||||
enabled => {
|
||||
scrollLock.value = enabled
|
||||
store.commit('modalActive', enabled)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
|
|
|
|||
31
src/helpers/getBlobFromBlurHash.ts
Normal file
31
src/helpers/getBlobFromBlurHash.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import {decode} from 'blurhash'
|
||||
|
||||
export async function getBlobFromBlurHash(blurHash: string): Promise<Blob | null> {
|
||||
if (blurHash === '') {
|
||||
return null
|
||||
}
|
||||
|
||||
const pixels = decode(blurHash, 32, 32)
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = 32
|
||||
canvas.height = 32
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (ctx === null) {
|
||||
return null
|
||||
}
|
||||
|
||||
const imageData = ctx.createImageData(32, 32)
|
||||
imageData.data.set(pixels)
|
||||
ctx.putImageData(imageData, 0, 0)
|
||||
|
||||
return new Promise<Blob>((resolve, reject) => {
|
||||
canvas.toBlob(b => {
|
||||
if (b === null) {
|
||||
reject(b)
|
||||
return
|
||||
}
|
||||
|
||||
resolve(b)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ export default class BackgroundImageModel extends AbstractModel {
|
|||
url: '',
|
||||
thumb: '',
|
||||
info: {},
|
||||
blurHash: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ export default class ListModel extends AbstractModel {
|
|||
|
||||
this.owner = new UserModel(this.owner)
|
||||
|
||||
if(typeof this.subscription !== 'undefined' && this.subscription !== null) {
|
||||
if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
|
||||
this.subscription = new SubscriptionModel(this.subscription)
|
||||
}
|
||||
|
||||
|
|
@ -44,6 +44,7 @@ export default class ListModel extends AbstractModel {
|
|||
isFavorite: false,
|
||||
subscription: null,
|
||||
position: 0,
|
||||
backgroundBlurHash: '',
|
||||
|
||||
created: null,
|
||||
updated: null,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import {createStore} from 'vuex'
|
||||
import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
|
||||
import {
|
||||
BACKGROUND,
|
||||
BLUR_HASH,
|
||||
CURRENT_LIST,
|
||||
HAS_TASKS,
|
||||
KEYBOARD_SHORTCUTS_ACTIVE,
|
||||
|
|
@ -44,10 +46,12 @@ export const store = createStore({
|
|||
isArchived: false,
|
||||
}),
|
||||
background: '',
|
||||
blurHash: '',
|
||||
hasTasks: false,
|
||||
menuActive: true,
|
||||
keyboardShortcutsActive: false,
|
||||
quickActionsActive: false,
|
||||
modalActive: false,
|
||||
},
|
||||
mutations: {
|
||||
[LOADING](state, loading) {
|
||||
|
|
@ -83,6 +87,12 @@ export const store = createStore({
|
|||
[BACKGROUND](state, background) {
|
||||
state.background = background
|
||||
},
|
||||
[BLUR_HASH](state, blurHash) {
|
||||
state.blurHash = blurHash
|
||||
},
|
||||
modalActive(state, active) {
|
||||
state.modalActive = active
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async [CURRENT_LIST]({state, commit}, currentList) {
|
||||
|
|
@ -90,6 +100,7 @@ export const store = createStore({
|
|||
if (currentList === null) {
|
||||
commit(CURRENT_LIST, {})
|
||||
commit(BACKGROUND, null)
|
||||
commit(BLUR_HASH, null)
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -122,10 +133,15 @@ export const store = createStore({
|
|||
) {
|
||||
if (currentList.backgroundInformation) {
|
||||
try {
|
||||
const blurHash = await getBlobFromBlurHash(currentList.backgroundBlurHash)
|
||||
if (blurHash) {
|
||||
commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
|
||||
}
|
||||
|
||||
const listService = new ListService()
|
||||
const background = await listService.background(currentList)
|
||||
commit(BACKGROUND, background)
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
console.error('Error getting background image for list', currentList.id, e)
|
||||
}
|
||||
}
|
||||
|
|
@ -133,6 +149,7 @@ export const store = createStore({
|
|||
|
||||
if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
|
||||
commit(BACKGROUND, null)
|
||||
commit(BLUR_HASH, null)
|
||||
}
|
||||
|
||||
commit(CURRENT_LIST, currentList)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ 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'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
.app-container.has-background,
|
||||
.link-share-container.has-background {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
|
||||
// FIXME: move to pagination component
|
||||
&, .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) {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
|
@ -33,3 +37,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-container-background {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.background-fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity $transition;
|
||||
transition-delay: $transition-duration * 2; // To fake an appearing background
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ import Message from '@/components/misc/message.vue'
|
|||
import ListModel from '@/models/list'
|
||||
import ListService from '@/services/list'
|
||||
|
||||
import {BACKGROUND, CURRENT_LIST} from '@/store/mutation-types'
|
||||
import {BACKGROUND, BLUR_HASH, CURRENT_LIST} from '@/store/mutation-types'
|
||||
|
||||
import {getListTitle} from '@/helpers/getListTitle'
|
||||
import {saveListToHistory} from '@/modules/listHistory'
|
||||
|
|
@ -145,6 +145,7 @@ async function loadList(listIdToLoad: number) {
|
|||
const listFromStore = store.getters['lists/getListById'](listData.id)
|
||||
if (listFromStore !== null) {
|
||||
store.commit(BACKGROUND, null)
|
||||
store.commit(BLUR_HASH, null)
|
||||
store.commit(CURRENT_LIST, listFromStore)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,16 +35,25 @@
|
|||
v-model="backgroundSearchTerm"
|
||||
/>
|
||||
<p class="unsplash-link">
|
||||
<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">{{ $t('list.background.poweredByUnsplash') }}</a>
|
||||
<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">
|
||||
{{ $t('list.background.poweredByUnsplash') }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="image-search-result">
|
||||
<a
|
||||
:key="im.id"
|
||||
:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
|
||||
:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
|
||||
@click="() => setBackground(im.id)"
|
||||
class="image"
|
||||
v-for="im in backgroundSearchResult">
|
||||
<a :href="`https://unsplash.com/@${im.info.author}`" rel="noreferrer noopener nofollow" target="_blank" class="info">
|
||||
<transition name="fade">
|
||||
<img :src="backgroundThumbs[im.id]" alt="" v-if="backgroundThumbs[im.id]"/>
|
||||
</transition>
|
||||
<a
|
||||
:href="`https://unsplash.com/@${im.info.author}`"
|
||||
rel="noreferrer noopener nofollow"
|
||||
target="_blank"
|
||||
class="info">
|
||||
{{ im.info.authorName }}
|
||||
</a>
|
||||
</a>
|
||||
|
|
@ -65,6 +74,8 @@
|
|||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {getBlobFromBlurHash} from '../../../helpers/getBlobFromBlurHash'
|
||||
|
||||
import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
|
||||
import BackgroundUploadService from '../../../services/backgroundUpload'
|
||||
import ListService from '@/services/list'
|
||||
|
|
@ -83,6 +94,7 @@ export default {
|
|||
backgroundSearchTerm: '',
|
||||
backgroundSearchResult: [],
|
||||
backgroundThumbs: {},
|
||||
backgroundBlurHashes: {},
|
||||
currentPage: 1,
|
||||
|
||||
// We're using debounce to not search on every keypress but with a delay.
|
||||
|
|
@ -120,8 +132,16 @@ export default {
|
|||
this.currentPage = page
|
||||
const result = await this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
|
||||
this.backgroundSearchResult = this.backgroundSearchResult.concat(result)
|
||||
result.forEach(async background => {
|
||||
this.backgroundThumbs[background.id] = await this.backgroundService.thumb(background)
|
||||
result.forEach(background => {
|
||||
getBlobFromBlurHash(background.blurHash)
|
||||
.then(b => {
|
||||
this.backgroundBlurHashes[background.id] = window.URL.createObjectURL(b)
|
||||
})
|
||||
|
||||
this.backgroundService.thumb(background)
|
||||
.then(b => {
|
||||
this.backgroundThumbs[background.id] = b
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -165,82 +185,88 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.list-background-setting {
|
||||
|
||||
.unsplash-link {
|
||||
text-align: right;
|
||||
font-size: .8rem;
|
||||
.unsplash-link {
|
||||
text-align: right;
|
||||
font-size: .8rem;
|
||||
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
.image-search-result {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
.image-search-result {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.image {
|
||||
width: calc(100% / 5 - 1rem);
|
||||
height: 120px;
|
||||
margin: .5rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
.image {
|
||||
width: calc(100% / 5 - 1rem);
|
||||
height: 120px;
|
||||
margin: .5rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
&:nth-child(5n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $desktop) {
|
||||
&:nth-child(5n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: calc(100% / 4 - 1rem);
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: calc(100% / 4 - 1rem);
|
||||
|
||||
&:nth-child(4n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: calc(100% / 2 - 1rem);
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: calc(100% / 2 - 1rem);
|
||||
|
||||
&:nth-child(2n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: ($mobile)) {
|
||||
width: calc(100% - 1rem);
|
||||
@media screen and (max-width: ($mobile)) {
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
&:nth-child(1n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
&:nth-child(1n) {
|
||||
break-after: always;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
align-self: flex-end;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
transition: opacity $transition;
|
||||
}
|
||||
.info {
|
||||
align-self: flex-end;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
transition: opacity $transition;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover .info {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.is-load-more-button {
|
||||
margin: 1rem auto 0 !important;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
&:hover .info {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-load-more-button {
|
||||
margin: 1rem auto 0 !important;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4217,6 +4217,11 @@ blueimp-md5@^2.10.0:
|
|||
resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
|
||||
integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
|
||||
|
||||
blurhash@^1.1.4:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.4.tgz#a7010ceb3019cd2c9809b17c910ebf6175d29244"
|
||||
integrity sha512-MXIPz6zwYUKayju+Uidf83KhH0vodZfeRl6Ich8Gu+KGl0JgKiFq9LsfqV7cVU5fKD/AotmduZqvOfrGKOfTaA==
|
||||
|
||||
body-parser@1.19.0:
|
||||
version "1.19.0"
|
||||
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
|
||||
|
|
|
|||
Loading…
Reference in a new issue