luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Transparent buttons for details and mosaic view

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-08 17:51:39 +02:00
parent 88bb10b8cf
commit 1c5810f1cd
3 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/component/p-photo-details.vue
View file

@ -45,7 +45,7 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-select"
:class="hover ? 'p-photo-select' : 'p-photo-select opacity-70'"
@click.shift.prevent="$clipboard.addRange(index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white"
@ -56,7 +56,7 @@
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-like"
:class="hover ? 'p-photo-like' : 'p-photo-like opacity-70'"
@click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.PhotoFavorite" color="white" class="t-like t-on">favorite</v-icon>
<v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>

4
frontend/src/component/p-photo-mosaic.vue
View file

@ -39,7 +39,7 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon small absolute
class="p-photo-select"
:class="hover ? 'p-photo-select' : 'p-photo-select opacity-70'"
@click.shift.prevent="$clipboard.addRange(index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
@ -48,7 +48,7 @@
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
icon small absolute
class="p-photo-like"
:class="hover ? 'p-photo-like' : 'p-photo-like opacity-70'"
@click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.PhotoFavorite" color="white" class="t-like t-on">favorite</v-icon>
<v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>

28
frontend/src/css/app.css
View file

@ -190,3 +190,31 @@ table.v-table tbody td div.v-input__slot,
table.v-table tfoot td div.v-input__slot {
padding: 0 !important;
}
#photoprism .opacity-0 {
opacity: 0 !important;
}
#photoprism .opacity-50 {
opacity: 0.5 !important;
}
#photoprism .opacity-60 {
opacity: 0.6 !important;
}
#photoprism .opacity-70 {
opacity: 0.7 !important;
}
#photoprism .opacity-80 {
opacity: 0.8 !important;
}
#photoprism .opacity-90 {
opacity: 0.9 !important;
}
#photoprism .opacity-100 {
opacity: 1 !important;
}