[Quiz] fixes drag n drop

claroline · Sep 13, 2024 · b5981cf · b5981cf
1 parent 385df54
commit b5981cf
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 75 deletions.
diff --git a/src/main/app/Resources/styles/_utilities.scss b/src/main/app/Resources/styles/_utilities.scss
@@ -56,7 +56,7 @@
 }
 
 .drag-handle {
-    cursor: move;
+    cursor: move !important;
 }
 
 .cursor-help {

diff --git a/src/plugin/exo/Resources/modules/contents/components/content-thumbnail.jsx b/src/plugin/exo/Resources/modules/contents/components/content-thumbnail.jsx
@@ -43,7 +43,7 @@ const Actions = props =>
     {props.hasSortBtn && props.connectDragSource(
       <span
         role="button"
-        title={trans('move')}
+        title={trans('move', {}, 'actions')}
         className="action-button fa fa-arrows drag-handle"
         draggable="true"
       />

diff --git a/src/plugin/exo/Resources/modules/items/choice/components/editor.jsx b/src/plugin/exo/Resources/modules/items/choice/components/editor.jsx
@@ -93,7 +93,7 @@ class Choice extends Component {
             type={CALLBACK_BUTTON}
             disabled={!this.props.deletable}
             icon="fa fa-fw fa-trash"
-            label={trans('delete')}
+            label={trans('delete', {}, 'actions')}
             callback={this.props.delete}
             tooltip="top"
             dangerous={true}

diff --git a/src/plugin/exo/Resources/modules/items/ordering/components/editor.jsx b/src/plugin/exo/Resources/modules/items/ordering/components/editor.jsx
@@ -177,11 +177,12 @@ class Item extends Component {
             >
               {this.props.connectDragSource(
                 <span
-                  title={trans('move', {}, 'actions')}
-                  draggable={true}
                   className="btn btn-text-secondary drag-handle"
+                  aria-labelledby={`ordering-item-${this.props.id}-drag`}
+                  draggable={true}
+                  role="button"
                 >
-                  <span className="fa fa-fw fa-arrows" />
+                  <span className="fa fa-fw fa-arrows" aria-hidden={true} />
                 </span>
               )}
             </TooltipOverlay>

diff --git a/src/plugin/exo/Resources/modules/items/ordering/components/player.jsx b/src/plugin/exo/Resources/modules/items/ordering/components/player.jsx
@@ -32,9 +32,9 @@ DropBox = makeDroppable(DropBox, 'ITEM')
 
 let SortableItem = forwardRef((props, ref) => {
   const element =
-    <div className="ordering-answer-item answer-item" ref={ref}>
+    <div className={classes('ordering-answer-item answer-item', {'drag-handle': props.sortable})} ref={ref}>
       <ContentHtml className="ordering-item-content">{props.data}</ContentHtml>
-      <div className="item-actions">
+      <div className="item-actions" role="presentation">
         {props.canDelete &&
           <Button
             id={`answer-${props.index}-delete`}
@@ -49,7 +49,7 @@ let SortableItem = forwardRef((props, ref) => {
         }
 
         {props.sortable &&
-          <span className="ordering-item-drag fa fa-arrows text-secondary" />
+          <span className="drag-handle fa fa-arrows text-secondary" />
         }
       </div>
     </div>
@@ -78,14 +78,14 @@ SortableItem = makeSortable(
 
 let DraggableItem = props => {
   const element =
-    <div className="ordering-answer-item answer-item">
+    <div className={classes('ordering-answer-item answer-item', {'drag-handle': props.draggable})}>
       <ContentHtml className="ordering-item-content">
         {props.item.data}
       </ContentHtml>
 
       {props.draggable &&
-        <div className="item-actions">
-          <span className="ordering-item-drag fa fa-arrows text-secondary" />
+        <div className="item-actions" role="presentation">
+          <span className="drag-handle fa fa-arrows text-secondary" aria-hidden={true} />
         </div>
       }
     </div>

diff --git a/src/plugin/exo/Resources/modules/items/pair/components/editor.jsx b/src/plugin/exo/Resources/modules/items/pair/components/editor.jsx
@@ -606,12 +606,12 @@ let Item = props =>
       >
         {props.connectDragSource(
           <span
+            className="btn btn-text-secondary drag-handle"
             role="button"
-            title={trans('move', {}, 'actions')}
             draggable={true}
-            className="btn btn-text-secondary drag-handle"
+            aria-labelledby={`pair-item-${props.item.id}-drag`}
           >
-            <span className="fa fa-fw fa-arrows" />
+            <span className="fa fa-fw fa-arrows" aria-hidden={true} />
           </span>
         )}
       </TooltipOverlay>

diff --git a/src/plugin/exo/Resources/modules/items/pair/components/player.jsx b/src/plugin/exo/Resources/modules/items/pair/components/player.jsx
@@ -40,7 +40,7 @@ const PairItem = props =>
         <Button
           id={`pair-${props.item.id}-delete`}
           type={CALLBACK_BUTTON}
-          className="btn btn-text-body p-0"
+          className="btn btn-text-secondary p-0"
           icon="fa fa-fw fa-trash"
           label={trans('delete', {}, 'actions')}
           callback={() => props.handleItemRemove(props.item.id)}
@@ -103,12 +103,12 @@ PairRowList.propTypes = {
 
 let Item = props => {
   const element =
-    <div className="pair-answer-item answer-item pair-item">
+    <div className={classes('pair-answer-item answer-item pair-item', {'drag-handle': props.draggable})}>
       <ContentHtml className="pair-item-content">{props.item.data}</ContentHtml>
 
       {props.draggable &&
-        <div className="item-actions">
-          <span className="pair-item-drag fa fa-arrows text-secondary" />
+        <div className="item-actions" role="presentation">
+          <span className="drag-handle fa fa-arrows text-secondary" aria-hidden={true} />
         </div>
       }
     </div>

diff --git a/src/plugin/exo/Resources/modules/items/set/components/editor.jsx b/src/plugin/exo/Resources/modules/items/set/components/editor.jsx
@@ -2,9 +2,6 @@ import React, {Component} from 'react'
 import cloneDeep from 'lodash/cloneDeep'
 import classes from 'classnames'
 
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Tooltip from 'react-bootstrap/Tooltip'
-
 import {PropTypes as T, implementPropTypes} from '#/main/app/prop-types'
 import {trans} from '#/main/app/intl/translation'
 import {CALLBACK_BUTTON} from '#/main/app/buttons'
@@ -22,6 +19,7 @@ import {SetItem as SetItemType} from '#/plugin/exo/items/set/prop-types'
 import {utils} from '#/plugin/exo/items/set/utils'
 import {SetItemDragPreview} from '#/plugin/exo/items/set/components/set-item-drag-preview'
 import {FeedbackEditorButton} from '#/plugin/exo/buttons/feedback/components/button'
+import {TooltipOverlay} from '#/main/app/overlays/tooltip/components/overlay'
 
 const addItem = (items, saveCallback) => {
   const newItems = cloneDeep(items)
@@ -307,10 +305,10 @@ const Set = (props) =>
         />
       </div>
 
-      <div className="right-controls">
+      <div className="right-controls" role="presentation">
         <Button
           id={`set-${props.set.id}-delete`}
-          className="btn-link"
+          className="btn btn-text-secondary"
           type={CALLBACK_BUTTON}
           icon="fa fa-fw fa-trash"
           label={trans('delete', {}, 'actions')}
@@ -406,10 +404,10 @@ let Item = (props) =>
       />
     </div>
 
-    <div className="right-controls">
+    <div className="right-controls" role="presentation">
       <Button
         id={`set-item-${props.item.id}-delete`}
-        className="btn-link"
+        className="btn btn-text-secondary"
         type={CALLBACK_BUTTON}
         icon="fa fa-fw fa-trash"
         label={trans('delete', {}, 'actions')}
@@ -419,31 +417,30 @@ let Item = (props) =>
         dangerous={true}
       />
 
-      {props.connectDragSource(
-        <div>
-          <OverlayTrigger
-            placement="top"
-            overlay={
-              <Tooltip id={`set-item-${props.item.id}-drag`}>{trans('move', {}, 'actions')}</Tooltip>
-            }
+      <TooltipOverlay
+        id={`set-item-${props.item.id}-drag`}
+        tip={trans('move', {}, 'actions')}
+        disabled={props.isDragging}
+      >
+        {props.connectDragSource(
+          <span
+            className="btn btn-text-secondary drag-handle"
+            role="button"
+            aria-labelledby={`set-item-${props.item.id}-drag`}
+            draggable={true}
           >
-            <span
-              title={trans('move', {}, 'actions')}
-              draggable="true"
-              className="btn-link default drag-handle"
-            >
-              <span className="fa fa-fw fa-arrows" />
-            </span>
-          </OverlayTrigger>
-        </div>
-      )}
+            <span className="fa fa-fw fa-arrows" aria-hidden={true} />
+          </span>
+        )}
+      </TooltipOverlay>
     </div>
   </div>
 
 Item.propTypes = {
   index: T.number.isRequired,
   item: T.object.isRequired,
   deletable: T.bool.isRequired,
+  isDragging: T.bool.isRequired,
   onUpdate: T.func.isRequired,
   onDelete: T.func.isRequired,
   connectDragSource: T.func.isRequired

diff --git a/src/plugin/exo/Resources/modules/items/set/components/player.jsx b/src/plugin/exo/Resources/modules/items/set/components/player.jsx
@@ -2,9 +2,6 @@ import React, {Component} from 'react'
 import classes from 'classnames'
 import {PropTypes as T} from 'prop-types'
 
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Tooltip from 'react-bootstrap/Tooltip'
-
 import {trans} from '#/main/app/intl/translation'
 import {ContentHtml} from '#/main/app/content/components/html'
 import {makeDraggable, makeDroppable} from '#/plugin/exo/utils/dragAndDrop'
@@ -39,7 +36,7 @@ const Association = props =>
     {props.removable &&
       <Button
         id={`ass-${props.association.itemId}-${props.association.setId}-delete`}
-        className="btn-link"
+        className="btn btn-text-secondary"
         type={CALLBACK_BUTTON}
         icon="fa fa-fw fa-trash"
         label={trans('delete', {}, 'actions')}
@@ -106,33 +103,22 @@ SetList.propTypes = {
   onAssociationItemDrop: T.func.isRequired
 }
 
-let Item = props =>
-  <div className="set-answer-item answer-item">
-    <ContentHtml className="item-content">
-      {props.item.data}
-    </ContentHtml>
+let Item = props => {
+  const element =
+    <div className={classes('set-answer-item answer-item', {'drag-handle': props.draggable})}>
+      <ContentHtml className="item-content">
+        {props.item.data}
+      </ContentHtml>
 
-    {props.connectDragSource(
-      <div>
-        <OverlayTrigger
-          placement="top"
-          overlay={
-            <Tooltip id={`item-${props.item.id}-drag`}>{trans('move')}</Tooltip>
-          }
-        >
-          <span
-            title={trans('move', {}, 'quiz')}
-            draggable="true"
-            className="btn-link default drag-handle"
-          >
-            {props.draggable &&
-              <span className="fa fa-arrows"/>
-            }
-          </span>
-        </OverlayTrigger>
-      </div>
-    )}
-  </div>
+      {props.draggable &&
+        <div className="item-actions" role="presentation">
+          <span className="drag-handle fa fa-arrows text-secondary" aria-hidden={true} />
+        </div>
+      }
+    </div>
+
+  return props.draggable ? props.connectDragSource(element) : element
+}
 
 Item.propTypes = {
   connectDragSource: T.func.isRequired,
@@ -186,7 +172,7 @@ class SetPlayer extends Component {
 
   render() {
     return (
-      <div className="set-item set-player row">
+      <div className="set-item set-player row user-select-none">
         <div className="items-col col-md-5 col-sm-5 col-xs-5">
           <ItemList items={this.props.item.items} draggable={!this.props.disabled}/>
         </div>

diff --git a/src/plugin/exo/Resources/styles/items/components/_player.scss b/src/plugin/exo/Resources/styles/items/components/_player.scss
@@ -6,6 +6,10 @@
             color: $answer-item-hover-color;
             background: $answer-item-hover-bg;
             border-color: $answer-item-hover-border-color;
+
+            .drag-handle {
+                color: $answer-item-hover-color !important;
+            }
         }
     }
 
@@ -22,7 +26,6 @@
     .used-hint {
         display: flex;
         align-items: baseline;
-        //margin-top: map-get($spacers, 3);
         padding: $answer-item-padding;
         color: var(--#{$prefix}warning-text-emphasis);
         background: var(--#{$prefix}warning-bg-subtle);