mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Favorite styles

This commit is contained in:
viktorstrate 2020-06-19 15:46:56 +02:00
parent 7686563b28
commit 9b6c9c3bd8
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/components/photoGallery/Photo.js
View File

@ -89,7 +89,7 @@ const PhotoOverlay = styled.div`
const HoverIcon = styled(Icon)` const HoverIcon = styled(Icon)`
font-size: 1.5em !important; font-size: 1.5em !important;
margin: 160px 0 0 10px !important; margin: 160px 10px 0 10px !important;
color: white !important; color: white !important;
text-shadow: 0 0 4px black; text-shadow: 0 0 4px black;
opacity: 0 !important; opacity: 0 !important;
@ -98,7 +98,7 @@ const HoverIcon = styled(Icon)`
border-radius: 50%; border-radius: 50%;
width: 34px !important; width: 34px !important;
height: 34px !important; height: 34px !important;
padding-top: 8px; padding-top: 7px;
${PhotoContainer}:hover & { ${PhotoContainer}:hover & {
opacity: 1 !important; opacity: 1 !important;
@ -111,6 +111,11 @@ const HoverIcon = styled(Icon)`
transition: opacity 100ms, background-color 100ms; transition: opacity 100ms, background-color 100ms;
` `
const FavoriteIcon = styled(HoverIcon)`
float: right;
opacity: ${({ favorite }) => (favorite ? '0.8' : '0.2')} !important;
`
export const Photo = ({ export const Photo = ({
photo, photo,
onSelectImage, onSelectImage,
@ -124,7 +129,8 @@ export const Photo = ({
let heartIcon = null let heartIcon = null
if (typeof photo.favorite == 'boolean') { if (typeof photo.favorite == 'boolean') {
heartIcon = ( heartIcon = (
<HoverIcon <FavoriteIcon
favorite={photo.favorite}
name={photo.favorite ? 'heart' : 'heart outline'} name={photo.favorite ? 'heart' : 'heart outline'}
onClick={event => { onClick={event => {
event.stopPropagation() event.stopPropagation()