Skip to content

Commit 1404e8f

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

3 files changed

Lines changed: 131 additions & 53 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: 128 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ 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,
2325
},
2426
headerTitle: {
2527
flex: 1,
@@ -29,18 +31,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
2931
marginRight: -15,
3032
},
3133
wrapperPadding: {
32-
marginBottom: 12,
34+
marginBottom: theme.spacing(2),
35+
[theme.breakpoints.down('sm')]: {
36+
marginBottom: theme.spacing(1),
37+
},
3338
},
3439
messageContentWrapper: {
3540
minWidth: 200,
3641
width: '100%',
3742
},
3843
image: {
39-
marginRight: 15,
40-
[theme.breakpoints.down('md')]: {
41-
width: 32,
42-
height: 32,
43-
},
44+
width: '100%',
45+
height: '100%',
4446
},
4547
date: {
4648
[theme.breakpoints.down('md')]: {
@@ -50,7 +52,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
5052
},
5153
},
5254
imageWrapper: {
53-
display: 'flex',
55+
marginRight: 15,
56+
width: 50,
57+
height: 50,
5458
},
5559
plainContent: {
5660
whiteSpace: 'pre-wrap',
@@ -64,6 +68,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
6468
},
6569
'& p': {
6670
margin: 0,
71+
wordBreak: 'break-word',
6772
},
6873
'& a': {
6974
color: '#ff7f50',
@@ -121,7 +126,7 @@ const Message = ({
121126
const {classes} = useStyles();
122127
const [expanded, setExpanded] = React.useState(initialExpanded);
123128
const [isOverflowing, setOverflowing] = React.useState(false);
124-
const dateWrapped = useMediaQuery(theme.breakpoints.down('md'));
129+
const wideHeader = useMediaQuery(theme.breakpoints.down('md'));
125130

126131
React.useEffect(() => {
127132
setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
@@ -150,48 +155,33 @@ const Message = ({
150155
borderLeftWidth: 6,
151156
borderLeftStyle: 'solid',
152157
}}>
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>
158+
{wideHeader ? (
159+
<HeaderSmall
160+
fDelete={fDelete}
161+
title={title}
162+
appName={appName}
163+
image={image}
164+
date={date}
165+
/>
166+
) : (
167+
<HeaderWide
168+
fDelete={fDelete}
169+
title={title}
170+
appName={appName}
171+
image={image}
172+
date={date}
173+
/>
174+
)}
185175

186-
<Typography
187-
component="div"
188-
ref={setPreviewRef}
189-
className={`${classes.content} content ${
190-
isOverflowing && expanded ? 'expanded' : ''
191-
}`}>
192-
{renderContent()}
193-
</Typography>
194-
</div>
176+
<div className={classes.messageContentWrapper}>
177+
<Typography
178+
component="div"
179+
ref={setPreviewRef}
180+
className={`${classes.content} content ${
181+
isOverflowing && expanded ? 'expanded' : ''
182+
}`}>
183+
{renderContent()}
184+
</Typography>
195185
</div>
196186
{isOverflowing && (
197187
<Button
@@ -210,4 +200,91 @@ const Message = ({
210200
);
211201
};
212202

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

0 commit comments

Comments
 (0)