[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: |
|
| 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
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; I see no color for drag & drop in mockups. Do you have any idea? |
| Comment by Anja von Gunten [ 15/Nov/18 ] |
|
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 .v-table-row-drag-middle td[class=“v-table-cell-content”] |
| Comment by Mikaël Geljić [ 26/Nov/18 ] |
|
From review:
|
| 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. |