feat: Adapt modal design to allow gutters into ListItem

The GroupRecipient are clickable so we want the hover to expend over the entire available space. So I've deactivated the margins on the dialogs and put gutters on the ListItems. As the modals contained other text elements, I also applied margins to them accordingly
cozy · Mar 22, 2024 · 39dc590 · 39dc590
1 parent 7d731db
commit 39dc590
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 63 deletions.
diff --git a/packages/cozy-sharing/src/components/ConfirmTrustedRecipientsDialog.jsx b/packages/cozy-sharing/src/components/ConfirmTrustedRecipientsDialog.jsx
@@ -1,6 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
+import List from 'cozy-ui/transpiled/react/List'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipient from './Recipient/MemberRecipient'
@@ -11,24 +14,32 @@ import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfi
  */
 const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <>
-      <Typography variant="body1" className="u-mb-2">
+      <Typography
+        variant="body1"
+        className={cx(
+          'u-mb-half',
+          isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half'
+        )}
+      >
         {t(`ConfirmRecipientModal.intruction`)}
       </Typography>
-
-      {recipientsToBeConfirmed.map(recipientConfirmationData => {
-        return (
-          <MemberRecipient
-            {...recipientConfirmationData}
-            key={`key_r_${recipientConfirmationData.id}`}
-            isOwner={false}
-            recipientConfirmationData={recipientConfirmationData}
-            verifyRecipient={verifyRecipient}
-          />
-        )
-      })}
+      <List className={isMobile ? 'u-mb-half' : 'u-mb-1'}>
+        {recipientsToBeConfirmed.map(recipientConfirmationData => {
+          return (
+            <MemberRecipient
+              {...recipientConfirmationData}
+              key={`key_r_${recipientConfirmationData.id}`}
+              isOwner={false}
+              recipientConfirmationData={recipientConfirmationData}
+              verifyRecipient={verifyRecipient}
+            />
+          )
+        })}
+      </List>
     </>
   )
 }

diff --git a/packages/cozy-sharing/src/components/ConfirmTrustedRecipientsDialog.stories.jsx b/packages/cozy-sharing/src/components/ConfirmTrustedRecipientsDialog.stories.jsx
@@ -0,0 +1,45 @@
+import ConfirmTrustedRecipientsDialog from './ConfirmTrustedRecipientsDialog'
+
+const meta = {
+  component: ConfirmTrustedRecipientsDialog,
+  args: {
+    recipientsToBeConfirmed: [
+      {
+        instance: 'https://example.com',
+        isOwner: false,
+        status: 'ready',
+        recipientConfirmationData: null,
+        verifyRecipient: () => {},
+        fadeIn: true,
+        type: 'two-way',
+        onRevoke: () => {},
+        onRevokeSelf: () => {}
+      }
+    ]
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    twoStepsConfirmationMethods: {
+      getRecipientsToBeConfirmed: () => [
+        {
+          name: 'John Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        },
+        {
+          name: 'Alice Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }
+      ]
+    },
+    verifyRecipient: () => {}
+  }
+}
diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipient.jsx
@@ -7,6 +7,7 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { GroupRecipientDetail } from './GroupRecipientDetail'
@@ -18,6 +19,7 @@ const GroupRecipient = props => {
   const { name, members, fadeIn, owner } = props
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
 
   const [isDetailOpened, setDetailOpened] = useState(false)
 
@@ -40,7 +42,11 @@ const GroupRecipient = props => {
   return (
     <>
       <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-        <ListItem disableGutters button onClick={toogleDetailOpened}>
+        <ListItem
+          button
+          onClick={toogleDetailOpened}
+          gutters={isMobile ? 'default' : 'double'}
+        >
           <ListItemIcon>
             <GroupAvatar size="small" />
           </ListItemIcon>
@@ -57,7 +63,7 @@ const GroupRecipient = props => {
                 : '')
             }
           />
-          <ListItemSecondaryAction>
+          <ListItemSecondaryAction className={isMobile ? 'u-mr-1' : 'u-mr-2'}>
             <GroupRecipientPermissions {...props} />
           </ListItemSecondaryAction>
         </ListItem>

diff --git a/packages/cozy-sharing/src/components/Recipient/LinkRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/LinkRecipient.jsx
@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'
@@ -18,6 +19,7 @@ import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
 
@@ -32,7 +34,7 @@ const LinkRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <Circle size="small" className={styles['link-recipient-icon-circle']}>
             <Icon icon={LinkIcon} />

diff --git a/packages/cozy-sharing/src/components/Recipient/MemberRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/MemberRecipient.jsx
@@ -7,6 +7,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipientPermissions from './MemberRecipientPermissions'
@@ -21,6 +22,7 @@ const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
 const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()
+  const { isMobile } = useBreakpoints()
 
   const {
     instance,
@@ -48,7 +50,7 @@ const MemberRecipient = props => {
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
-      <ListItem disableGutters>
+      <ListItem gutters={isMobile ? 'default' : 'double'}>
         <ListItemIcon>
           <MemberAvatar size="small" recipient={props} />
         </ListItemIcon>

diff --git a/packages/cozy-sharing/src/components/ShareDialogCozyToCozy.jsx b/packages/cozy-sharing/src/components/ShareDialogCozyToCozy.jsx
@@ -2,6 +2,7 @@ import cx from 'classnames'
 import React from 'react'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByEmail } from './ShareByEmail'
@@ -39,47 +40,49 @@ const SharingContent = ({
   onRevokeLink
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <div className={cx(styles['share-modal-content'])}>
-      {showShareOnlyByLink && (
-        <div className={styles['share-byemail-onlybylink']}>
-          {t(`${documentType}.share.shareByEmail.onlyByLink`, {
-            type: t(
-              `${documentType}.share.shareByEmail.type.${
-                document.type === 'directory' ? 'folder' : 'file'
-              }`
-            )
-          })}{' '}
-          <strong>
-            {t(
-              `${documentType}.share.shareByEmail.${
-                hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
-              }`
-            )}
-          </strong>
-        </div>
-      )}
-      <Typography variant="h6" className="u-mb-1-half">
-        {t('Share.contacts.whoHasAccess')}
-      </Typography>
-      {showShareByEmail && (
-        <DumbShareByEmail
-          contacts={contacts}
-          contactGroups={contactGroups}
-          createContact={createContact}
-          currentRecipients={recipients}
-          document={document}
-          documentType={documentType}
-          needsContactsPermission={needsContactsPermission}
-          onShare={onShare}
-          sharing={sharing}
-          sharingDesc={sharingDesc}
-        />
-      )}
+      <div className={cx('u-pt-1-half', isMobile ? 'u-ph-1' : 'u-ph-2')}>
+        {showShareOnlyByLink && (
+          <div className={styles['share-byemail-onlybylink']}>
+            {t(`${documentType}.share.shareByEmail.onlyByLink`, {
+              type: t(
+                `${documentType}.share.shareByEmail.type.${
+                  document.type === 'directory' ? 'folder' : 'file'
+                }`
+              )
+            })}{' '}
+            <strong>
+              {t(
+                `${documentType}.share.shareByEmail.${
+                  hasSharedParent ? 'hasSharedParent' : 'hasSharedChild'
+                }`
+              )}
+            </strong>
+          </div>
+        )}
+        <Typography variant="h6" className="u-mb-1-half">
+          {t('Share.contacts.whoHasAccess')}
+        </Typography>
+        {showShareByEmail && (
+          <DumbShareByEmail
+            contacts={contacts}
+            contactGroups={contactGroups}
+            createContact={createContact}
+            currentRecipients={recipients}
+            document={document}
+            documentType={documentType}
+            needsContactsPermission={needsContactsPermission}
+            onShare={onShare}
+            sharing={sharing}
+            sharingDesc={sharingDesc}
+          />
+        )}
+      </div>
       {showWhoHasAccess && (
         <WhoHasAccess
-          className="u-mt-half"
           document={document}
           documentType={documentType}
           isOwner={isOwner}
@@ -129,6 +132,7 @@ const ShareDialogCozyToCozy = ({
       dialogContentOnShare={SharingContent}
       dialogActionsOnShare={showShareByLink ? DumbShareByLink : null}
       dialogTitleOnShare={SharingTitleFunction({ documentType, document })}
+      disableGutters
     />
   )
 }

diff --git a/packages/cozy-sharing/src/components/ShareDialogOnlyByLink.jsx b/packages/cozy-sharing/src/components/ShareDialogOnlyByLink.jsx
@@ -1,7 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { default as DumbShareByLink } from './ShareByLink'
@@ -22,8 +24,11 @@ const ShareDialogOnlyByLink = ({
   permissions
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+
   return (
     <Dialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}
@@ -32,11 +37,13 @@ const ShareDialogOnlyByLink = ({
       })}
       content={
         <>
-          <Typography variant="h6">
+          <Typography
+            variant="h6"
+            className={cx(isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')}
+          >
             {t('Share.contacts.whoHasAccess')}
           </Typography>
           <WhoHasAccess
-            className="u-mt-half"
             document={document}
             documentType={documentType}
             isOwner={isOwner}
@@ -48,12 +55,19 @@ const ShareDialogOnlyByLink = ({
             onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
             onRevokeLink={onRevokeLink}
           />
-          <DumbShareByLink
-            link={link}
-            document={document}
-            documentType={documentType}
-            onEnable={onShareByLink}
-          />
+          <div
+            className={cx(
+              'u-mt-half',
+              isMobile ? 'u-ph-1 u-mb-1' : 'u-ph-2 u-mb-1-half'
+            )}
+          >
+            <DumbShareByLink
+              link={link}
+              document={document}
+              documentType={documentType}
+              onEnable={onShareByLink}
+            />
+          </div>
         </>
       }
     />

diff --git a/packages/cozy-sharing/src/components/ShareDialogTwoStepsConfirmationContainer.jsx b/packages/cozy-sharing/src/components/ShareDialogTwoStepsConfirmationContainer.jsx
@@ -282,6 +282,7 @@ const ShareDialogTwoStepsConfirmationContainer = ({
 
   return (
     <FixedDialog
+      disableGutters
       disableEnforceFocus
       open={true}
       onClose={onClose}

diff --git a/packages/cozy-sharing/src/components/ShareModal/SharingDetailsModal.jsx b/packages/cozy-sharing/src/components/ShareModal/SharingDetailsModal.jsx
@@ -1,8 +1,10 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Divider from 'cozy-ui/transpiled/react/Divider'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { getDisplayName } from '../../models'
@@ -21,16 +23,23 @@ export const SharingDetailsModal = ({
   onRevokeSelf
 }) => {
   const { t, f } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <Dialog
+      disableGutters
       open={true}
       onClose={onClose}
       className={styles['share-modal']}
       title={t(`${documentType}.share.details.title`)}
       content={
         <div className={styles['share-modal-content']}>
-          <div className={styles['share-details']}>
+          <div
+            className={cx(
+              styles['share-details'],
+              isMobile ? 'u-ph-1 u-pt-1-half' : 'u-ph-2 u-pt-1'
+            )}
+          >
             <OwnerIdentity
               name={t(`${documentType}.share.sharedBy`, {
                 name: getDisplayName(owner)