Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-22 00:13:30 +01:00
Code Issues Projects Releases Wiki Activity

fix(webui): unread tick not showing properly on books

Browse source 
tick would show only after visiting the book details page
This commit is contained in:
Gauthier Roebroeck 2020-06-03 21:17:32 +08:00
parent 074c2c1d4a
commit 0d0b9985c0
1 changed files with 71 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
komga-webui/src/components/ItemCard.vue
View file

@ -1,62 +1,62 @@
<template> <template>
<v-hover :disabled="disableHover"> <v-hover :disabled="disableHover">
<template v-slot:default="{ hover }"> <template v-slot:default="{ hover }">
<v-card <v-card
:width="width" :width="width"
@click="onClick" @click="onClick"
:ripple="false" :ripple="false"
>
<!-- Thumbnail-->
<v-img
:src="thumbnailUrl"
lazy-src="../assets/cover.svg"
aspect-ratio="0.7071"
> >
<div class="unread" v-if="isUnread"/> <!-- Thumbnail-->
<v-fade-transition> <v-img
<v-overlay :src="thumbnailUrl"
v-if="hover || selected || preselect" lazy-src="../assets/cover.svg"
absolute aspect-ratio="0.7071"
:opacity="hover ? 0.3 : 0" >
:class="`${hover ? 'item-border-darken' : selected ? 'item-border' : 'item-border-transparent'} overlay-full`" <div class="unread" v-if="isUnread"/>
> <v-fade-transition>
<v-icon v-if="onSelected" <v-overlay
:color="selected ? 'secondary' : ''" v-if="hover || selected || preselect"
style="position: absolute; top: 5px; left: 10px" absolute
@click.stop="selectItem" :opacity="hover ? 0.3 : 0"
:class="`${hover ? 'item-border-darken' : selected ? 'item-border' : 'item-border-transparent'} overlay-full`"
> >
{{ selected || (preselect && hover) ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline' <v-icon v-if="onSelected"
}} :color="selected ? 'secondary' : ''"
</v-icon> style="position: absolute; top: 5px; left: 10px"
@click.stop="selectItem"
>
{{ selected || (preselect && hover) ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
}}
</v-icon>
<v-icon v-if="!selected && !preselect && onEdit" <v-icon v-if="!selected && !preselect && onEdit"
style="position: absolute; bottom: 10px; left: 10px" style="position: absolute; bottom: 10px; left: 10px"
@click.stop="editItem" @click.stop="editItem"
> >
mdi-pencil mdi-pencil
</v-icon> </v-icon>
</v-overlay> </v-overlay>
</v-fade-transition> </v-fade-transition>
<v-progress-linear <v-progress-linear
v-if="isInProgress" v-if="isInProgress"
:value="readProgressPercentage" :value="readProgressPercentage"
color="orange" color="orange"
height="6" height="6"
style="position: absolute; bottom: 0" style="position: absolute; bottom: 0"
/> />
</v-img> </v-img>
<!-- Description--> <!-- Description-->
<v-card-subtitle <v-card-subtitle
v-line-clamp="2" v-line-clamp="2"
v-bind="subtitleProps" v-bind="subtitleProps"
v-html="title" v-html="title"
> >
</v-card-subtitle> </v-card-subtitle>
<v-card-text class="px-2" v-html="body"> <v-card-text class="px-2" v-html="body">
</v-card-text> </v-card-text>
</v-card> </v-card>
</template> </template>
</v-hover> </v-hover>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -97,8 +97,7 @@ export default Vue.extend({
}, },
}, },
data: () => { data: () => {
return { return {}
}
}, },
computed: { computed: {
overlay (): boolean { overlay (): boolean {
@ -161,20 +160,22 @@ export default Vue.extend({
</script> </script>
<style> <style>
.item-border { @import "../styles/unread-triangle.css";
border: 3px solid var(--v-secondary-base);
}
.item-border-transparent { .item-border {
border: 3px solid transparent; border: 3px solid var(--v-secondary-base);
} }
.item-border-darken { .item-border-transparent {
border: 3px solid var(--v-secondary-darken2); border: 3px solid transparent;
} }
.overlay-full .v-overlay__content { .item-border-darken {
width: 100%; border: 3px solid var(--v-secondary-darken2);
height: 100%; }
}
.overlay-full .v-overlay__content {
width: 100%;
height: 100%;
}
</style> </style>