colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

suggestions 

Signed-off-by: eternal-flame-AD <yume@yumechi.jp>
This commit is contained in:
eternal-flame-AD 2025-08-05 15:31:05 -05:00
parent d929e66aa2
commit 8741d1e50d
No known key found for this signature in database
1 changed files with 57 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
ui/src/message/Message.tsx
View File

@ -1,4 +1,4 @@
import {Button, Theme} from '@mui/material'; import {Button, Theme, useMediaQuery, useTheme} from '@mui/material';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import {makeStyles} from 'tss-react/mui'; import {makeStyles} from 'tss-react/mui';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
@ -33,6 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
}, },
messageContentWrapper: { messageContentWrapper: {
minWidth: 200, minWidth: 200,
width: '100%',
}, },
image: { image: {
marginRight: 15, marginRight: 15,
@ -40,34 +41,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
width: 32, width: 32,
height: 32, height: 32,
}, },
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
appName: {
opacity: 0.7,
}, },
date: { date: {
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
order: 1,
flexBasis: '100%',
opacity: 0.7, opacity: 0.7,
}, },
}, },
messageWrapper: {
display: 'grid',
gridTemplateColumns: '70px 1fr',
[theme.breakpoints.down('sm')]: {
gridTemplateColumns: '1fr',
},
gap: 16,
width: '100%',
},
actionsWrapper: {
flex: 1,
display: 'flex',
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'flex-start',
},
imageWrapper: { imageWrapper: {
display: 'flex', display: 'flex',
}, },
@ -131,10 +112,12 @@ const Message = ({
onExpand, onExpand,
expanded: initialExpanded, expanded: initialExpanded,
}: IProps) => { }: IProps) => {
const theme = useTheme();
const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null); const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null);
const {classes} = useStyles(); const {classes} = useStyles();
const [expanded, setExpanded] = React.useState(initialExpanded); const [expanded, setExpanded] = React.useState(initialExpanded);
const [isOverflowing, setOverflowing] = React.useState(false); const [isOverflowing, setOverflowing] = React.useState(false);
const dateWrapped = useMediaQuery(theme.breakpoints.down('md'));
React.useEffect(() => { React.useEffect(() => {
setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight); setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
@ -163,73 +146,61 @@ const Message = ({
borderLeftWidth: 6, borderLeftWidth: 6,
borderLeftStyle: 'solid', borderLeftStyle: 'solid',
}}> }}>
<div className={classes.messageWrapper}> <div style={{display: 'flex', width: '100%'}}>
{image !== null ? ( <div className={classes.imageWrapper}>
<img {image !== null ? (
src={config.get('url') + image} <img
alt={`${appName} logo`} src={config.get('url') + image}
width="70" alt={`${appName} logo`}
height="70" width="70"
className={classes.image} height="70"
/> className={classes.image}
) : null} />
<div style={{width: '100%'}}> ) : null}
<div style={{display: 'flex', width: '100%'}}> </div>
<div className={classes.messageContentWrapper}> <div className={classes.messageContentWrapper}>
<div className={classes.header}> <div className={classes.header}>
<Typography <Typography className={`${classes.headerTitle} title`} variant="h5">
className={`${classes.headerTitle} title`} {title}
variant="h5">
{title}
</Typography>
</div>
<div className={classes.appName}>
<Typography variant="body1" className={classes.date}>
{appName}
</Typography>
</div>
</div>
<div className={classes.actionsWrapper}>
<Typography variant="body1" className={classes.date}>
<TimeAgo
date={date}
formatter={makeIntlFormatter({
style: 'narrow',
})}
/>
</Typography>
<IconButton
onClick={fDelete}
className={`${classes.trash} delete`}
size="large">
<Delete />
</IconButton>
</div>
</div>
<div>
<Typography
component="div"
ref={setPreviewRef}
className={`${classes.content} content ${
isOverflowing && expanded ? 'expanded' : ''
}`}>
{renderContent()}
</Typography> </Typography>
<Typography variant="body1" className={classes.date}>
<TimeAgo
date={date}
formatter={makeIntlFormatter({
style: dateWrapped ? 'long' : 'narrow',
})}
/>
</Typography>
<IconButton
onClick={fDelete}
className={`${classes.trash} delete`}
size="large">
<Delete />
</IconButton>
</div> </div>
{isOverflowing && (
<Button <Typography
style={{marginTop: 16}} component="div"
onClick={togglePreviewHeight} ref={setPreviewRef}
variant="contained" className={`${classes.content} content ${
color="primary" isOverflowing && expanded ? 'expanded' : ''
size="large" }`}>
fullWidth={true} {renderContent()}
startIcon={expanded ? <ExpandLess /> : <ExpandMore />}> </Typography>
{expanded ? 'Read Less' : 'Read More'}
</Button>
)}
</div> </div>
</div> </div>
{isOverflowing && (
<Button
style={{marginTop: 16}}
onClick={togglePreviewHeight}
variant="contained"
color="primary"
size="large"
fullWidth={true}
startIcon={expanded ? <ExpandLess /> : <ExpandMore />}>
{expanded ? 'Read Less' : 'Read More'}
</Button>
)}
</Container> </Container>
</div> </div>
); );