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