[MGNLUI-4577] Style for drag&drop in TreeTable Created: 17/Aug/18  Updated: 03/Dec/18  Resolved: 19/Nov/18

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.0

Type: Task Priority: Neutral
Reporter: Roman Kovařík Assignee: Hieu Nguyen Duc
Resolution: Done Votes: 1
Labels: None
Remaining Estimate: 0d
Time Spent: 2d 1h
Original Estimate: Not Specified

Attachments: PNG File middleDrag.png     PNG File sideDrag.png    
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: Resurface polishing
Sprint: Saigon 158
Story Points: 2

 Description   

Style drag and drop states in the TreeTable. They should work the same way as in the Grid. 

Acceptance criteria, styles for 

  • dragged item row – Works correctly, no action needed.
  • drop target line – Line is shown in the wrong place, under the column headings!
  • drop target row – Works correctly, no action needed.

are defined, see comment.



 Comments   
Comment by Roman Kovařík [ 12/Sep/18 ]

These are the default styles in the old theme:

 // Drag and drop
  $v-grid-drag-indicator-color: $c11;

  .#{$primary-stylename}-row-drag-top, .#{$primary-stylename}-row-drag-bottom, .#{$primary-stylename}-row-drag-bottom {
    z-index: 100;
  }
  .#{$primary-stylename}-row-drag-top:before,
  .#{$primary-stylename}-row-drag-bottom:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: $v-grid-drag-indicator-color;
    pointer-events: none;
    border: none;
  }
  .#{$primary-stylename}-row-drag-bottom:after {
    bottom: -1px;
  }
  .#{$primary-stylename}-row-drag-top:before {
    top: -1px;
  }
  .#{$primary-stylename}-row-drag-center:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 2px solid $v-grid-drag-indicator-color;
    pointer-events: none;
  }
  .#{$primary-stylename}-row-selected {
    &.#{$primary-stylename}-row-drag-center:after {
      border-color: darken($v-grid-drag-indicator-color, 10%);
    }
    &.#{$primary-stylename}-row-drag-top:before,
    &.#{$primary-stylename}-row-drag-bottom:after {
      background: darken($v-grid-drag-indicator-color, 10%);
    }
  }
Comment by Hieu Nguyen Duc [ 14/Nov/18 ]

avongunten Currently these are drag&drop colors that I copy from m5.

$table-separator: #6fa4b1;
$drop-destination: #b7d1d8;

I see no color for drag & drop in mockups. Do you have any idea?

Comment by Anja von Gunten [ 15/Nov/18 ]

hieu.nguyen

Please use

Black for the line #232323

Light Grey for the drop destination #ebebeb 

Comment by Dai Ha [ 19/Nov/18 ]

Verified with magnolia-enterprise-pro-demo-bundle-6.0-20181118.232456-634-tomcat-bundle.zip
Dragging over target row's style is overridden, an enhanced version of selector would work

.v-table-row-drag-middle td[class=“v-table-cell-content”]
Comment by Mikaël Geljić [ 26/Nov/18 ]

From review:

  • cannot see placeholder when dragging above the top item/root
  • placeholder has two positions when dragging between two rows
    • first hovering the top of the row, and keeping moving up, it slightly jumps when hovering the bottom of the previous row. Both positions have the same effect.
Comment by Hieu Nguyen Duc [ 03/Dec/18 ]

As discussed with Anja, the second bullet is the behavior of M5 and will be improved in a follow-up. The first bullet point is a flaw that will be filed.

Generated at Mon Feb 12 09:18:01 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.