Skip to content

Commit ff086d5

Browse files
jmattheisjmattheis
committed
fix: less whitespace in message & add app name
1 parent deb383a commit ff086d5

3 files changed

Lines changed: 134 additions & 51 deletions

File tree

‎ui/src/common/DefaultPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const DefaultPage: FC<React.PropsWithChildren<IProps>> = ({
1717
<main style={{margin: '0 auto', maxWidth}}>
1818
<Grid container spacing={4}>
1919
<Grid size={{xs: 12}} style={{display: 'flex', flexWrap: 'wrap'}}>
20-
<Typography variant="h4" style={{flex: 1}}>
20+
<Typography variant="h4" style={{flex: 1, minWidth: 300}}>
2121
{title}
2222
</Typography>
2323
{rightControl}

‎ui/src/layout/Layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
2424
content: {
2525
margin: '0 auto',
2626
marginTop: 64,
27-
padding: theme.spacing(4),
27+
padding: theme.spacing(3),
2828
width: '100%',
2929
[theme.breakpoints.down('sm')]: {
3030
marginTop: 0,
31+
padding: theme.spacing(1),
3132
},
3233
},
3334
}));

‎ui/src/message/Message.tsx‎

Lines changed: 131 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ const PREVIEW_LENGTH = 500;
1818
const useStyles = makeStyles()((theme: Theme) => ({
1919
header: {
2020
display: 'flex',
21-
flexWrap: 'wrap',
22-
marginBottom: 0,
21+
width: '100%',
22+
alignItems: 'start',
23+
alignContent: 'center',
24+
paddingBottom: 5,
25+
wordBreak: 'break-all',
2326
},
2427
headerTitle: {
2528
flex: 1,
@@ -29,17 +32,21 @@ const useStyles = makeStyles()((theme: Theme) => ({
2932
marginRight: -15,
3033
},
3134
wrapperPadding: {
32-
marginBottom: 12,
35+
marginBottom: theme.spacing(2),
36+
[theme.breakpoints.down('sm')]: {
37+
marginBottom: theme.spacing(1),
38+
},
3339
},
3440
messageContentWrapper: {
3541
minWidth: 200,
3642
width: '100%',
3743
},
3844
image: {
39-
marginRight: 15,
45+
width: 50,
46+
height: 50,
4047
[theme.breakpoints.down('md')]: {
41-
width: 32,
42-
height: 32,
48+
width: 30,
49+
height: 30,
4350
},
4451
},
4552
date: {
@@ -50,7 +57,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
5057
},
5158
},
5259
imageWrapper: {
53-
display: 'flex',
60+
marginRight: 15,
61+
width: 50,
62+
height: 50,
5463
},
5564
plainContent: {
5665
whiteSpace: 'pre-wrap',
@@ -64,6 +73,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
6473
},
6574
'& p': {
6675
margin: 0,
76+
wordBreak: 'break-word',
6777
},
6878
'& a': {
6979
color: '#ff7f50',
@@ -121,7 +131,7 @@ const Message = ({
121131
const {classes} = useStyles();
122132
const [expanded, setExpanded] = React.useState(initialExpanded);
123133
const [isOverflowing, setOverflowing] = React.useState(false);
124-
const dateWrapped = useMediaQuery(theme.breakpoints.down('md'));
134+
const wideHeader = useMediaQuery(theme.breakpoints.down('md'));
125135

126136
React.useEffect(() => {
127137
setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
@@ -150,48 +160,33 @@ const Message = ({
150160
borderLeftWidth: 6,
151161
borderLeftStyle: 'solid',
152162
}}>
153-
<div style={{display: 'flex', width: '100%'}}>
154-
<div className={classes.imageWrapper}>
155-
{image !== null ? (
156-
<img
157-
src={config.get('url') + image}
158-
alt={`${appName} logo`}
159-
width="70"
160-
height="70"
161-
className={classes.image}
162-
/>
163-
) : null}
164-
</div>
165-
<div className={classes.messageContentWrapper}>
166-
<div className={classes.header}>
167-
<Typography className={`${classes.headerTitle} title`} variant="h5">
168-
{title}
169-
</Typography>
170-
<Typography variant="body1" className={classes.date}>
171-
<TimeAgo
172-
date={date}
173-
formatter={makeIntlFormatter({
174-
style: dateWrapped ? 'long' : 'narrow',
175-
})}
176-
/>
177-
</Typography>
178-
<IconButton
179-
onClick={fDelete}
180-
className={`${classes.trash} delete`}
181-
size="large">
182-
<Delete />
183-
</IconButton>
184-
</div>
163+
{wideHeader ? (
164+
<HeaderSmall
165+
fDelete={fDelete}
166+
title={title}
167+
appName={appName}
168+
image={image}
169+
date={date}
170+
/>
171+
) : (
172+
<HeaderWide
173+
fDelete={fDelete}
174+
title={title}
175+
appName={appName}
176+
image={image}
177+
date={date}
178+
/>
179+
)}
185180

186-
<Typography
187-
component="div"
188-
ref={setPreviewRef}
189-
className={`${classes.content} content ${
190-
isOverflowing && expanded ? 'expanded' : ''
191-
}`}>
192-
{renderContent()}
193-
</Typography>
194-
</div>
181+
<div className={classes.messageContentWrapper}>
182+
<Typography
183+
component="div"
184+
ref={setPreviewRef}
185+
className={`${classes.content} content ${
186+
isOverflowing && expanded ? 'expanded' : ''
187+
}`}>
188+
{renderContent()}
189+
</Typography>
195190
</div>
196191
{isOverflowing && (
197192
<Button
@@ -210,4 +205,91 @@ const Message = ({
210205
);
211206
};
212207

208+
const HeaderWide = ({
209+
appName,
210+
image,
211+
date,
212+
fDelete,
213+
title,
214+
}: Pick<IProps, 'appName' | 'image' | 'fDelete' | 'date' | 'title'>) => {
215+
const {classes} = useStyles();
216+
217+
return (
218+
<div className={classes.header}>
219+
<div className={classes.imageWrapper}>
220+
{image !== null ? (
221+
<img
222+
src={config.get('url') + image}
223+
alt={`${appName} logo`}
224+
width="50"
225+
height="50"
226+
className={classes.image}
227+
/>
228+
) : null}
229+
</div>
230+
<div className={classes.headerTitle}>
231+
<Typography className="title" variant="h5" lineHeight={1.2}>
232+
{title}
233+
</Typography>
234+
<Typography variant="subtitle1" fontSize={12} style={{opacity: 0.7}}>
235+
{appName}
236+
</Typography>
237+
</div>
238+
<Typography variant="body1" className={classes.date}>
239+
<TimeAgo date={date} formatter={makeIntlFormatter({style: 'narrow'})} />
240+
</Typography>
241+
<IconButton
242+
onClick={fDelete}
243+
style={{padding: 14}}
244+
className={`${classes.trash} delete`}
245+
size="large">
246+
<Delete />
247+
</IconButton>
248+
</div>
249+
);
250+
};
251+
const HeaderSmall = ({
252+
appName,
253+
image,
254+
date,
255+
fDelete,
256+
title,
257+
}: Pick<IProps, 'appName' | 'image' | 'fDelete' | 'date' | 'title'>) => {
258+
const {classes} = useStyles();
259+
260+
return (
261+
<div className={classes.header}>
262+
<div className={classes.headerTitle}>
263+
<Typography className="title" variant="h5" lineHeight={1.2}>
264+
{title}
265+
</Typography>
266+
<Typography variant="subtitle1" fontSize={12} style={{opacity: 0.7}}>
267+
{appName}
268+
</Typography>
269+
<Typography variant="body1" className={classes.date}>
270+
<TimeAgo date={date} formatter={makeIntlFormatter({style: 'long'})} />
271+
</Typography>
272+
</div>
273+
<div style={{display: 'flex', alignItems: 'end', flexDirection: 'column'}}>
274+
<IconButton
275+
onClick={fDelete}
276+
style={{padding: 14}}
277+
className={`${classes.trash} delete`}
278+
size="large">
279+
<Delete />
280+
</IconButton>
281+
<div style={{width: 30, height: 30}}>
282+
{image !== null ? (
283+
<img
284+
src={config.get('url') + image}
285+
alt={`${appName} logo`}
286+
className={classes.image}
287+
/>
288+
) : null}
289+
</div>
290+
</div>
291+
</div>
292+
);
293+
};
294+
213295
export default Message;

0 commit comments

Comments
 (0)