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

feat: add blurHash loading for list cards
continuous-integration/drone/pr Build is failing Details

This commit is contained in:
kolaente 2021-12-20 22:04:00 +01:00
parent daf3212902
commit 0e886ba76b
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 142 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
src/components/list/partials/list-card.vue
View File

@ -2,39 +2,46 @@
<router-link <router-link
:class="{ :class="{
'has-light-text': !colorIsDark(list.hexColor), 'has-light-text': !colorIsDark(list.hexColor),
'has-background': background !== null 'has-background': blurHashUrl !== ''
}" }"
:style="{ :style="{
'background-color': list.hexColor, '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} }" :to="{ name: 'list.index', params: { listId: list.id} }"
class="list-card" class="list-card"
v-if="list !== null && (showArchived ? true : !list.isArchived)" v-if="list !== null && (showArchived ? true : !list.isArchived)"
> >
<div class="is-archived-container"> <div v-if="background !== null"
class="list-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"> <span class="is-archived" v-if="list.isArchived">
{{ $t('namespace.archived') }} {{ $t('namespace.archived') }}
</span> </span>
<span <span
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}" :class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
@click.stop="toggleFavoriteList(list)" @click.stop="toggleFavoriteList(list)"
class="favorite"> class="favorite">
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" /> <icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
</span> </span>
</div>
<div class="title">{{ list.title }}</div>
</div> </div>
<div class="title">{{ list.title }}</div>
</router-link> </router-link>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, watch} from 'vue' import {computed, ref, watch} from 'vue'
import {useStore} from 'vuex' import {useStore} from 'vuex'
import ListService from '@/services/list' import ListService from '@/services/list'
import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
const background = ref(null) const background = ref(null)
const backgroundLoading = ref(false) const backgroundLoading = ref(false)
const blurHashUrl = ref('')
const props = defineProps({ const props = defineProps({
list: { list: {
@ -47,13 +54,18 @@ const props = defineProps({
}, },
}) })
watch(props.list, loadBackground, { immediate: true }) watch(props.list, loadBackground, {immediate: true})
async function loadBackground() { async function loadBackground() {
if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) { if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) {
return return
} }
const blurHash = await getBlobFromBlurHash(props.list.backgroundBlurHash)
if (blurHash) {
blurHashUrl.value = window.URL.createObjectURL(blurHash)
}
backgroundLoading.value = true backgroundLoading.value = true
const listService = new ListService() const listService = new ListService()
@ -78,129 +90,145 @@ function toggleFavoriteList(list) {
<style lang="scss" scoped> <style lang="scss" scoped>
.list-card { .list-card {
cursor: pointer; cursor: pointer;
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row}); width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
height: $list-height; height: $list-height;
background: var(--white); background: var(--white);
margin: 0 $list-spacing $list-spacing 0; margin: 0 $list-spacing $list-spacing 0;
padding: 1rem; border-radius: $radius;
border-radius: $radius; box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-sm); transition: box-shadow $transition;
transition: box-shadow $transition; position: relative;
overflow: hidden;
display: flex; &.has-light-text .title {
justify-content: space-between; color: var(--light);
flex-wrap: wrap; }
&:hover { &.has-background, .list-background {
box-shadow: var(--shadow-md); background-size: cover;
} background-repeat: no-repeat;
background-position: center;
}
&:active, &.has-background .list-content .title {
&:focus, text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
&:focus:not(:active) { color: var(--white);
box-shadow: var(--shadow-xs) !important; }
}
@media screen and (min-width: $widescreen) { .list-background {
&:nth-child(#{$lists-per-row}n) { position: absolute;
margin-right: 0; top: 0;
} right: 0;
} bottom: 0;
left: 0;
}
@media screen and (max-width: $widescreen) and (min-width: $tablet) { &:hover {
$lists-per-row: 3; box-shadow: var(--shadow-md);
& { }
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
}
&:nth-child(#{$lists-per-row}n) { &:active,
margin-right: 0; &:focus,
} &:focus:not(:active) {
} box-shadow: var(--shadow-xs) !important;
}
@media screen and (max-width: $tablet) { @media screen and (min-width: $widescreen) {
$lists-per-row: 2; &:nth-child(#{$lists-per-row}n) {
& { margin-right: 0;
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row}); }
} }
&:nth-child(#{$lists-per-row}n) { @media screen and (max-width: $widescreen) and (min-width: $tablet) {
margin-right: 0; $lists-per-row: 3;
} & {
} width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
}
@media screen and (max-width: $mobile) { &:nth-child(#{$lists-per-row}n) {
$lists-per-row: 1; margin-right: 0;
& { }
width: 100%; }
margin-right: 0;
}
}
.is-archived-container { @media screen and (max-width: $tablet) {
width: 100%; $lists-per-row: 2;
text-align: right; & {
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
}
.is-archived { &:nth-child(#{$lists-per-row}n) {
font-size: .75rem; margin-right: 0;
float: left; }
} }
}
.title { @media screen and (max-width: $mobile) {
align-self: flex-end; $lists-per-row: 1;
font-family: $vikunja-font; & {
font-weight: 400; width: 100%;
font-size: 1.5rem; margin-right: 0;
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;
display: -webkit-box; .list-content {
-webkit-line-clamp: 3; display: flex;
-webkit-box-orient: vertical; justify-content: space-between;
} flex-wrap: wrap;
padding: 1rem;
position: absolute;
height: 100%;
width: 100%;
&.has-light-text .title { .is-archived-container {
color: var(--light); width: 100%;
} text-align: right;
&.has-background { .is-archived {
background-size: cover; font-size: .75rem;
background-repeat: no-repeat; float: left;
background-position: center; }
}
.title { .title {
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700); align-self: flex-end;
color: var(--white); 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 { display: -webkit-box;
transition: opacity $transition, color $transition; -webkit-line-clamp: 3;
opacity: 0; -webkit-box-orient: vertical;
}
&:hover { .favorite {
color: var(--warning); transition: opacity $transition, color $transition;
} opacity: 0;
&.is-archived { &:hover {
display: none; color: var(--warning);
} }
&.is-favorite { &.is-archived {
display: inline-block; display: none;
opacity: 1; }
color: var(--warning);
}
}
&:hover .favorite { &.is-favorite {
opacity: 1; display: inline-block;
} opacity: 1;
color: var(--warning);
}
}
&:hover .favorite {
opacity: 1;
}
}
} }
</style> </style>