feat: make selectionnable the size of the markdown modal

Inist-CNRS · Jul 18, 2024 · 97817f9 · 97817f9
1 parent cdb3ad6
commit 97817f9
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 6 deletions.
diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
@@ -1102,3 +1102,5 @@
 "routine_arg"	"Field N°"	"Champ N°"
 "routine_arg_add"	"Add a new field"	"Ajouter un nouveau champ"
 "routine_arg_delete"	"Delete this field"	"Supprimer ce champ"
+"label_format_fullscreen"	"Full screen"	"plein écran"
+"label_format_size"	"Size"	"Taille"
diff --git a/src/app/js/formats/text/markdown/modal/MarkdownModalAdmin.js b/src/app/js/formats/text/markdown/modal/MarkdownModalAdmin.js
@@ -3,17 +3,22 @@ import translate from 'redux-polyglot/translate';
 import PropTypes from 'prop-types';
 import { polyglot as polyglotPropTypes } from '../../../../propTypes';
 import { FormatDefaultParamsFieldSet } from '../../../utils/components/field-set/FormatFieldSets';
-import { MenuItem, TextField } from '@mui/material';
+import TextField from '@mui/material/TextField';
 import FormatGroupedFieldSet from '../../../utils/components/field-set/FormatGroupedFieldSet';
+import MenuItem from '@mui/material/MenuItem';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 
 export const defaultArgs = {
     type: 'text',
     label: '',
+    fullScreen: false,
+    maxWidth: 'sm',
 };
 
 const MarkdownModalAdmin = (props) => {
     const { args, p, onChange } = props;
-    const { type, label } = args;
+    const { type, label, fullScreen, maxWidth } = args;
 
     const handleType = (event) => {
         onChange({
@@ -29,6 +34,20 @@ const MarkdownModalAdmin = (props) => {
         });
     };
 
+    const handleFullScreen = (_, newFullScreen) => {
+        onChange({
+            ...args,
+            fullScreen: newFullScreen,
+        });
+    };
+
+    const handleSize = (event) => {
+        onChange({
+            ...args,
+            maxWidth: event.target.value,
+        });
+    };
+
     return (
         <FormatGroupedFieldSet>
             <FormatDefaultParamsFieldSet defaultExpanded>
@@ -56,6 +75,30 @@ const MarkdownModalAdmin = (props) => {
                     onChange={handleLabel}
                     value={label}
                 />
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={fullScreen}
+                            onChange={handleFullScreen}
+                        />
+                    }
+                    label={p.t('label_format_fullscreen')}
+                />
+                {!fullScreen ? (
+                    <TextField
+                        fullWidth
+                        select
+                        label={p.t('label_format_size')}
+                        onChange={handleSize}
+                        value={maxWidth}
+                    >
+                        <MenuItem value="xs">xs</MenuItem>
+                        <MenuItem value="sm">sm</MenuItem>
+                        <MenuItem value="md">md</MenuItem>
+                        <MenuItem value="lg">lg</MenuItem>
+                        <MenuItem value="xl">xl</MenuItem>
+                    </TextField>
+                ) : null}
             </FormatDefaultParamsFieldSet>
         </FormatGroupedFieldSet>
     );
@@ -65,6 +108,8 @@ MarkdownModalAdmin.propTypes = {
     args: PropTypes.shape({
         type: PropTypes.oneOf(['text', 'column']),
         label: PropTypes.string,
+        fullScreen: PropTypes.bool,
+        maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
     }),
     onChange: PropTypes.func.isRequired,
     p: polyglotPropTypes.isRequired,

diff --git a/src/app/js/formats/text/markdown/modal/MarkdownModalView.js b/src/app/js/formats/text/markdown/modal/MarkdownModalView.js
@@ -5,6 +5,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import IconButton from '@mui/material/IconButton';
+import Container from '@mui/material/Container';
 import CloseIcon from '@mui/icons-material/Close';
 import PropTypes from 'prop-types';
 
@@ -21,6 +22,8 @@ const MarkdownModalView = ({
     fields,
     type,
     label,
+    fullScreen,
+    maxWidth,
 }) => {
     const [open, setOpen] = useState(false);
 
@@ -49,10 +52,41 @@ const MarkdownModalView = ({
         return <InvalidFormat format={field.format} value={value} />;
     }
 
-    return (
-        <div className={className}>
-            <Button onClick={handleClickOpen}>{buttonLabel}</Button>
-            <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    const CustomDialog = () => {
+        if (fullScreen) {
+            return (
+                <Dialog open={open} onClose={handleClose} fullScreen>
+                    <DialogTitle>{buttonLabel}</DialogTitle>
+                    <IconButton
+                        aria-label="close"
+                        onClick={handleClose}
+                        sx={{
+                            position: 'absolute',
+                            right: 8,
+                            top: 8,
+                            color: 'var(--text-main)',
+                        }}
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                    <DialogContent dividers>
+                        <Container maxWidth="xl">
+                            <div
+                                dangerouslySetInnerHTML={{ __html: content }}
+                            ></div>
+                        </Container>
+                    </DialogContent>
+                </Dialog>
+            );
+        }
+
+        return (
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                maxWidth={maxWidth}
+                fullWidth
+            >
                 <DialogTitle>{buttonLabel}</DialogTitle>
                 <IconButton
                     aria-label="close"
@@ -70,6 +104,15 @@ const MarkdownModalView = ({
                     <div dangerouslySetInnerHTML={{ __html: content }}></div>
                 </DialogContent>
             </Dialog>
+        );
+    };
+
+    return (
+        <div className={className}>
+            <Button onClick={handleClickOpen} variant="contained">
+                {buttonLabel}
+            </Button>
+            <CustomDialog />
         </div>
     );
 };
@@ -81,6 +124,8 @@ MarkdownModalView.propTypes = {
     resource: PropTypes.object.isRequired,
     type: PropTypes.oneOf(['text', 'column']),
     label: PropTypes.string.isRequired,
+    fullScreen: PropTypes.bool,
+    maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
 };
 
 MarkdownModalView.defaultProps = {