From 9cdd7b637f6badd232f7ccc60537c829ce215bea Mon Sep 17 00:00:00 2001
From: Pierre-Charles David <pierre-charles.david@obeo.fr>
Date: Tue, 29 Nov 2022 09:34:12 +0100
Subject: [PATCH] [1346] Change the Save icon for rich text editor

Bug: https://github.com/eclipse-sirius/sirius-components/issues/1346
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
---
 .../src/RichTextWidget.tsx                    | 125 ++++++++++--------
 .../src/richtexteditor/ToolbarPlugin.tsx      |   4 +-
 2 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx
index 8366281472..4db8b2a5b2 100644
--- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx
+++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx
@@ -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';
@@ -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: {
@@ -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>
diff --git a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
index 846d3301a9..9623245e33 100644
--- a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
@@ -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';
@@ -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>