[Quiz] fixes drag n drop for pair item

src/plugin/exo/Resources/modules/items/ordering/components/editor.jsx

@@ -178,7 +178,7 @@ class Item extends Component {
               {this.props.connectDragSource(
                 <span
                   title={trans('move', {}, 'actions')}
-                  draggable="true"
+                  draggable={true}
                   className="btn btn-text-secondary drag-handle"
                 >
                   <span className="fa fa-fw fa-arrows" />

src/plugin/exo/Resources/modules/items/pair/components/editor.jsx

@@ -1,6 +1,4 @@
 import React, {Component} from 'react'
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Tooltip from 'react-bootstrap/Tooltip'
 import cloneDeep from 'lodash/cloneDeep'
 import classes from 'classnames'
 
@@ -12,6 +10,7 @@ import {FormData} from '#/main/app/content/form/containers/data'
 import {FormGroup} from '#/main/app/content/form/components/group'
 import {makeId} from '#/main/core/scaffolding/id'
 import {HtmlInput} from '#/main/app/data/types/html/components/input'
+import {TooltipOverlay} from '#/main/app/overlays/tooltip/components/overlay'
 
 import {SCORE_SUM} from '#/plugin/exo/quiz/enums'
 import {makeDraggable, makeDroppable} from '#/plugin/exo/utils/dragAndDrop'
@@ -309,7 +308,7 @@ class Pair extends Component {
             />
           }
 
-          <div className="form-check">
+          <div className="form-check mt-3">
             <label>
               <input
                 type="checkbox"
@@ -590,7 +589,7 @@ let Item = props =>
     <div className="right-controls">
       <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')}
@@ -600,25 +599,22 @@ let Item = props =>
         dangerous={true}
       />
 
-      {props.connectDragSource(
-        <div>
-          <OverlayTrigger
-            placement="top"
-            overlay={
-              <Tooltip id={`item-${props.item.id}-drag`}>{trans('move')}</Tooltip>
-            }
+      <TooltipOverlay
+        id={`pair-item-${props.item.id}-drag`}
+        tip={trans('move', {}, 'actions')}
+        disabled={props.isDragging}
+      >
+        {props.connectDragSource(
+          <span
+            role="button"
+            title={trans('move', {}, 'actions')}
+            draggable={true}
+            className="btn btn-text-secondary drag-handle"
           >
-            <span
-              role="button"
-              title={trans('move')}
-              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" />
+          </span>
+        )}
+      </TooltipOverlay>
     </div>
   </div>
 
@@ -627,7 +623,8 @@ Item.propTypes = {
   index: T.number.isRequired,
   item: T.object.isRequired,
   onUpdate: T.func.isRequired,
-  onDelete: T.func.isRequired
+  onDelete: T.func.isRequired,
+  isDragging: T.bool.isRequired
 }
 
 Item = makeDraggable(Item, 'ITEM', PairItemDragPreview)

src/plugin/exo/Resources/modules/items/pair/components/player.jsx

@@ -3,17 +3,16 @@ import {PropTypes as T} from 'prop-types'
 import classes from 'classnames'
 import times from 'lodash/times'
 
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Tooltip from 'react-bootstrap/Tooltip'
-
 import {trans} from '#/main/app/intl/translation'
 import {CALLBACK_BUTTON} from '#/main/app/buttons'
 import {Button} from '#/main/app/action/components/button'
+import {ContentHtml} from '#/main/app/content/components/html'
 
 import {makeDraggable, makeDroppable} from '#/plugin/exo/utils/dragAndDrop'
 import {utils} from '#/plugin/exo/items/pair/utils'
 import {PairItemDragPreview} from '#/plugin/exo/items/pair/components/pair-item-drag-preview'
 
+
 let DropBox = props => props.connectDropTarget(
   <div className={classes('pair-item-placeholder drop-placeholder placeholder-md placeholder-hover', {
     hover: props.isOver
@@ -34,20 +33,21 @@ DropBox.propTypes = {
 DropBox = makeDroppable(DropBox, 'ITEM')
 
 const PairItem = props =>
-  <div className="pair-item">
+  <div className="pair-item pair-answer-item">
+    <ContentHtml className="pair-item-content">{props.item.data}</ContentHtml>
     {props.item.removable && props.removable &&
-      <Button
-        id={`pair-${props.item.id}-delete`}
-        type={CALLBACK_BUTTON}
-        className="btn-link btn-item-remove pull-right"
-        icon="fa fa-fw fa-trash"
-        label={trans('delete', {}, 'actions')}
-        callback={() => props.handleItemRemove(props.item.id)}
-        tooltip="top"
-      />
+      <div className="item-actions" role="presentation">
+        <Button
+          id={`pair-${props.item.id}-delete`}
+          type={CALLBACK_BUTTON}
+          className="btn btn-text-body p-0"
+          icon="fa fa-fw fa-trash"
+          label={trans('delete', {}, 'actions')}
+          callback={() => props.handleItemRemove(props.item.id)}
+          tooltip="top"
+        />
+      </div>
     }
-
-    <div className="item-content" dangerouslySetInnerHTML={{__html: props.item.data}} />
   </div>
 
 PairItem.propTypes = {
@@ -102,35 +102,18 @@ PairRowList.propTypes = {
 }
 
 let Item = props => {
-  return (
-    <div className="answer-item item">
-      {props.connectDragSource(
-        <div className="btn-drag pull-right">
-          <OverlayTrigger
-            placement="top"
-            overlay={
-              <Tooltip id={`item-${props.item.id}-drag`}>{trans('move')}</Tooltip>
-            }
-          >
-            <span
-              draggable="true"
-              className={classes(
-                'btn',
-                'btn-link',
-                'default',
-                'drag-handle'
-              )}
-            >
-              {props.draggable &&
-                <span className="fa fa-fw fa-arrows" />
-              }
-            </span>
-          </OverlayTrigger>
+  const element =
+    <div className="pair-answer-item answer-item pair-item">
+      <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>
-      )}
-      <div className="item-content" dangerouslySetInnerHTML={{__html: props.item.data}} />
+      }
     </div>
-  )
+
+  return props.draggable ? props.connectDragSource(element) : element
 }
 
 Item.propTypes = {
@@ -208,7 +191,7 @@ class PairPlayer extends Component {
 
   render() {
     return (
-      <div className="pair-player row">
+      <div className="pair-player row user-select-none">
         <div className="col-md-5 col-sm-5 items-col">
           <ItemList items={this.state.items} draggable={!this.props.disabled}/>
         </div>

src/plugin/exo/Resources/styles/items/_pair.scss

@@ -33,25 +33,17 @@
   .pair {
     // Display both items on the same line
     .form-group {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-    }
-
-    .checkbox {
-      margin-bottom: 0;
-    }
-
-    .pair-item,
-    .pair-item-placeholder {
-      width: 49%; // not ideal because we have no control on the size of the gape
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: $answer-item-padding;
     }
 
     .pair-item {
-      background-color: #fff;
-      border: 1px solid white;
-      padding: $padding-base-vertical $padding-base-horizontal;
-      border-radius: $border-radius;
+      background-color: var(--#{$prefix}body-bg);
+      border: $input-border-width solid var(--#{$prefix}body-bg);
+      padding: $input-padding-y $input-padding-x;
+      line-height: $input-line-height;
+      border-radius: var(--#{$prefix}border-radius);
 
       .item-content {
         text-overflow: ellipsis;
@@ -78,20 +70,21 @@
 /* PLAYER */
 .pair-player {
   .pair {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: $answer-item-padding;
 
-    .pair-item,
-    .pair-item-placeholder {
-      width: 49%; // not ideal because we have no control on the size of the gape
+    .pair-item {
+      background-color: var(--#{$prefix}body-bg);
+      border: $answer-item-border-width solid var(--#{$prefix}body-bg);
+      padding: $answer-item-padding;
+      border-radius: var(--#{$prefix}border-radius);
     }
 
-    .pair-item {
-      background-color: #fff;
-      border: 1px solid white;
-      padding: $padding-base-vertical $padding-base-horizontal;
-      border-radius: $border-radius;
+    .drop-placeholder {
+      flex: 1;
+      padding: $answer-item-padding;
+      border-radius: var(--#{$prefix}border-radius);
     }
   }
 
@@ -103,12 +96,6 @@
       margin-bottom: 0;
     }
   }
-
-  .btn-drag .drag-handle,
-  .btn-item-remove {
-    padding: 0;
-    border: none;
-  }
 }
 
 .pair-feedback,
@@ -138,4 +125,18 @@
     padding: 10px;
     margin-top: 10px;
   }
-}
+}
+
+.pair-answer-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .pair-item-content {
+    margin-right: auto;
+  }
+
+  .item-actions {
+    margin-left: ($answer-item-padding * .5);
+  }
+}