From 5002bc22f9c05102d1cc74a585ac3dbc41a5d308 Mon Sep 17 00:00:00 2001 From: monoid Date: Fri, 8 Jan 2021 10:46:19 +0900 Subject: [PATCH] headline --- src/client/app.tsx | 21 ++-- src/client/component/contentinfo.tsx | 85 +++++++++++--- src/client/component/galleryinfo.tsx | 71 ++++++++++++ src/client/{page => component}/headline.tsx | 91 ++++++++------- src/client/component/mod.ts | 5 +- src/client/component/navlist.tsx | 21 ++++ src/client/page/contentinfo.tsx | 49 +++++++-- src/client/page/gallery.tsx | 116 ++------------------ src/client/page/mod.ts | 2 + 9 files changed, 271 insertions(+), 190 deletions(-) create mode 100644 src/client/component/galleryinfo.tsx rename src/client/{page => component}/headline.tsx (67%) create mode 100644 src/client/component/navlist.tsx create mode 100644 src/client/page/mod.ts diff --git a/src/client/app.tsx b/src/client/app.tsx index 1376fbc..10c1a26 100644 --- a/src/client/app.tsx +++ b/src/client/app.tsx @@ -1,27 +1,24 @@ -import React from 'react'; +import React, { useRef, useState } from 'react'; import ReactDom from 'react-dom'; import {BrowserRouter, Route, Switch as RouterSwitch} from 'react-router-dom'; -import {Headline} from './page/headline'; -import {Gallery} from './page/gallery'; -import {ContentAbout} from './page/contentinfo'; +import { Gallery, ContentAbout} from './page/mod'; import './css/style.css'; const FooProfile = ()=>
test profile
; -const App = ()=> ( - - +const App = () => { + return ( - - + }> + }> + }>
404 Not Found
 - - -); + ); +}; ReactDom.render( , diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx index 2a8d4bf..901e8fd 100644 --- a/src/client/component/contentinfo.tsx +++ b/src/client/component/contentinfo.tsx @@ -34,34 +34,93 @@ const useStyles = makeStyles((theme: Theme) => ({ title: { marginLeft: theme.spacing(1), }, - InfoContainer: { + infoContainer: { + padding: theme.spacing(2), + }, + subinfoContainer: { display: 'grid', gridTemplateColumns: '100px auto', overflowY: 'hidden', - } + }, + short_subinfoContainer:{ + [theme.breakpoints.up("xs")]:{ + display:'none', + } + }, + short_root:{ + overflowY:'hidden', + display:'flex', + flexDirection: 'column', + [theme.breakpoints.up("sm")]:{ + height:200, + flexDirection: 'row', + }, + }, + short_thumbnail_anchor:{ + background: '#272733', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + [theme.breakpoints.up("sm")]:{ + width: theme.spacing(25), + height: theme.spacing(25), + flexShrink: 0, + } + }, + short_thumbnail_content: { + maxWidth: '100%', + maxHeight: '100%', + }, })) -export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => { +export const ContentInfo = (props: { + content: Content, children?: React.ReactNode, classes?: { + root?: string, + thumbnail_anchor?: string, + thumbnail_content?: string, + tag_list?: string, + title?: string, + infoContainer?: string, + subinfoContainer?: string + }, + gallery?:string, + short?:boolean +}) => { const classes = useStyles(); const theme = useTheme(); - const content = props?.content; + const content = props.content; + const propclasses = props.classes || {}; + + const rootName = props.short ? classes.short_root : classes.root; + const thumbnail_anchor = props.short ? classes.short_thumbnail_anchor : ""; + const thumbnail_content = props.short ? classes.short_thumbnail_content : + classes.thumbnail_content; + const subinfoContainer = props.short ? classes.short_subinfoContainer : + classes.subinfoContainer; let allTag = content.tags; const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7)); allTag = allTag.filter(x => !x.startsWith("artist:")); - return ( - - + return ( + + - - + + {content.title} - + Artist - {artists.join(", ")} + {artists.join(", ")} Tags - + {allTag.map(x => { return (); })} diff --git a/src/client/component/galleryinfo.tsx b/src/client/component/galleryinfo.tsx new file mode 100644 index 0000000..5a28888 --- /dev/null +++ b/src/client/component/galleryinfo.tsx @@ -0,0 +1,71 @@ +import { Box, Paper, Link, useMediaQuery, Portal, List, ListItem, ListItemIcon, Tooltip, ListItemText } from '@material-ui/core'; +import {useTheme, makeStyles, Theme} from '@material-ui/core/styles'; +import React, { useEffect, useState } from 'react'; +import ContentAccessor,{QueryListOption, Content} from '../accessor/contents'; +import {Link as RouterLink} from 'react-router-dom'; +import { LoadingCircle, ContentInfo, NavList, NavItem } from './mod'; +import {toQueryString} from '../accessor/util'; + + +const useStyles = makeStyles((theme:Theme)=>({ + root:{ + display:"grid", + gridGap: theme.spacing(4), + }, + anchor_thumbnail:{ + background: '#272733', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + [theme.breakpoints.up("sm")]:{ + width: theme.spacing(25), + height: theme.spacing(25), + flexShrink: 0, + } + }, + contentPaper:{ + overflowY:'hidden', + display:'flex', + flexDirection: 'column', + [theme.breakpoints.up("sm")]:{ + height:200, + flexDirection: 'row', + }, + }, + content_thumnail: { + maxWidth: '100%', + maxHeight: '100%', + }, +})); + +export type GalleryProp = { + option?:QueryListOption; +}; +type GalleryState = { + content:Content[]|undefined; +} + +export const GalleryInfo = (props: GalleryProp)=>{ + const [state,setState]= useState({content:undefined}); + useEffect(()=>{ + (async ()=>{ + const c = await ContentAccessor.findList(props.option); + setState({content:c}); + })() + },[props.option]); + const classes = useStyles(); + const queryString = toQueryString(props.option||{}); + + if(state.content === undefined){ + return (); + } + else{ + return ({ + state.content.map(x=>{ + return (); + }) + } + ); + } +} \ No newline at end of file diff --git a/src/client/page/headline.tsx b/src/client/component/headline.tsx similarity index 67% rename from src/client/page/headline.tsx rename to src/client/component/headline.tsx index cf7be25..9bbcb92 100644 --- a/src/client/page/headline.tsx +++ b/src/client/component/headline.tsx @@ -1,13 +1,13 @@ import ReactDom from 'react-dom'; -import React, { useState } from 'react'; +import React, { ReactNode, useState } from 'react'; import { Button, CssBaseline, Divider, IconButton, List, ListItem, Drawer, AppBar, Toolbar, Typography, InputBase, ListItemIcon, ListItemText, Menu, MenuItem, - Hidden, Tooltip + Hidden, Tooltip, Link } from '@material-ui/core'; import { makeStyles, Theme, useTheme, fade } from '@material-ui/core/styles'; -import { ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, ArrowBack as ArrowBackIcon, AccountCircle } from '@material-ui/icons'; -import {Link} from 'react-router-dom'; +import { ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, AccountCircle } from '@material-ui/icons'; +import { Link as RouterLink, useRouteMatch } from 'react-router-dom'; const drawerWidth = 240; @@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({ drawer: { flexShrink: 0, whiteSpace: "nowrap", - [theme.breakpoints.up("sm")]:{ + [theme.breakpoints.up("sm")]: { width: drawerWidth, }, }, @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, drawerClose: { overflowX: 'hidden', - [theme.breakpoints.up("sm")]:{ + [theme.breakpoints.up("sm")]: { width: theme.spacing(7) + 1, }, }, @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) => ({ ...theme.mixins.toolbar, }, content: { - display:'flex', + display: 'flex', flexFlow: 'column', flexGrow: 1, padding: theme.spacing(3), @@ -104,48 +104,43 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -export const Headline = (prop: { children?: React.ReactNode, navListItem?: React.ReactNode, isLogin?:boolean}) => { +export const Headline = (prop: { + children?: React.ReactNode, + navListItem?: React.ReactNode, + isLogin?: boolean, + menu: React.ReactNode +}) => { const [v, setv] = useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const classes = useStyles(); const theme = useTheme(); const toggleV = () => setv(!v); - const handleProfileMenuOpen = (e:React.MouseEvent)=>setAnchorEl(e.currentTarget); - const handleProfileMenuClose = ()=>setAnchorEl(null); + const handleProfileMenuOpen = (e: React.MouseEvent) => setAnchorEl(e.currentTarget); + const handleProfileMenuClose = () => setAnchorEl(null); const isProfileMenuOpened = Boolean(anchorEl); const menuId = 'primary-search-account-menu'; const isLogin = prop.isLogin || false; const renderProfileMenu = ( - Profile + > + Profile Logout ); - const drawer_contents = (<> -
- - {theme.direction === "ltr" ? : } - -
- - - - - - - - - - - {prop.navListItem} - - ); + const drawer_contents = (<> +
+ + {theme.direction === "ltr" ? : } + +
+ + {prop.menu} + ); return (
@@ -157,9 +152,9 @@ export const Headline = (prop: { children?: React.ReactNode, navListItem?: React className={classes.menuButton}> - + Ionian - +
@@ -170,29 +165,29 @@ export const Headline = (prop: { children?: React.ReactNode, navListItem?: React
{ isLogin ? - - - - : + + + + : } {renderProfileMenu}