Skip to content
Snippets Groups Projects
Verified Commit c8ff8fd5 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
parent da2e2ce2
No related branches found
No related tags found
31 merge requests!12227Issue #3181946 by jonmcl, mglaman,!11131[10.4.x-only-DO-NOT-MERGE]: Issue ##2842525 Ajax attached to Views exposed filter form does not trigger callbacks,!9470[10.3.x-only-DO-NOT-MERGE]: #3331771 Fix file_get_contents(): Passing null to parameter,!8540Issue #3457061: Bootstrap Modal dialog Not closing after 10.3.0 Update,!8528Issue #3456871 by Tim Bozeman: Support NULL services,!8373Issue #3427374 by danflanagan8, Vighneshh: taxonomy_tid ViewsArgumentDefault...,!7526Expose roles in response,!7352Draft: Resolve #3203489 "Set filename as",!5423Draft: Resolve #3329907 "Test2",!3878Removed unused condition head title for views,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3651Issue #3347736: Create new SDC component for Olivero (header-search),!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3478Issue #3337882: Deleted menus are not removed from content type config,!3355Issue #3209129: Scrolling problems when adding a block via layout builder,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3133core/modules/system/css/components/hidden.module.css,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2794Issue #3100732: Allow specifying `meta` data on JSON:API objects,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2062Issue #3246454: Add weekly granularity to views date sort,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493
Pipeline #124885 canceled
Pipeline: drupal

#124890

    ......@@ -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>`;
    },
    },
    ......
    ......@@ -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');
    ......
    ......@@ -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);
    ......
    ......@@ -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: "";
    ......
    ......@@ -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: "";
    ......
    <svg 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"><path d="M2 8h12"/><path d="M8 2l2 2 -4 0 2 -2"/><path d="M8 14l2 -2 -4 0 2 2"/></svg>
    ......@@ -182,10 +182,13 @@
    * @return {string}
    * A string representing a DOM fragment.
    */
    tableDragHandle: () =>
    `<a href="#" title="${Drupal.t(
    'Drag to re-order',
    )}" class="tabledrag-handle js-tabledrag-handle"></a>`,
    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 js-tabledrag-handle"></a>`;
    },
    /**
    * The button for toggling table row weight visibility.
    ......
    0% Loading or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Please register or to comment