monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

shortening info tag

Browse Source
This commit is contained in:
monoid 2021-01-15 21:51:36 +09:00
parent dfc154b711
commit 29beb1dc80
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/client/component/contentinfo.tsx
View File

@ -43,9 +43,9 @@ const useStyles = makeStyles((theme: Theme) => ({
overflowY: 'hidden', overflowY: 'hidden',
}, },
short_subinfoContainer:{ short_subinfoContainer:{
[theme.breakpoints.up("xs")]:{ [theme.breakpoints.down("md")]:{
display:'none', display:'none',
} },
}, },
short_root:{ short_root:{
overflowY:'hidden', overflowY:'hidden',
@ -103,8 +103,10 @@ export const ContentInfo = (props: {
<Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{ <Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{
pathname:makeContentReaderUrl(document.id) pathname:makeContentReaderUrl(document.id)
}}> }}>
<ThumbnailContainer content={document} {document.deleted_at === null ?
className={propclasses.thumbnail_content || thumbnail_content}/> (<ThumbnailContainer content={document}
className={propclasses.thumbnail_content || thumbnail_content}/>)
: (<Typography className={propclasses.thumbnail_content || thumbnail_content} variant='h4'>Deleted</Typography>)}
</Link> </Link>
<Box className={propclasses.infoContainer || classes.infoContainer}> <Box className={propclasses.infoContainer || classes.infoContainer}>
<Link variant='h5' color='inherit' component={RouterLink} to={{ <Link variant='h5' color='inherit' component={RouterLink} to={{
@ -114,6 +116,10 @@ export const ContentInfo = (props: {
{document.title} {document.title}
</Link> </Link>
<Box className={propclasses.subinfoContainer || subinfoContainer}> <Box className={propclasses.subinfoContainer || subinfoContainer}>
{props.short ? (<Box className={propclasses.tag_list || classes.tag_list}>{document.tags.map(x =>
(<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>)
)}</Box>) : (
<>
<Typography variant='subtitle1'>Artist</Typography> <Typography variant='subtitle1'>Artist</Typography>
<Box style={{ alignSelf: "center" }}>{artists.join(", ")}</Box> <Box style={{ alignSelf: "center" }}>{artists.join(", ")}</Box>
<Typography variant='subtitle1'>Tags</Typography> <Typography variant='subtitle1'>Tags</Typography>
@ -122,6 +128,8 @@ export const ContentInfo = (props: {
return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>); return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
})} })}
</Box> </Box>
</>)
}
</Box> </Box>
</Box> </Box>
</Paper>); </Paper>);

13
src/client/component/tagchip.tsx
View File

@ -59,6 +59,15 @@ export const ColorChip = (props:Omit<ChipProps,"color"> & {color: string})=>{
} }
export const TagChip = (props:Omit<ChipProps,"color"> & {tagname: string})=>{ export const TagChip = (props:Omit<ChipProps,"color"> & {tagname: string})=>{
const {tagname,...rest} = props; const {tagname,label,...rest} = props;
return <ColorChip color={getTagColorName(tagname)} {...rest}></ColorChip>; let newlabel:string|undefined = undefined;
if(typeof label === "string"){
if(label.startsWith("female:")){
newlabel ="♀ "+label.substr(7);
}
else if(label.startsWith("male:")){
newlabel = "♂ "+label.substr(5);
}
}
return <ColorChip color={getTagColorName(tagname)} label={newlabel||label} {...rest}></ColorChip>;
} }