artlef/bibliomane
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Make read button work

Browse Source
This commit is contained in:
Arthur Lefebvre
2025-11-06 14:27:06 +01:00
parent 75494b6529
commit 6bfd3ae2da
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/BigIcon.vue
View File

@@ -3,19 +3,20 @@
const props = defineProps({ const props = defineProps({
icon: String, icon: String,
legend: String legend: String,
isSet: Boolean
}); });
const hovered = ref(false) const hovered = ref(false)
const computedIcon = computed(() => props.icon + (hovered.value ? "Fill" : "")); const computedIcon = computed(() => props.icon + (hovered.value || props.isSet ? "Fill" : ""));
</script> </script>
<template> <template>
<div class="bigiconandlegend" <div class="bigiconandlegend"
@mouseover="hovered = true" @mouseover="hovered = true"
@mouseout="hovered = false" @mouseout="hovered = false">
>
<span class="bigicon" :title="props.legend"> <span class="bigicon" :title="props.legend">
<component :is="computedIcon"></component> <component :is="computedIcon"></component>
</span> </span>
@@ -31,7 +32,7 @@
} }
.bigiconandlegend:hover { .bigiconandlegend:hover {
transform: scale(1.01); transform: scale(1.03);
transition: ease-in-out 0.02s; transition: ease-in-out 0.02s;
background-color: bulma-primary; background-color: bulma-primary;
cursor: pointer; cursor: pointer;

16
front/src/BookForm.vue
View File

@@ -18,8 +18,13 @@
}) })
function onRatingUpdate(rating) { function onRatingUpdate(rating) {
data.value.rating = rating * 2 data.value.rating = rating * 2;
putBookUpdate(props.id, {rating: data.value.rating}) putBookUpdate(props.id, {rating: data.value.rating});
}
function onReadIconClick() {
data.value.read = !data.value.read;
putBookUpdate(props.id, {read: data.value.read});
} }
</script> </script>
@@ -50,9 +55,10 @@
</div> </div>
<div class="column"> <div class="column">
<div class="iconscontainer"> <div class="iconscontainer">
<BigIcon icon="BIconEye" :legend="$t('bookform.wantread')"/> <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')" :isSet="false"/>
<BigIcon icon="BIconBook" :legend="$t('bookform.startread')"/> <BigIcon icon="BIconBook" :legend="$t('bookform.startread')" :isSet="false"/>
<BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')"/> <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')" :isSet="data.read"
@click="onReadIconClick"/>
</div> </div>
</div> </div>
</div> </div>