Read-write actions on public view

src/drive/styles/toolbar.styl

@@ -29,6 +29,14 @@
 .fil-toolbar-trash
     margin-left auto
     display     flex
+
+.menu-recipients-wrapper
+  position relative
+
+.menu-recipients
+    position absolute
+    right    0
+    top      -.5rem
 
 .fil-toolbar-menu
     //!TODO Remove this code after upgrading to cozy-bar@6

src/drive/web/modules/drive/Toolbar/Index.jsx

@@ -15,7 +15,7 @@ import styles from 'drive/styles/toolbar.styl'
 
 import NotRootFolder from 'drive/web/modules/drive/Toolbar/components/NotRootFolder'
 
-import UploadItem from './components/UploadItem'
+import UploadButtonItem from './components/UploadButtonItem'
 import MoreMenu from './components/MoreMenu'
 
 import ShareButton from './share/ShareButton'
@@ -50,7 +50,7 @@ class Toolbar extends Component {
       >
         {!isShared &&
           canUpload &&
-          hasWriteAccess && <UploadItem disabled={isDisabled} />}
+          hasWriteAccess && <UploadButtonItem disabled={isDisabled} />}
         <NotRootFolder>
           <SharedRecipients />
         </NotRootFolder>

src/drive/web/modules/drive/Toolbar/components/AddFolderItem.jsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
-import styles from 'drive/styles/toolbar.styl'
 import { showNewFolderInput } from 'drive/web/modules/filelist/duck'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 
 const AddFolderItem = translate()(({ t, addFolder }) => {
   return (
-    <a
+    <ActionMenuItem
       data-test-id="add-folder-link"
-      className={styles['fil-action-newfolder']}
       onClick={addFolder}
+      left={<Icon icon="folder-add" />}
     >
       {t('toolbar.menu_new_folder')}
-    </a>
+    </ActionMenuItem>
   )
 })
 const mapDispatchToProps = dispatch => ({

src/drive/web/modules/drive/Toolbar/components/CreateNoteItem.jsx

@@ -9,9 +9,10 @@ import {
   useCapabilities
 } from 'cozy-client'
 import { generateUniversalLink } from 'cozy-ui/transpiled/react/AppLinker/native'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 
 import toolbarContainer from 'drive/web/modules/drive/Toolbar/toolbar'
-import styles from 'drive/styles/toolbar.styl'
 
 const CreateNoteItem = ({ client, t, displayedFolder }) => {
   const { fetchStatus, url, isInstalled } = useAppLinkWithStoreFallback(
@@ -34,9 +35,9 @@ const CreateNoteItem = ({ client, t, displayedFolder }) => {
   }
 
   return (
-    <a
+    <ActionMenuItem
       data-test-id="create-a-note"
-      className={styles['fil-action-create-note']}
+      left={<Icon icon="note" />}
       onClick={async () => {
         if (!fetchStatus) return
         if (isInstalled) {
@@ -55,7 +56,7 @@ const CreateNoteItem = ({ client, t, displayedFolder }) => {
       }}
     >
       {t('toolbar.menu_create_note')}
-    </a>
+    </ActionMenuItem>
   )
 }
 

src/drive/web/modules/drive/Toolbar/components/CreateShortcut.jsx

@@ -1,22 +1,23 @@
 import React, { useState, useCallback } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import styles from 'drive/styles/toolbar.styl'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import ShortcutCreationModal from './ShortcutCreationModalConnected'
 
 const CreateShortcutWrapper = () => {
   const [isModalDisplayed, setIsModalDisplayed] = useState(false)
   const { t } = useI18n()
   if (!isModalDisplayed) {
     return (
-      <a
+      <ActionMenuItem
         data-test-id="create-a-shortcut"
-        className={styles['fil-action-create-shortcut']}
+        left={<Icon icon="link" />}
         onClick={useCallback(() => {
           setIsModalDisplayed(true)
         })}
       >
         {t('toolbar.menu_create_shortcut')}
-      </a>
+      </ActionMenuItem>
     )
   } else {
     return (

src/drive/web/modules/drive/Toolbar/components/DownloadButtonItem.jsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import styles from 'drive/styles/toolbar.styl'
-import { translate } from 'cozy-ui/transpiled/react'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { downloadFiles } from 'drive/web/modules/navigation/duck'
 
 import toolbarContainer from '../toolbar'
 const DownloadButtonItem = translate()(
   ({ t, displayedFolder, downloadAll }) => {
     return (
-      <a
-        className={styles['fil-action-download']}
+      <ActionMenuItem
+        left={<Icon icon="download" />}
         onClick={() => downloadAll([displayedFolder])}
       >
         {t('toolbar.menu_download_folder')}
-      </a>
+      </ActionMenuItem>
     )
   }
 )

src/drive/web/modules/drive/Toolbar/components/MoreMenu.jsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react'
 
 import { MoreButton } from 'components/Button'
 import { isMobileApp } from 'cozy-device-helper'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
 import ActionMenu from 'cozy-ui/transpiled/react/ActionMenu'
 import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
 
@@ -73,4 +74,4 @@ const MoreMenu = ({
   )
 }
 
-export default withBreakpoints()(MoreMenu)
+export default translate()(withBreakpoints()(MoreMenu))

src/drive/web/modules/drive/Toolbar/components/ScanWrapper.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
-import { Icon, translate } from 'cozy-ui/transpiled/react'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 
 import { Scanner, SCANNER_DONE, SCANNER_UPLOADING } from 'cozy-scanner'
 import toolbarContainer from '../toolbar'
@@ -35,18 +37,17 @@ const ScanMenuItem = translate()(({ status, onClick, t, online }) => {
       tracker.push(['trackEvent', 'Drive', 'Scanner', 'Scan Click'])
     }
   }
-  //!TODO Color should be removed after the fix of https://github.com/cozy/cozy-ui/issues/1170
+
   return (
-    <span
-      className="u-pl-1 u-flex u-pt-half u-pb-half u-charcoalGrey"
+    <ActionMenuItem
+      left={<Icon icon="camera" />}
       onClick={() => {
         trackEvent()
         return actionOnClick()
       }}
     >
-      <Icon icon="camera" />
-      <span className="u-pl-half u">{t('Scan.scan_a_doc')}</span>
-    </span>
+      {t('Scan.scan_a_doc')}
+    </ActionMenuItem>
   )
 })
 

src/drive/web/modules/drive/Toolbar/components/UploadButtonItem.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import classNames from 'classnames'
+import UploadButton from 'drive/web/modules/upload/UploadButton'
+import { translate } from 'cozy-ui/transpiled/react'
+import styles from 'drive/styles/toolbar.styl'
+import { compose } from 'redux'
+
+import toolbarContainer from '../toolbar'
+
+const UploadButtonItem = ({ t, displayedFolder, isDisabled }) => (
+  <UploadButton
+    disabled={isDisabled}
+    displayedFolder={displayedFolder}
+    label={t('toolbar.item_upload')}
+    className={classNames(styles['c-btn'], 'u-hide--mob')}
+  />
+)
+
+export default compose(
+  toolbarContainer,
+  translate()
+)(UploadButtonItem)

src/drive/web/modules/drive/Toolbar/components/UploadItem.jsx

@@ -1,27 +1,42 @@
 import React from 'react'
-import classNames from 'classnames'
-import UploadButton from 'drive/web/modules/upload/UploadButton'
+import { connect } from 'react-redux'
+import { compose } from 'redux'
 import { translate } from 'cozy-ui/transpiled/react'
-import styles from 'drive/styles/toolbar.styl'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileInput from 'cozy-ui/transpiled/react/FileInput'
+import withSharingState from 'cozy-sharing/dist/hoc/withSharingState'
 
+import { uploadFiles } from 'drive/web/modules/navigation/duck'
 import toolbarContainer from '../toolbar'
 
-const UploadItem = translate()(
-  ({ t, displayedFolder, insideMoreMenu, isDisabled }) =>
-    insideMoreMenu ? (
-      <UploadButton
-        displayedFolder={displayedFolder}
-        label={t('toolbar.menu_upload')}
-        className={styles['fil-action-upload']}
-      />
-    ) : (
-      <UploadButton
-        disabled={isDisabled}
-        displayedFolder={displayedFolder}
-        label={t('toolbar.item_upload')}
-        className={classNames(styles['c-btn'], 'u-hide--mob')}
-      />
-    )
+const UploadItem = ({ t, isDisabled, onUpload }) => (
+  <FileInput
+    label={t('toolbar.menu_upload')}
+    disabled={isDisabled}
+    multiple
+    onChange={onUpload}
+    data-test-id="upload-btn"
+    value={[]}
+  >
+    <ActionMenuItem left={<Icon icon="upload" />}>
+      {t('toolbar.menu_upload')}
+    </ActionMenuItem>
+  </FileInput>
 )
 
-export default toolbarContainer(UploadItem)
+const mapDispatchToProps = (dispatch, { displayedFolder, sharingState }) => ({
+  onUpload: files => {
+    dispatch(uploadFiles(files, displayedFolder.id, sharingState))
+  }
+})
+
+export default compose(
+  withSharingState,
+  toolbarContainer,
+  translate(),
+  connect(
+    null,
+    mapDispatchToProps
+  )
+)(UploadItem)

src/drive/web/modules/drive/Toolbar/delete/DeleteItem.jsx

@@ -1,28 +1,29 @@
 import React from 'react'
-import classNames from 'classnames'
-import styles from 'drive/styles/toolbar.styl'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import deleteContainer from './delete'
+
 const DeleteItem = translate()(
   ({ t, isSharedWithMe, displayedFolder, trashFolder, onLeave }) =>
     isSharedWithMe ? (
-      <a
+      <ActionMenuItem
         data-test-id="fil-action-delete"
-        className={classNames(styles['fil-action-delete'])}
+        left={<Icon icon="trash" color="var(--pomegranate)" />}
         onClick={() =>
           onLeave(displayedFolder).then(() => trashFolder(displayedFolder))
         }
       >
-        {t('toolbar.leave')}
-      </a>
+        <span className="u-pomegranate">{t('toolbar.leave')}</span>
+      </ActionMenuItem>
     ) : (
-      <a
+      <ActionMenuItem
         data-test-id="fil-action-delete"
-        className={classNames(styles['fil-action-delete'])}
+        left={<Icon icon="trash" color="var(--pomegranate)" />}
         onClick={() => trashFolder(displayedFolder)}
       >
-        {t('toolbar.trash')}
-      </a>
+        <span className="u-pomegranate">{t('toolbar.trash')}</span>
+      </ActionMenuItem>
     )
 )
 

src/drive/web/modules/drive/Toolbar/share/ShareItem.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { RecipientsAvatars } from 'cozy-sharing/dist/components/Recipient'
-import { translate } from 'cozy-ui/transpiled/react'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import styles from 'drive/styles/toolbar.styl'
 import { SharedDocument } from 'cozy-sharing'
 import shareContainer from './share'
@@ -9,22 +11,26 @@ const ShareItem = translate()(({ t, share, displayedFolder }) => {
   return (
     <SharedDocument docId={displayedFolder.id}>
       {({ isSharedWithMe, recipients, link }) => (
-        <a
-          className={styles['fil-action-share']}
+        <ActionMenuItem
           onClick={() => share(displayedFolder)}
+          left={<Icon icon="share" />}
+          right={
+            <div className={styles['menu-recipients-wrapper']}>
+              <RecipientsAvatars
+                className={styles['menu-recipients']}
+                recipients={recipients}
+                link={link}
+                size="small"
+              />
+            </div>
+          }
         >
           {t(
             isSharedWithMe
               ? 'Files.share.sharedWithMe'
               : 'toolbar.menu_share_folder'
           )}
-          <RecipientsAvatars
-            className={styles['fil-toolbar-menu-recipients']}
-            recipients={recipients}
-            link={link}
-            size="small"
-          />
-        </a>
+        </ActionMenuItem>
       )}
     </SharedDocument>
   )