Verified Commit cde3ff56 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3389317 by joaopauloc.dev, nod_, Gauravvvv, joachim, simohell,... 

Issue #3389317 by joaopauloc.dev, nod_, Gauravvvv, joachim, simohell, shweta__sharma, rkoller, Harish1688, ckrina, saschaeggi: Differentiate visually dragging with and without hierarchy

(cherry picked from commit c8ff8fd5)
parent 9feabd37

core/misc/tabledrag.js

+23 −6
Original line number Diff line number Diff line
@@ -198,7 +198,18 @@ 
        }

      });

    });

    this.dragOrientation = this.indentEnabled ? 'drag' : 'drag-y';

    if (this.indentEnabled) {

      // If a tabledrag has indents but only has leaf rows are present, it's not

      // hierarchical from an end-user point of view.

      const countNestableRows = $table

        .find('> tr.draggable, > tbody > tr.draggable')

        .not('.tabledrag-leaf').length;

      // There are no rows that accept nesting in this table, show a vertical

      // drag icon.

      if (countNestableRows === 0) {

        this.dragOrientation = 'drag-y';

      }

      /**

       * Total width of indents, set in makeDraggable.

       *
@@ -225,7 +236,6 @@ 
        $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;

      testRow.remove();

    }



    // Make each applicable row draggable.

    // Match immediate children of the parent element to allow nesting.

    $table.find('> tr.draggable, > tbody > tr.draggable').each(function () {
@@ -499,7 +509,10 @@ 
    // Add a class to the title link.

    $item.find('td:first-of-type').find('a').addClass('menu-item__link');

    // Create the handle.

    const $handle = $(Drupal.theme('tableDragHandle'));

    const $handle = $(Drupal.theme('tableDragHandle', this.dragOrientation));

    if (this.dragOrientation === 'drag-y') {

      $handle.addClass('tabledrag-handle-y');

    }

    // Insert the handle after indentations (if any).

    const $indentationLast = $item

      .find('td:first-of-type')
@@ -762,7 +775,7 @@ 
    $(item).addClass('drag');



    // Set the document to use the move cursor during drag.

    $('body').addClass('drag');

    $('body').addClass(this.dragOrientation);

    if (self.oldRowElement) {

      $(self.oldRowElement).removeClass('drag-previous');

    }
@@ -894,7 +907,7 @@ 
    // Functionality specific only to pointerup events.

    if (self.dragObject !== null) {

      self.dragObject = null;

      $('body').removeClass('drag');

      $('body').removeClass(self.dragOrientation);

      clearInterval(self.scrollInterval);

    }

  };
@@ -1760,8 +1773,12 @@ 
       * @return {string}

       *   HTML markup for a tableDrag handle.

       */

      tableDragHandle() {

        return `<a href="#" title="${Drupal.t('Drag to re-order')}"

      tableDragHandle(dragOrientation = 'drag') {

        const title =

          dragOrientation === 'drag-y'

            ? Drupal.t('Change order')

            : Drupal.t('Move in any direction');

        return `<a href="#" title="${title}"

        class="tabledrag-handle"><div class="handle"></div></a>`;

      },

    },

core/modules/block/tests/src/FunctionalJavascript/BlockDragTest.php

+3 −0
Original line number Diff line number Diff line
@@ -45,6 +45,9 @@ public function testDragAndDropBlocks() { 
    $session = $this->getSession();

    $page = $session->getPage();



    // Test if drag orientation on block layout page was applied with success.

    $this->assertNotEmpty($assertSession->waitForElementVisible('css', '.tabledrag-handle-y'));



    // Dragging main-menu and status messages to header region.

    $siteBranding = $this->getDragRow($page, 'edit-blocks-olivero-site-branding');

    $mainMenuRow = $this->getDragRow($page, 'edit-blocks-olivero-main-menu');

core/modules/field/tests/src/FunctionalJavascript/MultipleValueWidgetTest.php

+1 −1
Original line number Diff line number Diff line
@@ -112,7 +112,7 @@ public function testFieldMultipleValueWidget() { 
    $this->assertGreaterThan($field_weight_1->getValue(), $field_weight_2->getValue());



    // Drag the first row after the third row.

    $dragged = $field_0->find('xpath', 'ancestor::tr[contains(@class, "draggable")]//a[@class="tabledrag-handle"]');

    $dragged = $field_0->find('xpath', 'ancestor::tr[contains(@class, "draggable")]//a[starts-with(@class, "tabledrag-handle")]');

    $target = $field_2->find('xpath', 'ancestor::tr[contains(@class, "draggable")]');

    $dragged->dragTo($target);

core/themes/claro/css/components/tabledrag.css

+15 −0
Original line number Diff line number Diff line
@@ -23,6 +23,10 @@ body.drag { 
  cursor: move;

}



body.drag-y {

  cursor: row-resize;

}



/* The block region's title row in table. */



.region-title {
@@ -136,6 +140,17 @@ body.drag { 
  margin-left: 0;

}



/* Change icon and cursor if only vertical drag is allowed. */



.tabledrag-handle.tabledrag-handle-y {

  cursor: row-resize;

}



.tabledrag-handle.tabledrag-handle-y::after {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 8h12'/%3e%3cpath d='M8 2l2 2 -4 0 2 -2'/%3e%3cpath d='M8 14l2 -2 -4 0 2 2'/%3e%3c/svg%3e");

  background-size: 1rem 1rem;

}



@media (forced-colors: active) {

  .tabledrag-handle::after {

    content: "";

core/themes/claro/css/components/tabledrag.pcss.css

+14 −0
Original line number Diff line number Diff line
@@ -15,6 +15,10 @@ 
body.drag {

  cursor: move;

}

body.drag-y {

  cursor: row-resize;

}



/* The block region's title row in table. */

.region-title {

  font-weight: bold;
@@ -110,6 +114,16 @@ body.drag { 
  margin-left: 0;

}



/* Change icon and cursor if only vertical drag is allowed. */

.tabledrag-handle.tabledrag-handle-y {

  cursor: row-resize;

}



.tabledrag-handle.tabledrag-handle-y::after {

  background-image: url(../../images/icons/currentColor/tabledrag-handle-y.svg);

  background-size: 16px 16px;

}



@media (forced-colors: active) {

  .tabledrag-handle::after {

    content: "";