Skip to content

Commit 27741d6

Browse files
nicoaleenicoalee
committed
feat: added responsiveness to edit study page
1 parent 8fd38e5 commit 27741d6

31 files changed

+623
-644
lines changed

‎compose/neurosynth-frontend/src/components/Buttons/LoadingButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ColorOptions } from 'index';
44

55
const LoadingButton: React.FC<
66
ButtonProps & {
7-
text: string;
7+
text: string | React.ReactNode;
88
isLoading?: boolean;
99
loaderColor?: ColorOptions;
1010
}

‎compose/neurosynth-frontend/src/components/EditMetadata/AddMetadataRow.tsx‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Box, Button, TextField } from '@mui/material';
22
import React, { useCallback, useState } from 'react';
3-
import { IAddMetadataRowModel, EPropertyType, IMetadataRowModel } from './EditMetadata.types';
4-
import EditMetadataValue from './EditMetadataValue';
3+
import { EPropertyType, IAddMetadataRowModel, IMetadataRowModel } from './EditMetadata.types';
54
import EditMetadataRowStyles from './EditMetadataRow.styles';
5+
import EditMetadataValue from './EditMetadataValue';
66
import ToggleType from './ToggleType';
77

88
export const getStartValFromType = (type: EPropertyType): boolean | number | string | null => {
@@ -50,7 +50,7 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
5050
setCurrType(newType);
5151
}, []);
5252

53-
const handleAdd = (event: React.MouseEvent) => {
53+
const handleAdd = () => {
5454
if (metadataRow.metadataKey.length > 0) {
5555
const wasAdded = onAddMetadataRow(metadataRow);
5656

@@ -66,9 +66,7 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
6666
}
6767
};
6868

69-
const handleMetadataKeyChange = (
70-
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
71-
) => {
69+
const handleMetadataKeyChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
7270
setIsValid(true);
7371
setMetadataRow((prevVal) => {
7472
return {
@@ -88,8 +86,8 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
8886
};
8987

9088
return (
91-
<Box sx={EditMetadataRowStyles.tableRow}>
92-
{showToggleType && (
89+
<>
90+
{showToggleType ? (
9391
<Box
9492
sx={{
9593
display: 'flex',
@@ -106,14 +104,10 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
106104
disabled={disabled}
107105
/>
108106
</Box>
107+
) : (
108+
<Box></Box>
109109
)}
110-
<Box
111-
sx={[
112-
EditMetadataRowStyles.tableCell,
113-
EditMetadataRowStyles.key,
114-
{ verticalAlign: 'baseline' },
115-
]}
116-
>
110+
<Box>
117111
<TextField
118112
size="small"
119113
disabled={disabled}
@@ -130,13 +124,7 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
130124
{/* {isValid && <Box sx={{ height: '22px' }}></Box>} */}
131125
</Box>
132126
{showMetadataValueInput && (
133-
<Box
134-
sx={[
135-
EditMetadataRowStyles.tableCell,
136-
EditMetadataRowStyles.key,
137-
{ width: '100%' },
138-
]}
139-
>
127+
<Box>
140128
<EditMetadataValue
141129
placeholderText={valuePlaceholderText}
142130
onEditMetadataValue={handleMetadataValueChange}
@@ -147,7 +135,7 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
147135
{/* <Box sx={{ height: '22px' }}></Box> */}
148136
</Box>
149137
)}
150-
<Box sx={EditMetadataRowStyles.tableCell}>
138+
<Box>
151139
<Button
152140
sx={EditMetadataRowStyles.updateButton}
153141
disabled={!(metadataRow.metadataKey.length > 0) || disabled}
@@ -160,7 +148,7 @@ const AddMetadataRow: React.FC<IAddMetadataRowModel> = (props) => {
160148
{/* This component is added so that the error message doesn't mess up the row alignment */}
161149
{/* <Box sx={{ height: '22px' }}></Box> */}
162150
</Box>
163-
</Box>
151+
</>
164152
);
165153
};
166154

‎compose/neurosynth-frontend/src/components/EditMetadata/EditMetadata.styles.ts‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,14 @@
11
import { Style } from '../..';
22

33
const EditMetadataStyles: Style = {
4-
table: {
5-
display: 'block',
6-
height: '100%',
7-
width: '100%',
8-
borderCollapse: 'separate',
9-
borderSpacing: '15px 0px',
10-
},
11-
tableOverflow: {
12-
maxHeight: {
13-
xs: '200px',
14-
md: '350px',
15-
},
16-
overflow: 'auto',
4+
grid: {
5+
display: 'grid',
6+
gridTemplateColumns: 'auto 1fr 1fr 70px',
7+
gap: 1,
178
},
189
hr: {
19-
margin: '0px 0px 15px 0px',
20-
},
21-
noMetadataMessage: {
22-
color: 'warning.dark',
23-
marginBottom: '15px',
10+
gridColumn: '1 / -1',
11+
my: 2,
2412
},
2513
};
2614

‎compose/neurosynth-frontend/src/components/EditMetadata/EditMetadata.tsx‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import EditMetadataStyles from './EditMetadata.styles';
33
import EditMetadataRow from './EditMetadataRow';
44
import AddMetadataRow from './AddMetadataRow';
55
import { IEditMetadataModel, getType } from './EditMetadata.types';
6-
import { Box, Divider } from '@mui/material';
6+
import { Box, Divider, Typography } from '@mui/material';
77

88
const EditMetadata: React.FC<IEditMetadataModel> = React.memo((props) => {
99
const {
@@ -17,34 +17,32 @@ const EditMetadata: React.FC<IEditMetadataModel> = React.memo((props) => {
1717
} = props;
1818

1919
return (
20-
<>
21-
<Box sx={[EditMetadataStyles.table, { height: '70px' }]}>
22-
<AddMetadataRow
23-
disabled={disabled}
24-
keyPlaceholderText={keyPlaceholderText}
25-
valuePlaceholderText={valuePlaceholderText}
26-
onAddMetadataRow={onMetadataRowAdd}
27-
/>
28-
</Box>
20+
<Box sx={EditMetadataStyles.grid}>
21+
<AddMetadataRow
22+
disabled={disabled}
23+
keyPlaceholderText={keyPlaceholderText}
24+
valuePlaceholderText={valuePlaceholderText}
25+
onAddMetadataRow={onMetadataRowAdd}
26+
/>
2927
<Divider sx={EditMetadataStyles.hr} />
3028
{metadata.length === 0 && (
31-
<Box component="div" sx={EditMetadataStyles.noMetadataMessage}>
32-
No Metadata
29+
<Box>
30+
<Typography gutterBottom color="warning.dark">
31+
No Metadata
32+
</Typography>
3333
</Box>
3434
)}
35-
<Box sx={[EditMetadataStyles.table, EditMetadataStyles.tableOverflow]}>
36-
{metadata.map((metadataRow) => (
37-
<EditMetadataRow
38-
key={metadataRow.metadataKey}
39-
metadataValueType={getType(metadataRow.metadataValue)}
40-
onMetadataRowEdit={onMetadataRowEdit}
41-
onMetadataRowDelete={onMetadataRowDelete}
42-
metadataRow={metadataRow}
43-
disabled={disabled}
44-
/>
45-
))}
46-
</Box>
47-
</>
35+
{metadata.map((metadataRow) => (
36+
<EditMetadataRow
37+
key={metadataRow.metadataKey}
38+
metadataValueType={getType(metadataRow.metadataValue)}
39+
onMetadataRowEdit={onMetadataRowEdit}
40+
onMetadataRowDelete={onMetadataRowDelete}
41+
metadataRow={metadataRow}
42+
disabled={disabled}
43+
/>
44+
))}
45+
</Box>
4846
);
4947
});
5048

‎compose/neurosynth-frontend/src/components/EditMetadata/EditMetadataRow.styles.ts‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,9 @@
11
import { Style } from '../..';
22

33
const EditMetadataRowStyles: Style = {
4-
tableRow: {
5-
display: 'table-row',
6-
height: '100%',
7-
},
8-
addMetadata: {
9-
marginBottom: '15px',
10-
},
11-
tableCell: {
12-
display: 'table-cell',
13-
height: '100%',
14-
verticalAlign: 'middle',
15-
},
16-
spacer: {
17-
height: '8px',
18-
},
19-
nullContent: {
20-
color: 'blue',
21-
fontSize: '12px',
22-
},
23-
key: {
24-
minWidth: '240px',
25-
},
264
updateButton: {
275
width: '60px',
6+
height: '40px',
287
},
298
addMetadataTextfield: {
309
width: '100%',

‎compose/neurosynth-frontend/src/components/EditMetadata/EditMetadataRow.tsx‎

Lines changed: 17 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import React from 'react';
2-
import EditMetadataRowStyles from './EditMetadataRow.styles';
32
import { Button, Box } from '@mui/material';
43
import { useCallback } from 'react';
54
import { getStartValFromType } from './AddMetadataRow';
6-
import {
7-
EPropertyType,
8-
IEditMetadataRowModel,
9-
IMetadataRowModel,
10-
} from 'components/EditMetadata/EditMetadata.types';
5+
import { EPropertyType, IEditMetadataRowModel, IMetadataRowModel } from 'components/EditMetadata/EditMetadata.types';
116
import ToggleType from './ToggleType';
127
import EditMetadataValue from './EditMetadataValue';
138

@@ -37,50 +32,30 @@ const EditMetadataRow: React.FC<IEditMetadataRowModel> = React.memo((props) => {
3732
[onMetadataRowEdit, metadataRow]
3833
);
3934

40-
const handleDelete = (_event: React.MouseEvent) => {
35+
const handleDelete = () => {
4136
onMetadataRowDelete(metadataRow);
4237
};
4338

4439
return (
4540
<>
46-
<Box sx={EditMetadataRowStyles.tableRow}>
47-
<ToggleType
48-
disabled={disabled}
41+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
42+
<ToggleType disabled={disabled} type={props.metadataValueType} onToggle={handleToggle} />
43+
</Box>
44+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
45+
<b>{metadataRow.metadataKey}</b>
46+
</Box>
47+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
48+
<EditMetadataValue
49+
onEditMetadataValue={handleEditMetadataValue}
50+
value={props.metadataRow.metadataValue}
4951
type={props.metadataValueType}
50-
onToggle={handleToggle}
52+
disabled={disabled}
5153
/>
52-
<Box
53-
sx={[
54-
EditMetadataRowStyles.tableCell,
55-
EditMetadataRowStyles.key,
56-
{ verticalAlign: 'middle !important' },
57-
]}
58-
>
59-
<Box component="span">
60-
<b>{metadataRow.metadataKey}</b>
61-
</Box>
62-
</Box>
63-
<Box sx={[EditMetadataRowStyles.tableCell, { width: '100%' }]}>
64-
<EditMetadataValue
65-
onEditMetadataValue={handleEditMetadataValue}
66-
value={props.metadataRow.metadataValue}
67-
type={props.metadataValueType}
68-
disabled={disabled}
69-
/>
70-
</Box>
71-
<Box sx={EditMetadataRowStyles.tableCell}>
72-
<Button
73-
sx={EditMetadataRowStyles.updateButton}
74-
color="error"
75-
onClick={handleDelete}
76-
disabled={disabled}
77-
>
78-
DELETE
79-
</Button>
80-
</Box>
8154
</Box>
82-
<Box sx={EditMetadataRowStyles.tableRow}>
83-
<Box sx={[EditMetadataRowStyles.tableCell, EditMetadataRowStyles.spacer]}></Box>
55+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
56+
<Button color="error" size="small" onClick={handleDelete} disabled={disabled}>
57+
DELETE
58+
</Button>
8459
</Box>
8560
</>
8661
);

‎compose/neurosynth-frontend/src/components/EditMetadata/EditMetadataValue.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,7 @@ const EditMetadataValue: React.FC<IEditMetadataValue> = (props) => {
3737
<FormGroup>
3838
<FormControlLabel
3939
disabled={disabled}
40-
sx={
41-
value
42-
? EditMetadataValueStyles.checkedTrue
43-
: EditMetadataValueStyles.checkedFalse
44-
}
40+
sx={value ? EditMetadataValueStyles.checkedTrue : EditMetadataValueStyles.checkedFalse}
4541
control={
4642
<Switch
4743
onChange={(event, checked) => {

‎compose/neurosynth-frontend/src/components/EditMetadata/ToggleType.styles.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,6 @@ const ToggleTypeStyles: Style = {
4141
minWidth: '118px',
4242
height: '40px',
4343
},
44-
toggleItemContainer: {
45-
height: '100%',
46-
display: 'table-cell',
47-
verticalAlign: 'middle',
48-
},
4944
};
5045

5146
export default ToggleTypeStyles;

‎compose/neurosynth-frontend/src/components/EditMetadata/ToggleType.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const ToggleType: React.FC<IToggleTypeModel> = React.memo((props) => {
2222
const myClass: 'type_number' | 'type_boolean' | 'type_string' | 'type_none' = `type_${type}`;
2323

2424
return (
25-
<Box sx={ToggleTypeStyles.toggleItemContainer}>
25+
<Box>
2626
<FormControl variant="outlined">
2727
<Select
2828
disabled={disabled}

0 commit comments

Comments
 (0)