Read-write actions on public view

package.json

@@ -115,7 +115,7 @@
     "cozy-scripts": "1.13.2",
     "cozy-sharing": "1.9.1",
     "cozy-stack-client": "13.5.2",
-    "cozy-ui": "35.9.0",
+    "cozy-ui": "35.17.0",
     "date-fns": "1.30.1",
     "diacritics": "1.3.0",
     "fastclick": "1.0.6",

src/drive/styles/toolbar.styl

@@ -29,72 +29,17 @@
 .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
-    button
-        svg
-            visibility: initial
-            display: initial
-    a
-    label
-        &.fil-action-upload
-            span[role=button]
-                display flex
-                padding-left 1rem
-            svg
-                margin-right .5rem
-
-        &.fil-action-newfolder
-            background embedurl('../assets/icons/icon-folder-add-16.svg') 1rem center no-repeat
-        &.fil-action-download
-            background embedurl("../assets/icons/icon-download-16.svg") 1rem center no-repeat
-        &.fil-action-select
-            background embedurl('../assets/icons/icon-checkbox-16.svg') 1rem center no-repeat
-        &.fil-action-delete
-            color var(--pomegranate)
-            background embedurl('../assets/icons/icon-trash-red.svg') 1rem center no-repeat
-        &.fil-action-share
-            position relative
-            background embedurl('../assets/icons/icon-share-dark.svg') 1rem center no-repeat
-        &.fil-action-create-note
-            background embedurl('../assets/icons/icons-16-icon-note.svg') 1rem center no-repeat
-        &.fil-action-create-shortcut
-            background embedurl('../assets/icons/icon-link.svg') 1rem center no-repeat
-    .fil-toolbar-menu-recipients
-        position absolute
-        right    1rem
-        top      .1rem
-    .fil-action-share
-        display none
 +medium-screen()
     .fil-toolbar-menu
         display block
         left 1em
-        .fil-action-share
-        .fil-action-select
-        .fil-action-upload
-            display block
-+tablet()
-    .fil-toolbar-menu-recipients
-            display none
-+small-screen()
-    .fil-toolbar-inner-menu
-        position fixed
-        margin   .5rem
-        width    calc(100% - 1rem)
-    .fil-toolbar-files
-    .fil-toolbar-trash
-        position fixed
-        top      0
-        right    0
-        z-index  $nav-index
 
-    .fil-public-download
-        display none
-    .fil-toolbar-menu
-        .fil-toolbar-menu-recipients
-            display inline-flex 
-+small-screen('min')
-    .fil-toolbar-menu--public
-        display none

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

@@ -9,29 +9,17 @@ import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
 
 import BarContextProvider from 'cozy-ui/transpiled/react/BarContextProvider'
 import { withClient } from 'cozy-client'
-import { isMobileApp } from 'cozy-device-helper'
-
-import { MoreButton } from 'components/Button'
-import Menu, { Item } from 'components/Menu'
-
 import { isSelectionBarVisible } from 'drive/web/modules/selection/duck'
 
 import styles from 'drive/styles/toolbar.styl'
 
 import NotRootFolder from 'drive/web/modules/drive/Toolbar/components/NotRootFolder'
 
-import DeleteItem from './Toolbar/delete/DeleteItem'
-import SelectableItem from './Toolbar/selectable/SelectableItem'
-import AddFolderItem from './Toolbar/components/AddFolderItem'
-import UploadItem from './Toolbar/components/UploadItem'
-import CreateNoteItem from './Toolbar/components/CreateNoteItem'
-import CreateShortcut from './Toolbar/components/CreateShortcut'
+import UploadButtonItem from './components/UploadButtonItem'
+import MoreMenu from './components/MoreMenu'
 
-import DownloadButtonItem from './Toolbar/components/DownloadButtonItem'
-import ShareItem from './Toolbar/share/ShareItem'
-import ShareButton from './Toolbar/share/ShareButton'
-import SharedRecipients from './Toolbar/share/SharedRecipients'
-import ScanWrapper from './Toolbar/components/ScanWrapper'
+import ShareButton from './share/ShareButton'
+import SharedRecipients from './share/SharedRecipients'
 
 class Toolbar extends Component {
   static contextTypes = {
@@ -54,72 +42,6 @@ class Toolbar extends Component {
     const isDisabled = disabled || selectionModeActive
     const { BarRight } = cozy.bar
 
-    const MoreMenu = (
-      <Menu
-        title={t('toolbar.item_more')}
-        disabled={isDisabled}
-        className={styles['fil-toolbar-menu']}
-        innerClassName={styles['fil-toolbar-inner-menu']}
-        button={<MoreButton />}
-      >
-        {canCreateFolder &&
-          hasWriteAccess && (
-            <Item>
-              <AddFolderItem />
-            </Item>
-          )}
-        {hasWriteAccess && (
-          <Item>
-            <CreateNoteItem />
-          </Item>
-        )}
-        {hasWriteAccess && (
-          <Item>
-            <CreateShortcut />
-          </Item>
-        )}
-        {canUpload &&
-          hasWriteAccess && (
-            <Item>
-              <UploadItem insideMoreMenu disabled={isDisabled} />
-            </Item>
-          )}
-        {isMobileApp() &&
-          canUpload &&
-          hasWriteAccess && (
-            <Item>
-              <ScanWrapper insideMoreMenu disabled={isDisabled} />
-            </Item>
-          )}
-        {hasWriteAccess && <hr />}
-        <NotRootFolder>
-          <Item>
-            <ShareItem />
-          </Item>
-        </NotRootFolder>
-        <NotRootFolder>
-          <Item>
-            <DownloadButtonItem />
-          </Item>
-        </NotRootFolder>
-        <Item>
-          <SelectableItem>
-            <a className={styles['fil-action-select']}>
-              {t('toolbar.menu_select')}
-            </a>
-          </SelectableItem>
-        </Item>
-        {hasWriteAccess && (
-          <NotRootFolder>
-            <hr />
-            <Item>
-              <DeleteItem />
-            </Item>
-          </NotRootFolder>
-        )}
-      </Menu>
-    )
-
     return (
       <div
         data-test-id="fil-toolbar-files"
@@ -128,7 +50,7 @@ class Toolbar extends Component {
       >
         {!isShared &&
           canUpload &&
-          hasWriteAccess && <UploadItem disabled={isDisabled} />}
+          hasWriteAccess && <UploadButtonItem disabled={isDisabled} />}
         <NotRootFolder>
           <SharedRecipients />
         </NotRootFolder>
@@ -145,12 +67,22 @@ class Toolbar extends Component {
               lang={lang}
             >
               <SharingProvider doctype="io.cozy.files" documentType="Files">
-                {MoreMenu}
+                <MoreMenu
+                  isDisabled={isDisabled}
+                  canCreateFolder={canCreateFolder}
+                  canUpload={canUpload}
+                  hasWriteAccess={hasWriteAccess}
+                />
               </SharingProvider>
             </BarContextProvider>
           </BarRight>
         ) : (
-          MoreMenu
+          <MoreMenu
+            isDisabled={isDisabled}
+            canCreateFolder={canCreateFolder}
+            canUpload={canUpload}
+            hasWriteAccess={hasWriteAccess}
+          />
         )}
       </div>
     )

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,30 +1,30 @@
-import React, { useState, useCallback } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 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'
+import { showModal } from 'react-cozy-helpers'
 
-const CreateShortcutWrapper = () => {
-  const [isModalDisplayed, setIsModalDisplayed] = useState(false)
+const CreateShortcutWrapper = ({ openModal }) => {
   const { t } = useI18n()
-  if (!isModalDisplayed) {
-    return (
-      <a
-        data-test-id="create-a-shortcut"
-        className={styles['fil-action-create-shortcut']}
-        onClick={useCallback(() => {
-          setIsModalDisplayed(true)
-        })}
-      >
-        {t('toolbar.menu_create_shortcut')}
-      </a>
-    )
-  } else {
-    return (
-      <ShortcutCreationModal
-        onClose={useCallback(() => setIsModalDisplayed(false))}
-      />
-    )
-  }
+
+  return (
+    <ActionMenuItem
+      data-test-id="create-a-shortcut"
+      left={<Icon icon="link" />}
+      onClick={openModal}
+    >
+      {t('toolbar.menu_create_shortcut')}
+    </ActionMenuItem>
+  )
 }
 
-export default CreateShortcutWrapper
+const mapDispatchToProps = dispatch => ({
+  openModal: () => dispatch(showModal(<ShortcutCreationModal />))
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(CreateShortcutWrapper)

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>
     )
   }
 )