diff --git a/ui/src/components/layout/Layout.tsx b/ui/src/components/layout/Layout.tsx index cbb81d7a..bda920aa 100644 --- a/ui/src/components/layout/Layout.tsx +++ b/ui/src/components/layout/Layout.tsx @@ -4,7 +4,7 @@ import React from 'react' import { Helmet } from 'react-helmet' import Header from '../header/Header' import { Authorized } from '../routes/AuthorizedRoute' -import { SidebarProvider } from '../sidebar/Sidebar' +import { Sidebar, SidebarProvider } from '../sidebar/Sidebar' import MainMenu from './MainMenu' export const ADMIN_QUERY = gql` @@ -40,7 +40,7 @@ const Layout = ({ children, title, ...otherProps }: LayoutProps) => {
- {/* */} + ) diff --git a/ui/src/components/sidebar/MediaSidebar.tsx b/ui/src/components/sidebar/MediaSidebar.tsx index dedb8f85..c9db3816 100644 --- a/ui/src/components/sidebar/MediaSidebar.tsx +++ b/ui/src/components/sidebar/MediaSidebar.tsx @@ -25,6 +25,7 @@ import { } from './__generated__/sidebarPhoto' import { sidebarDownloadQuery_media_downloads } from './__generated__/sidebarDownloadQuery' +import SidebarHeader from './SidebarHeader' const SIDEBAR_MEDIA_QUERY = gql` query sidebarPhoto($id: ID!) { @@ -87,13 +88,6 @@ const SIDEBAR_MEDIA_QUERY = gql` } ` -const PreviewImageWrapper = styled.div<{ imageAspect: number }>` - width: 100%; - height: 0; - padding-top: ${({ imageAspect }) => Math.min(imageAspect, 0.75) * 100}%; - position: relative; -` - const PreviewImage = styled(ProtectedImage)` position: absolute; width: 100%; @@ -134,12 +128,6 @@ const PreviewMedia = ({ media, previewImage }: PreviewMediaProps) => { return
ERROR: Unknown media type: {media.type}
} -const Name = styled.div` - text-align: center; - font-size: 1.2rem; - margin: 0.75rem 0 1rem; -` - const MetadataInfoContainer = styled.div` margin-bottom: 1.5rem; ` @@ -155,7 +143,7 @@ export const MetadataInfo = ({ media }: MediaInfoProps) => { const exifName = exifNameLookup(t) if (media?.exif) { - const mediaExif = (media?.exif as unknown) as { + const mediaExif = media?.exif as unknown as { [key: string]: string | number | null } @@ -212,7 +200,7 @@ export const MetadataInfo = ({ media }: MediaInfoProps) => { let videoMetadataItems: JSX.Element[] = [] if (media?.videoMetadata) { - const videoMetadata = (media.videoMetadata as unknown) as { + const videoMetadata = media.videoMetadata as unknown as { [key: string]: string | number | null } @@ -371,16 +359,21 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => { return (
- {!hidePreview && ( - - - - - )} - {media.title} + +
+ {!hidePreview && ( +
+ + +
+ )} +
@@ -418,10 +411,8 @@ type MediaSidebarType = { } const MediaSidebar = ({ media, hidePreview }: MediaSidebarType) => { - const [loadMedia, { loading, error, data }] = useLazyQuery< - sidebarPhoto, - sidebarPhotoVariables - >(SIDEBAR_MEDIA_QUERY) + const [loadMedia, { loading, error, data }] = + useLazyQuery(SIDEBAR_MEDIA_QUERY) useEffect(() => { if (media != null && authToken()) { diff --git a/ui/src/components/sidebar/Sidebar.tsx b/ui/src/components/sidebar/Sidebar.tsx index 34b33739..ad1a90b5 100644 --- a/ui/src/components/sidebar/Sidebar.tsx +++ b/ui/src/components/sidebar/Sidebar.tsx @@ -1,41 +1,4 @@ -import React, { createContext, useContext, useState } from 'react' -import styled from 'styled-components' -import { Icon } from 'semantic-ui-react' - -const SidebarContainer = styled.div<{ highlighted: boolean }>` - width: 28vw; - max-width: 500px; - min-width: 300px; - flex-shrink: 0; - overflow-y: scroll; - right: 0; - margin-top: 60px; - background-color: white; - padding: 12px; - border-left: 1px solid #eee; - - @media (max-width: 700px) { - position: absolute; - width: 100%; - /* full height - header - tabbar */ - height: calc(100% - 60px - 80px); - max-width: min(calc(100vw - 85px), 400px); - ${({ highlighted }) => `right: ${highlighted ? 0 : -100}%;`} - padding-top: 45px; - } - - transition: right 200ms ease-in-out; -` - -const SidebarDismissButton = styled(Icon)` - position: absolute; - top: 10px; - right: 10px; - - @media (min-width: 700px) { - display: none; - } -` +import React, { createContext, useContext, useEffect, useState } from 'react' export type UpdateSidebarFn = (content: React.ReactNode) => void @@ -78,18 +41,33 @@ export const SidebarProvider = ({ children }: SidebarProviderProps) => { } export const Sidebar = () => { - const { updateSidebar, content } = useContext(SidebarContext) + const { content } = useContext(SidebarContext) + + useEffect(() => { + const body = document.body + + if (content == null) { + body.classList.remove('overflow-y-hidden') + body.classList.remove('lg:overflow-y-auto') + } else { + body.classList.add('overflow-y-hidden') + body.classList.add('lg:overflow-y-auto') + } + + return () => { + body.classList.remove('overflow-y-hidden') + body.classList.remove('lg:overflow-y-auto') + } + }) return ( - +
{content} - updateSidebar(null)} - /> -
- +
+
) } diff --git a/ui/src/components/sidebar/SidebarHeader.tsx b/ui/src/components/sidebar/SidebarHeader.tsx new file mode 100644 index 00000000..d0db1858 --- /dev/null +++ b/ui/src/components/sidebar/SidebarHeader.tsx @@ -0,0 +1,27 @@ +import React, { useContext } from 'react' + +import { ReactComponent as CloseIcon } from './icons/closeSidebarIcon.svg' +import { ReactComponent as PinIcon } from './icons/pinSidebarIcon.svg' +import { SidebarContext } from './Sidebar' + +type SidebarHeaderProps = { + title: string +} + +const SidebarHeader = ({ title }: SidebarHeaderProps) => { + const { updateSidebar } = useContext(SidebarContext) + + return ( +
+ + {title} + +
+ ) +} + +export default SidebarHeader diff --git a/ui/src/components/sidebar/icons/closeSidebarIcon.svg b/ui/src/components/sidebar/icons/closeSidebarIcon.svg new file mode 100644 index 00000000..1d73015f --- /dev/null +++ b/ui/src/components/sidebar/icons/closeSidebarIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/sidebar/icons/pinSidebarIcon.svg b/ui/src/components/sidebar/icons/pinSidebarIcon.svg new file mode 100644 index 00000000..08eab7ac --- /dev/null +++ b/ui/src/components/sidebar/icons/pinSidebarIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/timelineGallery/TimelineGallery.tsx b/ui/src/components/timelineGallery/TimelineGallery.tsx index 770cd4a5..eb7c5ffd 100644 --- a/ui/src/components/timelineGallery/TimelineGallery.tsx +++ b/ui/src/components/timelineGallery/TimelineGallery.tsx @@ -163,7 +163,7 @@ const TimelineGallery = () => { )) return ( - <> +
{ dispatchMedia={dispatchMedia} /> )} - +
) }