Skip to content

Commit 7d0f716

Browse files
vnbaaijvnbaaij
authored
[DataGrid] Tweak new resize behavior (#3787)
* - Add css variables to allow resize customization -Fix #3783 * - Update Unit Test verified files
1 parent 05fe61a commit 7d0f716

8 files changed

+27
-22
lines changed

‎src/Core/Components/DataGrid/Columns/ColumnBase.razor

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@
2828
{
2929
if (Grid.SortByAscending == true)
3030
{
31-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
31+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
3232
}
3333
else
3434
{
35-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
35+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
3636
}
3737
}
3838
@if (ColumnOptions is not null && Filtered.GetValueOrDefault())
3939
{
40-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
40+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
4141
}
4242
</FluentButton>
4343
}
@@ -93,11 +93,6 @@
9393
string? wdelta = "10px";
9494
string? align;
9595

96-
if (Grid.ResizeType is not null || ColumnOptions is not null)
97-
{
98-
wdelta = "56px";
99-
}
100-
10196
// determine align string based on Align value
10297
align = Align switch
10398
{
@@ -133,16 +128,16 @@
133128
{
134129
if (Grid.SortByAscending == true)
135130
{
136-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: 0.5;" />
131+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: var(--fluent-data-grid-header-opacity);" />
137132
}
138133
else
139134
{
140-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: 0.5;" />
135+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: var(--fluent-data-grid-header-opacity);" />
141136
}
142137
}
143138
@if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType is not null)
144139
{
145-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
140+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: var(--fluent-data-grid-header-opacity);" />
146141
}
147142
</FluentButton>
148143
</FluentKeyCode>
@@ -155,7 +150,7 @@
155150
@if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue)
156151
{
157152
<span style="padding: 0 5px;">
158-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
153+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: var(--fluent-data-grid-header-opacity);" />
159154
</span>
160155
}
161156
</div>
@@ -194,7 +189,7 @@
194189
{
195190
return
196191
@<FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
197-
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ChevronDown())" Color="Color.Neutral" Width="20px" Style="opacity: 0.5;" />
192+
<FluentIcon Value="@(new CoreIcons.Regular.Size20.ChevronDown())" Color="Color.Neutral" Width="20px" Style="opacity: var(--fluent-data-grid-header-opacity);" />
198193
</FluentButton>;
199194
}
200195

‎src/Core/Components/DataGrid/FluentDataGrid.razor.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
.fluent-data-grid {
2+
--fluent-data-grid-resize-handle-color: var(--accent-fill-rest);
3+
--fluent-data-grid-resize-handle-width: 1px;
4+
--fluent-data-grid-header-opacity: 0.5;
25
width: auto;
36
flex: 1;
47
border-collapse: collapse;
@@ -64,15 +67,15 @@
6467

6568
::deep .resize-handle {
6669
position: absolute;
67-
top: 6px;
70+
top: 5px;
6871
right: 0;
6972
left: unset;
7073
bottom: 0;
7174
height: 30px;
7275
cursor: col-resize;
7376
width: 6px;
74-
border-inline-end: 1px solid var(--neutral-stroke-divider-rest);
75-
;
77+
border-inline-end: var(--fluent-data-grid-resize-handle-width) solid var(--fluent-data-grid-resize-handle-color);
78+
opacity: var(--fluent-data-grid-header-opacity);
7679
}
7780

7881
.header {

‎src/Core/Components/DataGrid/FluentDataGrid.razor.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,8 @@ export function enableColumnResizing(gridElement) {
224224
});
225225

226226
div.addEventListener('pointerover', function (e) {
227-
e.target.style.borderInlineEnd = '2px solid var(--neutral-stroke-focus)';
227+
e.target.style.borderInlineEnd = 'var(--fluent-data-grid-resize-handle-width) solid var(--fluent-data-grid-resize-handle-color)';
228+
e.target.previousElementSibling.style.visibility = 'hidden';
228229
});
229230

230231
div.addEventListener('pointerup', removeBorder);
@@ -273,7 +274,8 @@ export function enableColumnResizing(gridElement) {
273274
div.style.cursor = 'col-resize';
274275
div.style.userSelect = 'none';
275276
div.style.height = height + 'px';
276-
div.style.width = '5px';
277+
div.style.width = '6px';
278+
div.style.opacity = 'var(--fluent-data-grid-header-opacity)'
277279

278280
if (isRTL) {
279281
div.style.left = '0px';
@@ -301,6 +303,7 @@ export function enableColumnResizing(gridElement) {
301303

302304
function removeBorder(e) {
303305
e.target.style.borderInlineEnd = '';
306+
e.target.previousElementSibling.style.visibility = 'visible';
304307
}
305308
}
306309

‎src/Core/Components/DataGrid/FluentDataGridCell.razor.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ td.grid-cell-placeholder:after {
6363
overflow: hidden;
6464
}
6565

66+
::deep .col-options-button {
67+
padding-inline-start: 4px;
68+
}
69+
6670
.col-justify-start ::deep .col-sort-button::part(control) {
6771
justify-content: start;
6872
overflow: hidden;

‎tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
88
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
99
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
10-
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
10+
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
1111
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
1212
</svg>
1313
</fluent-button>

‎tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
88
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
99
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
10-
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
10+
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
1111
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
1212
</svg>
1313
</fluent-button>

‎tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
88
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
99
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
10-
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
10+
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
1111
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
1212
</svg>
1313
</fluent-button>

‎tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
88
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
99
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
10-
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
10+
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="59" blazor:onclick="60">
1111
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
1212
</svg>
1313
</fluent-button>

0 commit comments

Comments
 (0)