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

Improve sidebar

This commit is contained in:
viktorstrate 2019-08-15 18:59:50 +02:00
parent c6fcba4083
commit 7c2e0df707
6 changed files with 174 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui/src/Pages/AlbumPage/AlbumPage.js
View File

@ -114,56 +114,49 @@ class AlbumPage extends Component {
return (
<Layout>
<SidebarConsumer>
{({ updateSidebar }) => (
<Query query={albumQuery} variables={{ id: albumId }}>
{({ loading, error, data }) => {
if (error) return <div>Error</div>
<Query query={albumQuery} variables={{ id: albumId }}>
{({ loading, error, data }) => {
if (error) return <div>Error</div>
let subAlbumElement = null
let subAlbumElement = null
if (data.album) {
this.photos = data.album.photos
if (data.album) {
this.photos = data.album.photos
if (data.album.subAlbums.length > 0) {
subAlbumElement = (
<AlbumGallery
loading={loading}
error={error}
albums={data.album.subAlbums}
/>
)
}
}
return (
<div>
<AlbumTitle album={data && data.album} disableLink />
{subAlbumElement}
{data.album && data.album.subAlbums.length > 0 && (
<h2>Images</h2>
)}
<PhotoGallery
loading={loading}
photos={data.album && data.album.photos}
activeIndex={this.state.activeImage}
presenting={this.state.presenting}
onSelectImage={index => {
updateSidebar(
<PhotoSidebar imageId={this.photos[index].id} />
)
this.setActiveImage(index)
}}
setPresenting={this.setPresenting}
nextImage={this.nextImage}
previousImage={this.previousImage}
/>
</div>
if (data.album.subAlbums.length > 0) {
subAlbumElement = (
<AlbumGallery
loading={loading}
error={error}
albums={data.album.subAlbums}
/>
)
}}
</Query>
)}
</SidebarConsumer>
}
}
return (
<div>
<AlbumTitle album={data && data.album} disableLink />
{subAlbumElement}
{data.album && data.album.subAlbums.length > 0 && (
<h2>Images</h2>
)}
<PhotoGallery
loading={loading}
photos={data.album && data.album.photos}
activeIndex={this.state.activeImage}
presenting={this.state.presenting}
onSelectImage={index => {
this.setActiveImage(index)
}}
setPresenting={this.setPresenting}
nextImage={this.nextImage}
previousImage={this.previousImage}
/>
</div>
)
}}
</Query>
</Layout>
)
}

89
ui/src/Pages/PhotosPage/PhotosPage.js
View File

@ -86,60 +86,51 @@ class PhotosPage extends Component {
render() {
return (
<Layout>
<SidebarConsumer>
{({ updateSidebar }) => (
<Query query={photoQuery}>
{({ loading, error, data }) => {
if (error) return error
<Query query={photoQuery}>
{({ loading, error, data }) => {
if (error) return error
let galleryGroups = []
let galleryGroups = []
this.albums = data.myAlbums
this.albums = data.myAlbums
if (data.myAlbums) {
galleryGroups = data.myAlbums.map((album, index) => (
<div key={album.id}>
<AlbumTitle album={album} />
<PhotoGallery
onSelectImage={photoIndex => {
updateSidebar(
<PhotoSidebar
imageId={album.photos[photoIndex].id}
/>
)
this.setActiveImage(index, photoIndex)
}}
activeIndex={
this.state.activeAlbumIndex == index
? this.state.activePhotoIndex
: -1
}
presenting={this.state.presenting === index}
setPresenting={presenting =>
this.setPresenting(presenting, index)
}
loading={loading}
photos={album.photos}
nextImage={this.nextImage}
previousImage={this.previousImage}
/>
</div>
))
}
if (data.myAlbums) {
galleryGroups = data.myAlbums.map((album, index) => (
<div key={album.id}>
<AlbumTitle album={album} />
<PhotoGallery
onSelectImage={photoIndex => {
this.setActiveImage(index, photoIndex)
}}
activeIndex={
this.state.activeAlbumIndex == index
? this.state.activePhotoIndex
: -1
}
presenting={this.state.presenting === index}
setPresenting={presenting =>
this.setPresenting(presenting, index)
}
loading={loading}
photos={album.photos}
nextImage={this.nextImage}
previousImage={this.previousImage}
/>
</div>
))
}
let activeImage = null
if (this.state.activeAlbumIndex != -1) {
activeImage =
data.myAlbums[this.state.activeAlbumIndex].photos[
this.state.activePhotoIndex
].id
}
let activeImage = null
if (this.state.activeAlbumIndex != -1) {
activeImage =
data.myAlbums[this.state.activeAlbumIndex].photos[
this.state.activePhotoIndex
].id
}
return <div>{galleryGroups}</div>
}}
</Query>
)}
</SidebarConsumer>
return <div>{galleryGroups}</div>
}}
</Query>
</Layout>
)
}

16
ui/src/components/AlbumTitle.js
View File

@ -3,10 +3,18 @@ import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { Icon } from 'semantic-ui-react'
import { SidebarConsumer } from './sidebar/Sidebar'
import AlbumSidebar from './sidebar/AlbumSidebar'
const Header = styled.h1`
color: black;
margin: 24px 0 12px 0;
margin: 28px 0 12px 0 !important;
& a {
color: black;
&:hover {
text-decoration: underline;
}
}
`
const SettingsIcon = props => {
@ -21,7 +29,7 @@ const SettingsIcon = props => {
}
`
return <StyledIcon name="edit outline" size="small" {...props} />
return <StyledIcon name="settings" size="small" {...props} />
}
const AlbumTitle = ({ album, disableLink = false }) => {
@ -40,7 +48,7 @@ const AlbumTitle = ({ album, disableLink = false }) => {
{title}
<SettingsIcon
onClick={() => {
updateSidebar(<div>Title stuff {album.title}</div>)
updateSidebar(<AlbumSidebar albumId={album.id} />)
}}
/>
</Header>

83
ui/src/components/photoGallery/PhotoGallery.js
View File

@ -5,6 +5,8 @@ import { Photo } from './Photo'
import PresentView from './PresentView'
import PropTypes from 'prop-types'
import { fetchProtectedImage } from './ProtectedImage'
import { SidebarConsumer } from '../sidebar/Sidebar'
import PhotoSidebar from '../sidebar/PhotoSidebar'
const Gallery = styled.div`
display: flex;
@ -91,48 +93,59 @@ class PhotoGallery extends React.Component {
const activeImage = photos && activeIndex != -1 && photos[activeIndex]
let photoElements = null
if (photos) {
photos.filter(photo => photo.thumbnail)
const getPhotoElements = updateSidebar => {
let photoElements = null
if (photos) {
photos.filter(photo => photo.thumbnail)
photoElements = photos.map((photo, index) => {
const active = activeIndex == index
photoElements = photos.map((photo, index) => {
const active = activeIndex == index
let minWidth = 100
if (photo.thumbnail) {
minWidth = Math.floor(
(photo.thumbnail.width / photo.thumbnail.height) * 200
let minWidth = 100
if (photo.thumbnail) {
minWidth = Math.floor(
(photo.thumbnail.width / photo.thumbnail.height) * 200
)
}
return (
<Photo
key={photo.id}
photo={photo}
onSelectImage={index => {
updateSidebar(<PhotoSidebar imageId={photo.id} />)
onSelectImage(index)
}}
setPresenting={this.props.setPresenting}
minWidth={minWidth}
index={index}
active={active}
/>
)
}
})
}
return (
<Photo
key={photo.id}
photo={photo}
onSelectImage={onSelectImage}
setPresenting={this.props.setPresenting}
minWidth={minWidth}
index={index}
active={active}
/>
)
})
return photoElements
}
return (
<div>
<Gallery>
<Loader active={loading}>Loading images</Loader>
{photoElements}
<PhotoFiller />
</Gallery>
<PresentView
presenting={presenting}
image={activeImage && activeImage.id}
thumbnail={activeImage && activeImage.thumbnail.url}
imageLoaded={this.preloadImages()}
/>
</div>
<SidebarConsumer>
{({ updateSidebar }) => (
<div>
<Gallery>
<Loader active={loading}>Loading images</Loader>
{getPhotoElements(updateSidebar)}
<PhotoFiller />
</Gallery>
<PresentView
presenting={presenting}
image={activeImage && activeImage.id}
thumbnail={activeImage && activeImage.thumbnail.url}
imageLoaded={this.preloadImages()}
/>
</div>
)}
</SidebarConsumer>
)
}
}

30
ui/src/components/sidebar/AlbumSidebar.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
const albumQuery = gql`
query getAlbumSidebar($id: ID!) {
album(id: $id) {
id
title
}
}
`
const AlbumSidebar = ({ albumId }) => {
return (
<div>
<p>Album options</p>
<Query query={albumQuery} variables={{ id: albumId }}>
{({ loading, error, data }) => {
if (loading) return <div>Loading...</div>
if (error) return <div>{error.message}</div>
return <h1>{data.album.title}</h1>
}}
</Query>
</div>
)
}
export default AlbumSidebar

7
ui/src/components/sidebar/Sidebar.js
View File

@ -25,10 +25,13 @@ class Sidebar extends React.Component {
super(props)
this.state = {
content: 'Start value',
content: null,
}
this.update = content => this.setState({ content })
this.update = content => {
console.log('Updating sidebar', content)
this.setState({ content })
}
}
render() {