Skip to content

Commit

Permalink
[1346] Change the Save icon for rich text editor
Browse files Browse the repository at this point in the history 
Bug: #1346
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
  • Loading branch information
@pcdavid @AxelRICHARD
pcdavid authored and AxelRICHARD committed Nov 29, 2022
1 parent 0ddb054 commit 9cdd7b6
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 59 deletions.
125 changes: 68 additions & 57 deletions ...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx
View file
Expand Up @@ -20,7 +20,7 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
import SaveAltIcon from '@material-ui/icons/SaveAlt';
import SaveIcon from '@material-ui/icons/Save';
import StrikethroughSIcon from '@material-ui/icons/StrikethroughS';
import SubjectIcon from '@material-ui/icons/Subject';
import TitleIcon from '@material-ui/icons/Title';
Expand All @@ -46,7 +46,14 @@ const useStyles = makeStyles((theme) => ({
},
paper: {
display: 'flex',
border: `1px solid ${theme.palette.divider}`,
flexDirection: 'row',
justifyContent: 'space-between',
borderBottom: `1px solid ${theme.palette.divider}`,
flexWrap: 'wrap',
},
formattingActions: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
divider: {
Expand Down Expand Up @@ -96,63 +103,67 @@ export const RichTextWidget = ({ widget, selection }: RichTextWidgetProps) => {
</Typography>
<div onFocus={() => setSelected(true)} onBlur={() => setSelected(false)} ref={ref} tabIndex={0}>
<Paper elevation={0} className={classes.paper}>
<div className={classes.formattingActions}>
<StyledToggleButtonGroup size="small">
<ToggleButton
classes={{ root: classes.button }}
selected
disabled={false}
value={'paragraph'}
key={'paragraph'}>
<SubjectIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'header1'}
key={'header1'}>
<TitleIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'bullet-list'}
key={'bullet-list'}>
<FormatListBulletedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'number-list'}
key={'number-list'}>
<FormatListNumberedIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
<Divider flexItem orientation="vertical" className={classes.divider} />
<StyledToggleButtonGroup size="small">
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'bold'} key={'bold'}>
<FormatBoldIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} value={'italic'} key={'italic'}>
<FormatItalicIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'underline'} key={'underline'}>
<FormatUnderlinedIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'code'} key={'code'}>
<CodeIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={false}
value={'strikethrough'}
key={'strikethrough'}>
<StrikethroughSIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
</div>
<StyledToggleButtonGroup size="small">
<ToggleButton
classes={{ root: classes.button }}
selected
disabled={false}
value={'paragraph'}
key={'paragraph'}>
<SubjectIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'header1'}
key={'header1'}>
<TitleIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'bullet-list'}
key={'bullet-list'}>
<FormatListBulletedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
selected={false}
disabled={false}
value={'number-list'}
key={'number-list'}>
<FormatListNumberedIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
<Divider flexItem orientation="vertical" className={classes.divider} />
<StyledToggleButtonGroup size="small">
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'bold'} key={'bold'}>
<FormatBoldIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} value={'italic'} key={'italic'}>
<FormatItalicIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'underline'} key={'underline'}>
<FormatUnderlinedIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'code'} key={'code'}>
<CodeIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={false}
value={'strikethrough'}
key={'strikethrough'}>
<StrikethroughSIcon fontSize="small" />
</ToggleButton>
<ToggleButton classes={{ root: classes.button }} disabled={false} value={'save'} key={'save'}>
<SaveAltIcon fontSize="small" />
<SaveIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
</Paper>
Expand Down
4 changes: 2 additions & 2 deletions packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
View file
Expand Up @@ -31,7 +31,7 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
import SaveAltIcon from '@material-ui/icons/SaveAlt';
import SaveIcon from '@material-ui/icons/Save';
import StrikethroughSIcon from '@material-ui/icons/StrikethroughS';
import SubjectIcon from '@material-ui/icons/Subject';
import TitleIcon from '@material-ui/icons/Title';
Expand Down Expand Up @@ -332,7 +332,7 @@ export const ToolbarPlugin = ({ readOnly, pristine, onEdited, onSave }: ToolbarP
onSave(markdown);
});
}}>
<SaveAltIcon fontSize="small" color={pristine ? 'disabled' : 'primary'} />
<SaveIcon fontSize="small" color={pristine ? 'disabled' : 'primary'} />
</ToggleButton>
</StyledToggleButtonGroup>
</Paper>
Expand Down

0 comments on commit 9cdd7b6

Please sign in to comment.