Skip to content

Commit c7217d9

Browse files
yordan-styordan-st
committed
feat: enhance drag-and-drop functionality with new drag handle and styling adjustments
1 parent 1fca667 commit c7217d9

File tree

5 files changed

+74
-56
lines changed

5 files changed

+74
-56
lines changed

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $root: ".widget-datagrid";
2222
background-color: var(--bg-color-secondary, $bg-color-secondary);
2323
border-width: 0;
2424
border-color: var(--grid-border-color, $grid-border-color);
25-
padding: var(--spacing-medium, $spacing-medium);
25+
padding: 0 var(--spacing-medium, $spacing-medium);
2626
top: 0;
2727
min-width: 0;
2828
position: relative;
@@ -44,7 +44,7 @@ $root: ".widget-datagrid";
4444
top: 0;
4545
height: 100%;
4646
width: var(--spacing-smaller, $spacing-smaller);
47-
background-color: $dragging-color-effect;
47+
background-color: var(--brand-primary, $dragging-color-effect);
4848

4949
z-index: 1;
5050
}
@@ -92,13 +92,63 @@ $root: ".widget-datagrid";
9292
}
9393
}
9494

95+
/* Drag handle */
96+
.drag-handle {
97+
cursor: grab;
98+
pointer-events: auto;
99+
position: relative;
100+
padding: 4px;
101+
// margin-inline-end: 4px;
102+
flex-grow: 0;
103+
flex-shrink: 0;
104+
display: flex;
105+
justify-content: center;
106+
align-self: normal;
107+
z-index: 1;
108+
opacity: 0;
109+
transition: opacity 0.15s ease;
110+
111+
&:hover {
112+
// background-color: var(--brand-primary-50, $brand-light);
113+
svg {
114+
color: var(--brand-primary, $brand-primary);
115+
}
116+
}
117+
&:active {
118+
cursor: grabbing;
119+
}
120+
&:focus-visible {
121+
opacity: 1;
122+
}
123+
svg {
124+
margin: 0;
125+
width: 8px;
126+
}
127+
}
128+
129+
&:hover .drag-handle,
130+
&:focus-within .drag-handle {
131+
opacity: 1;
132+
}
133+
134+
/* Parent background change on drag handle hover */
135+
&:has(.drag-handle:hover) {
136+
background-color: var(--brand-primary-50, $brand-light);
137+
}
138+
139+
/* Remove left padding when drag handle is present */
140+
&:has(.drag-handle) {
141+
padding-left: 0;
142+
}
143+
95144
/* Content of the column header */
96145
.column-container {
97146
display: flex;
98147
flex-direction: column;
99148
flex-grow: 1;
100149
align-self: stretch;
101150
min-width: 0;
151+
padding: var(--spacing-small, $spacing-small) 0;
102152

103153
&:not(:has(.filter)) {
104154
.column-header {
@@ -131,38 +181,6 @@ $root: ".widget-datagrid";
131181
align-self: center;
132182
}
133183

134-
/* Drag handle */
135-
.drag-handle {
136-
cursor: grab;
137-
pointer-events: auto;
138-
position: relative;
139-
width: 14px;
140-
padding: 0;
141-
flex-grow: 0;
142-
flex-shrink: 0;
143-
display: flex;
144-
justify-content: center;
145-
align-self: normal;
146-
z-index: 1;
147-
148-
&:hover {
149-
background-color: var(--brand-primary-50, $brand-light);
150-
svg {
151-
color: var(--brand-primary, $brand-primary);
152-
}
153-
}
154-
&:active {
155-
cursor: grabbing;
156-
}
157-
svg {
158-
margin: 0;
159-
}
160-
}
161-
162-
.drag-handle + .column-caption {
163-
padding-inline-start: 4px;
164-
}
165-
166184
&:focus:not(:focus-visible) {
167185
outline: none;
168186
}

‎packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $spacing-larger: 32px !default;
3333
$gallery-gap: $spacing-small !default;
3434

3535
// Effects and animations
36-
$dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
36+
$dragging-color-effect: $brand-primary !default;
3737
$skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
3838

3939
// Assets

‎packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ColumnHeader } from "./ColumnHeader";
44
import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
55
import { ColumnResizerProps } from "./ColumnResizer";
66
import { observer } from "mobx-react-lite";
7+
import { DragHandle } from "./DragHandle";
78

89
export interface ColumnContainerProps {
910
isLast?: boolean;
@@ -35,6 +36,9 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
3536
onDragEnter={vm.isDraggable ? vm.handleDragEnter : undefined}
3637
onDragOver={vm.isDraggable ? vm.handleDragOver : undefined}
3738
>
39+
{vm.isDraggable && (
40+
<DragHandle draggable={vm.isDraggable} onDragStart={vm.handleDragStart} onDragEnd={vm.handleDragEnd} />
41+
)}
3842
<div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
3943
<ColumnHeader />
4044
{columnsFilterable && (

‎packages/pluggableWidgets/datagrid-web/src/components/ColumnHeader.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import classNames from "classnames";
22
import { HTMLAttributes, KeyboardEvent, ReactElement, ReactNode } from "react";
3-
import { DragHandle } from "./DragHandle";
43
import { FaArrowsAltV } from "./icons/FaArrowsAltV";
54
import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
65
import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
@@ -26,9 +25,6 @@ export const ColumnHeader = observer(function ColumnHeader(): ReactElement {
2625
{...sortProps}
2726
aria-label={canSort ? "sort " + caption : caption}
2827
>
29-
{vm.isDraggable && (
30-
<DragHandle draggable={vm.isDraggable} onDragStart={vm.handleDragStart} onDragEnd={vm.handleDragEnd} />
31-
)}
3228
<span className="column-caption">{caption.length > 0 ? caption : "\u00a0"}</span>
3329
{canSort ? <SortIcon direction={column.sortDir} /> : null}
3430
</div>

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnContainer.spec.tsx.snap‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,23 @@ exports[`ColumnContainer renders the structure correctly when draggable 1`] = `
4040
style="cursor: unset;"
4141
title="Column 1"
4242
>
43+
<span
44+
class="drag-handle"
45+
draggable="true"
46+
>
47+
<svg
48+
aria-hidden="true"
49+
focusable="false"
50+
role="img"
51+
viewBox="0 0 320 512"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<path
55+
d="M96 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128 160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128 160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32z"
56+
fill="currentColor"
57+
/>
58+
</svg>
59+
</span>
4360
<div
4461
class="column-container"
4562
id="datagrid2_1:Datagrid@14-column0"
@@ -48,23 +65,6 @@ exports[`ColumnContainer renders the structure correctly when draggable 1`] = `
4865
aria-label="Column 1"
4966
class="column-header align-column-left"
5067
>
51-
<span
52-
class="drag-handle"
53-
draggable="true"
54-
>
55-
<svg
56-
aria-hidden="true"
57-
focusable="false"
58-
role="img"
59-
viewBox="0 0 320 512"
60-
xmlns="http://www.w3.org/2000/svg"
61-
>
62-
<path
63-
d="M96 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128 160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128 160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32z"
64-
fill="currentColor"
65-
/>
66-
</svg>
67-
</span>
6868
<span
6969
class="column-caption"
7070
>

0 commit comments

Comments
 (0)