fix: Add extra margin on desktop for OnlyOffice FAB

As an user can zoom into his document, scrollbar appears under OnlyOffice FAB. We added some margin to increase visibility on OnlyOffice FAC on desktop
cozy · Feb 23, 2023 · 44999a3 · 44999a3
1 parent ded14bc
commit 44999a3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/src/drive/web/modules/drive/Fab.jsx b/src/drive/web/modules/drive/Fab.jsx
@@ -6,14 +6,13 @@ import UiFab from 'cozy-ui/transpiled/react/Fab'
 const useStyles = makeStyles(() => ({
   root: {
     position: 'fixed',
-    right: '1rem',
-    bottom: ({ noSidebar }) =>
-      noSidebar ? '1rem' : 'calc(var(--sidebarHeight) + 1rem)'
+    right: ({ right }) => (right ? right : '1rem'),
+    bottom: ({ bottom }) => (bottom ? bottom : '1rem')
   }
 }))
 
-const Fab = ({ noSidebar, children, ...rest }) => {
-  const styles = useStyles({ noSidebar })
+const Fab = ({ right, bottom, children, ...rest }) => {
+  const styles = useStyles({ right, bottom })
 
   return (
     <UiFab className={styles.root} {...rest}>

diff --git a/src/drive/web/modules/drive/FabWithMenuContext.jsx b/src/drive/web/modules/drive/FabWithMenuContext.jsx
@@ -19,7 +19,7 @@ const FabWithMenuContext = ({ noSidebar }) => {
       onClick={isOffline ? handleOfflineClick : undefined}
     >
       <Fab
-        noSidebar={noSidebar}
+        bottom={noSidebar ? '1rem' : 'calc(var(--sidebarHeight) + 1rem)'}
         aria-label={t('button.add')}
         disabled={isDisabled || isOffline}
         color="primary"

diff --git a/src/drive/web/modules/views/OnlyOffice/ReadOnlyFab.jsx b/src/drive/web/modules/views/OnlyOffice/ReadOnlyFab.jsx
@@ -24,10 +24,12 @@ const ReadOnlyFab = () => {
     ? t('OnlyOffice.actions.edit')
     : t('OnlyOffice.actions.validate')
 
-  const fabProps = isMobile ? { 'aria-label': label } : { variant: 'extended' }
+  const fabProps = isMobile
+    ? { 'aria-label': label }
+    : { variant: 'extended', right: '30px', bottom: '55px' }
 
   return (
-    <Fab color="primary" noSidebar={true} onClick={handleClick} {...fabProps}>
+    <Fab color="primary" onClick={handleClick} {...fabProps}>
       <Icon
         icon={isEditorForcedReadOnly ? RenameIcon : CheckIcon}
         className={!isMobile ? 'u-mr-half' : ''}