Merge pull request #1936 from tracim/fix/789__fix_drag_n_drop_on_fire…

…fox_linux fix drag and drop for firefox linux
tracim · Jun 18, 2019 · 613d9e9 · 613d9e9
2 parents ff6e819 + 9d28ce4
commit 613d9e9
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 134 deletions.
diff --git a/frontend/src/component/DragHandle.jsx b/frontend/src/component/DragHandle.jsx
@@ -8,6 +8,7 @@ export const DragHandle = props => (
     className={`dragHandle ${props.customClass}`}
     title={props.title}
     ref={props.connectDragSource}
+    style={props.style}
   >
     <i className='fa fa-arrows' />
   </div>
@@ -18,10 +19,12 @@ export default DragHandle
 DragHandle.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   customClass: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  style: PropTypes.object
 }
 
 DragHandle.defaultProps = {
   customClass: '',
-  title: ''
+  title: '',
+  style: {}
 }
diff --git a/frontend/src/component/DragHandle.styl b/frontend/src/component/DragHandle.styl
@@ -2,8 +2,6 @@
 
 .dragHandle
   position absolute
-  left -2px
-  padding 0 7px
   color fontColor
   cursor move
   border 2px solid transparent

diff --git a/frontend/src/component/Workspace/ContentItem.jsx b/frontend/src/component/Workspace/ContentItem.jsx
@@ -6,74 +6,96 @@ import { DragSource } from 'react-dnd'
 import { ROLE_OBJECT, DRAG_AND_DROP } from '../../helper.js'
 import BtnExtandedAction from './BtnExtandedAction.jsx'
 import DragHandle from '../DragHandle.jsx'
-import { Badge } from 'tracim_frontend_lib'
+import {
+  Badge,
+  ListItemWrapper
+} from 'tracim_frontend_lib'
 
-const ContentItem = props => {
-  const status = props.contentType.availableStatuses.find(s => s.slug === props.statusSlug) || {hexcolor: '', label: '', faIcon: ''}
+class ContentItem extends React.Component {
+  render () {
+    const { props } = this
 
-  const dropStyle = {
-    opacity: props.isDragging ? 0.5 : 1
-  }
+    const status = props.contentType.availableStatuses.find(s => s.slug === props.statusSlug) || {
+      hexcolor: '',
+      label: '',
+      faIcon: ''
+    }
 
-  return (
-    <Link
-      to={props.urlContent}
-      className='content__item'
-      style={dropStyle}
-    >
-      {props.userRoleIdInWorkspace >= ROLE_OBJECT.contentManager.id && (
-        <DragHandle
-          connectDragSource={props.connectDragSource}
-          title={props.t('Move this content')}
-        />
-      )}
+    const dropStyle = {
+      opacity: props.isDragging ? 0.5 : 1
+    }
 
-      <div
-        className='content__dragPreview'
-        ref={props.connectDragPreview}
+    return (
+      <ListItemWrapper
+        label={props.label}
+        read={props.read}
+        contentType={props.contentType}
+        isLast={props.isLast}
+        key={props.id}
       >
-        <div className='content__type' style={{color: props.contentType.hexcolor}}>
-          <i className={`fa fa-fw fa-${props.faIcon}`} />
-        </div>
+        {props.userRoleIdInWorkspace >= ROLE_OBJECT.contentManager.id && (
+          <DragHandle
+            connectDragSource={props.connectDragSource}
+            title={props.t('Move this content')}
+            style={{top: '18px', left: '-2px', padding: '0 7px'}}
+          />
+        )}
 
-        <div className='content__name'>
-          {props.label}
-          {props.contentType.slug === 'file' && (
-            <Badge text={props.fileExtension} customClass='badgeBackgroundColor' />
-          )}
-        </div>
-      </div>
+        <Link
+          to={props.urlContent}
+          className='content__item'
+          style={dropStyle}
+        >
+          <div
+            className='content__dragPreview'
+            ref={props.connectDragPreview}
+          >
+            <div className='content__type' style={{color: props.contentType.hexcolor}}>
+              <i className={`fa fa-fw fa-${props.faIcon}`} />
+            </div>
 
-      {props.userRoleIdInWorkspace >= 2 && (
-        <div className='d-none d-md-block'>
-          <BtnExtandedAction
-            userRoleIdInWorkspace={props.userRoleIdInWorkspace}
-            onClickExtendedAction={props.onClickExtendedAction}
-          />
-        </div>
-      )}
+            <div className='content__name'>
+              {props.label}
+              {props.contentType.slug === 'file' && (
+                <Badge text={props.fileExtension} customClass='badgeBackgroundColor' />
+              )}
+            </div>
+          </div>
 
-      <div
-        className='content__status d-sm-flex justify-content-between align-items-center'
-        style={{color: status.hexcolor}}
-      >
-        <div className='content__status__text d-none d-sm-block'>
-          {props.t(status.label)}
-        </div>
-        <div className='content__status__icon'>
-          <i className={`fa fa-fw fa-${status.faIcon}`} />
-        </div>
-      </div>
-    </Link>
-  )
+          {props.userRoleIdInWorkspace >= 2 && (
+            <div className='d-none d-md-block'>
+              <BtnExtandedAction
+                userRoleIdInWorkspace={props.userRoleIdInWorkspace}
+                onClickExtendedAction={props.onClickExtendedAction}
+              />
+            </div>
+          )}
+
+          <div
+            className='content__status d-sm-flex justify-content-between align-items-center'
+            style={{color: status.hexcolor}}
+          >
+            <div className='content__status__text d-none d-sm-block'>
+              {props.t(status.label)}
+            </div>
+            <div className='content__status__icon'>
+              <i className={`fa fa-fw fa-${status.faIcon}`} />
+            </div>
+          </div>
+        </Link>
+      </ListItemWrapper>
+    )
+  }
 }
 
 const contentItemDragAndDropSource = {
-  beginDrag: props => ({
-    workspaceId: props.workspaceId,
-    contentId: props.contentId,
-    parentId: props.parentId || 0
-  }),
+  beginDrag: props => {
+    return {
+      workspaceId: props.workspaceId,
+      contentId: props.contentId,
+      parentId: props.parentId || 0
+    }
+  },
   endDrag (props, monitor) {
     const item = monitor.getItem()
     const dropResult = monitor.getDropResult()

diff --git a/frontend/src/component/Workspace/Folder.jsx b/frontend/src/component/Workspace/Folder.jsx
@@ -13,7 +13,6 @@ import {
   ROLE_OBJECT,
   DRAG_AND_DROP
 } from '../../helper.js'
-import { ListItemWrapper } from 'tracim_frontend_lib'
 
 require('./Folder.styl')
 
@@ -70,6 +69,7 @@ class Folder extends React.Component {
             <DragHandle
               connectDragSource={props.connectDragSource}
               title={props.t('Move this folder')}
+              style={{top: '18px', left: '-2px', padding: '0 7px'}}
             />
           )}
 
@@ -173,38 +173,30 @@ class Folder extends React.Component {
               />
             )
             : (
-              <ListItemWrapper
+              <ContentItem
+                contentId={content.id}
+                workspaceId={content.idWorkspace}
+                parentId={content.idParent}
                 label={content.label}
+                type={content.type}
+                fileName={content.fileName}
+                fileExtension={content.fileExtension}
+                faIcon={props.contentType.length ? props.contentType.find(a => a.slug === content.type).faIcon : ''}
+                statusSlug={content.statusSlug}
                 read={props.readStatusList.includes(content.id)}
                 contentType={props.contentType.length ? props.contentType.find(ct => ct.slug === content.type) : null}
+                urlContent={`${PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id)}${props.location.search}`}
+                userRoleIdInWorkspace={props.userRoleIdInWorkspace}
+                onClickExtendedAction={{
+                  edit: e => props.onClickExtendedAction.edit(e, content),
+                  download: e => props.onClickExtendedAction.download(e, content),
+                  archive: e => props.onClickExtendedAction.archive(e, content),
+                  delete: e => props.onClickExtendedAction.delete(e, content)
+                }}
+                onDropMoveContentItem={props.onDropMoveContentItem}
                 isLast={props.isLast && i === folderContentList.length - 1}
                 key={content.id}
-              >
-                <ContentItem
-                  contentId={content.id}
-                  workspaceId={content.idWorkspace}
-                  parentId={content.idParent}
-                  label={content.label}
-                  type={content.type}
-                  fileName={content.fileName}
-                  fileExtension={content.fileExtension}
-                  faIcon={props.contentType.length ? props.contentType.find(a => a.slug === content.type).faIcon : ''}
-                  statusSlug={content.statusSlug}
-                  read={props.readStatusList.includes(content.id)}
-                  contentType={props.contentType.length ? props.contentType.find(ct => ct.slug === content.type) : null}
-                  urlContent={`${PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id)}${props.location.search}`}
-                  userRoleIdInWorkspace={props.userRoleIdInWorkspace}
-                  onClickExtendedAction={{
-                    edit: e => props.onClickExtendedAction.edit(e, content),
-                    download: e => props.onClickExtendedAction.download(e, content),
-                    archive: e => props.onClickExtendedAction.archive(e, content),
-                    delete: e => props.onClickExtendedAction.delete(e, content)
-                  }}
-                  onDropMoveContentItem={props.onDropMoveContentItem}
-                  isLast={props.isLast && i === folderContentList.length - 1}
-                  key={content.id}
-                />
-              </ListItemWrapper>
+              />
             )
           )}
         </div>
@@ -214,26 +206,32 @@ class Folder extends React.Component {
 }
 
 const folderDragAndDropTarget = {
-  drop: props => ({
-    workspaceId: props.folderData.idWorkspace,
-    contentId: props.folderData.id,
-    parentId: props.folderData.idParent
-  })
+  drop: props => {
+    return {
+      workspaceId: props.folderData.idWorkspace,
+      contentId: props.folderData.id,
+      parentId: props.folderData.idParent
+    }
+  }
 }
 
-const folderDragAndDropTargetCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  canDrop: monitor.canDrop(),
-  isOver: monitor.isOver({shallow: false}),
-  draggedItem: monitor.getItem()
-})
+const folderDragAndDropTargetCollect = (connect, monitor) => {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    canDrop: monitor.canDrop(),
+    isOver: monitor.isOver({shallow: false}),
+    draggedItem: monitor.getItem()
+  }
+}
 
 const folderDragAndDropSource = {
-  beginDrag: props => ({
-    workspaceId: props.folderData.idWorkspace,
-    contentId: props.folderData.id,
-    parentId: props.folderData.idParent || 0
-  }),
+  beginDrag: props => {
+    return {
+      workspaceId: props.folderData.idWorkspace,
+      contentId: props.folderData.id,
+      parentId: props.folderData.idParent || 0
+    }
+  },
   endDrag: (props, monitor) => {
     const item = monitor.getItem()
     const dropResult = monitor.getDropResult()

diff --git a/frontend/src/container/WorkspaceContent.jsx b/frontend/src/container/WorkspaceContent.jsx
@@ -7,7 +7,8 @@ import {
   PAGE,
   ROLE,
   findUserRoleIdInWorkspace,
-  ROLE_OBJECT, CONTENT_TYPE
+  ROLE_OBJECT,
+  CONTENT_TYPE
 } from '../helper.js'
 import Folder from '../component/Workspace/Folder.jsx'
 import ContentItem from '../component/Workspace/ContentItem.jsx'
@@ -19,8 +20,7 @@ import {
   PageWrapper,
   PageTitle,
   PageContent,
-  BREADCRUMBS_TYPE,
-  ListItemWrapper
+  BREADCRUMBS_TYPE
 } from 'tracim_frontend_lib'
 import {
   getFolderContentList,
@@ -516,35 +516,28 @@ class WorkspaceContent extends React.Component {
                       />
                     )
                     : (
-                      <ListItemWrapper
+                      <ContentItem
+                        contentId={content.id}
+                        workspaceId={content.idWorkspace}
+                        parentId={content.idParent}
                         label={content.label}
-                        read={currentWorkspace.contentReadStatusList.includes(content.id)}
+                        fileName={content.fileName}
+                        fileExtension={content.fileExtension}
+                        faIcon={contentType.length ? contentType.find(a => a.slug === content.type).faIcon : ''}
+                        statusSlug={content.statusSlug}
                         contentType={contentType.length ? contentType.find(ct => ct.slug === content.type) : null}
                         isLast={i === rootContentList.length - 1}
+                        urlContent={`${PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id)}${location.search}`}
+                        userRoleIdInWorkspace={userRoleIdInWorkspace}
+                        onClickExtendedAction={{
+                          edit: e => this.handleClickEditContentItem(e, content),
+                          download: e => this.handleClickDownloadContentItem(e, content),
+                          archive: e => this.handleClickArchiveContentItem(e, content),
+                          delete: e => this.handleClickDeleteContentItem(e, content)
+                        }}
+                        onDropMoveContentItem={this.handleDropMoveContent}
                         key={content.id}
-                      >
-                        <ContentItem
-                          contentId={content.id}
-                          workspaceId={content.idWorkspace}
-                          parentId={content.idParent}
-                          label={content.label}
-                          fileName={content.fileName}
-                          fileExtension={content.fileExtension}
-                          faIcon={contentType.length ? contentType.find(a => a.slug === content.type).faIcon : ''}
-                          statusSlug={content.statusSlug}
-                          contentType={contentType.length ? contentType.find(ct => ct.slug === content.type) : null}
-                          urlContent={`${PAGE.WORKSPACE.CONTENT(content.idWorkspace, content.type, content.id)}${location.search}`}
-                          userRoleIdInWorkspace={userRoleIdInWorkspace}
-                          onClickExtendedAction={{
-                            edit: e => this.handleClickEditContentItem(e, content),
-                            download: e => this.handleClickDownloadContentItem(e, content),
-                            archive: e => this.handleClickArchiveContentItem(e, content),
-                            delete: e => this.handleClickDeleteContentItem(e, content)
-                          }}
-                          onDropMoveContentItem={this.handleDropMoveContent}
-                          key={content.id}
-                        />
-                      </ListItemWrapper>
+                      />
                     )
                   )
                 }

diff --git a/frontend/src/css/ContentItem.styl b/frontend/src/css/ContentItem.styl
@@ -30,7 +30,7 @@
       font-size 20px
   & .dragHandle
     display none
-  &:hover > &__item > .dragHandle
+  &:hover > .dragHandle
     display block
 
 //MEDIAQUERIES