Make full-screen the default action
This commit is contained in:
parent
b60c15c700
commit
1791ef1b5c
|
@ -49,12 +49,8 @@ const PhotoOverlay = styled.div<{ active: boolean }>`
|
|||
${({ active }) =>
|
||||
active &&
|
||||
`
|
||||
border: 4px solid rgba(65, 131, 196, 0.6);
|
||||
|
||||
& ${HoverIcon} {
|
||||
top: -4px !important;
|
||||
left: -4px !important;
|
||||
}
|
||||
outline: 4px solid rgba(65, 131, 196, 0.6);
|
||||
outline-offset: -4px;
|
||||
`}
|
||||
`
|
||||
|
||||
|
@ -87,6 +83,13 @@ const FavoriteIcon = styled(HoverIcon)`
|
|||
opacity: ${({ favorite }) => (favorite ? '0.8' : '0.2')} !important;
|
||||
`
|
||||
|
||||
const SidebarIcon = styled(HoverIcon)`
|
||||
margin: 10px !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
`
|
||||
|
||||
const VideoThumbnailIcon = styled(Icon)`
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
position: absolute;
|
||||
|
@ -152,7 +155,7 @@ export const MediaThumbnail = ({
|
|||
minWidth: `clamp(124px, ${minWidth}px, 100% - 8px)`,
|
||||
}}
|
||||
onClick={() => {
|
||||
selectImage()
|
||||
clickPresent()
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
@ -165,10 +168,11 @@ export const MediaThumbnail = ({
|
|||
</div>
|
||||
<PhotoOverlay active={active}>
|
||||
{videoIcon}
|
||||
<HoverIcon
|
||||
name="expand"
|
||||
onClick={() => {
|
||||
clickPresent()
|
||||
<SidebarIcon
|
||||
name="info"
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
selectImage()
|
||||
}}
|
||||
/>
|
||||
{heartIcon}
|
||||
|
|
|
@ -81,6 +81,11 @@ const PhotoGallery = ({
|
|||
toggleFavoriteAction({
|
||||
media,
|
||||
markFavorite,
|
||||
}).then(() => {
|
||||
dispatchMedia({
|
||||
type: 'selectImage',
|
||||
index,
|
||||
})
|
||||
})
|
||||
}}
|
||||
clickPresent={() => {
|
||||
|
|
|
@ -27,7 +27,7 @@ export const toggleFavoriteAction = ({
|
|||
media: PhotoGalleryProps_Media
|
||||
markFavorite: MutationFunction<markMediaFavorite, markMediaFavoriteVariables>
|
||||
}) => {
|
||||
markFavorite({
|
||||
return markFavorite({
|
||||
variables: {
|
||||
mediaId: media.id,
|
||||
favorite: !media.favorite,
|
||||
|
|
|
@ -49,10 +49,12 @@ const PresentMedia = ({
|
|||
return (
|
||||
<div {...otherProps}>
|
||||
<StyledPhoto
|
||||
key={`${media.id}-thumb`}
|
||||
src={media.thumbnail?.url}
|
||||
data-testid="present-img-thumbnail"
|
||||
/>
|
||||
<StyledPhoto
|
||||
key={`${media.id}-highres`}
|
||||
style={{ display: 'none' }}
|
||||
src={media.highRes?.url}
|
||||
data-testid="present-img-highres"
|
||||
|
|
|
@ -71,9 +71,8 @@ const TimelineGroupAlbum = ({
|
|||
mediaState,
|
||||
dispatchMedia,
|
||||
}: TimelineGroupAlbumProps) => {
|
||||
const { media, mediaTotal, album } = mediaState.timelineGroups[
|
||||
dateIndex
|
||||
].groups[albumIndex]
|
||||
const { media, mediaTotal, album } =
|
||||
mediaState.timelineGroups[dateIndex].groups[albumIndex]
|
||||
|
||||
const [markFavorite] = useMarkFavoriteMutation()
|
||||
|
||||
|
@ -105,6 +104,15 @@ const TimelineGroupAlbum = ({
|
|||
toggleFavoriteAction({
|
||||
media,
|
||||
markFavorite,
|
||||
}).then(() => {
|
||||
dispatchMedia({
|
||||
type: 'selectImage',
|
||||
index: {
|
||||
album: albumIndex,
|
||||
date: dateIndex,
|
||||
media: index,
|
||||
},
|
||||
})
|
||||
})
|
||||
}}
|
||||
active={media.id === getActiveTimelineImage({ mediaState })?.id}
|
||||
|
|
Loading…
Reference in New Issue