Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/Core/Components/DataGrid/FluentDataGrid.razor
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,8 @@

@if (ResizableColumns)
{
<div class="resize-handle"></div>
var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;";
<div class="resize-handle" style="@top"></div>
}
</FluentDataGridCell>
}
Expand Down
1 change: 0 additions & 1 deletion src/Core/Components/DataGrid/FluentDataGrid.razor.css
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@

.fluent-data-grid .resize-handle {
position: absolute;
top: 5px;
right: 0;
left: unset;
bottom: 0;
Expand Down
9 changes: 6 additions & 3 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,11 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
const resizedivs = header.querySelectorAll('.actual-resize-handle');
resizedivs.forEach(div => div.remove());

// get the top of the first resize-handle
const resizeTop = (header.querySelector('.resize-handle') as HTMLElement)?.offsetTop ?? 2;

// add a new resize div
const div = createDiv(resizeHandleHeight, isRTL);
const div = createDiv(resizeHandleHeight, resizeTop, isRTL);
header.appendChild(div);
setListeners(div, isRTL);
});
Expand Down Expand Up @@ -302,10 +305,10 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid {
});
}

function createDiv(height: number, isRTL: boolean) {
function createDiv(height: number, top: number, isRTL: boolean) {
const div = document.createElement('div');
div.className = 'actual-resize-handle';
div.style.top = '5px';
div.style.top = top + 'px';
div.style.position = 'absolute';
div.style.cursor = 'col-resize';
div.style.userSelect = 'none';
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati
.AddStyle("height", $"{Grid.ItemSize.ToString(CultureInfo.InvariantCulture):0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize)
.AddStyle("height", $"{((int)Grid.RowSize).ToString(CultureInfo.InvariantCulture)}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null) && InternalGridContext.TotalItemCount > 0)
.AddStyle("height", "100%", Grid.MultiLine)
.AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
.AddStyle("min-height", "40px", Owner.RowType != DataGridRowType.Default)
.AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(CultureInfo.InvariantCulture), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService)
.AddStyle(Owner.Style)
.Build();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
font-weight: 600;
text-align: center;
position: relative;
padding: 5px 1px;
padding: 0px 1px;
}

.fluent-data-grid .col-sort-button {
Expand Down
5 changes: 4 additions & 1 deletion src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
</ItemGroup>

<!-- Log before modification -->
<Message Importance="normal" Text="Found @(_ContentWithAbsolutePaths->Count()) Content items with absolute paths to normalize" />
<Message Importance="normal" Text="Found @(_ContentWithAbsolutePaths-&gt;Count()) Content items with absolute paths to normalize" />

<!-- Remove the items with absolute paths -->
<ItemGroup Condition="$([MSBuild]::IsOSPlatform('Linux'))">
Expand Down Expand Up @@ -153,4 +153,7 @@
<NoWarn>CS1591</NoWarn>
</EmbeddedResource>
</ItemGroup>
<ItemGroup>
<Folder Include="Components\Nav\" />
</ItemGroup>
</Project>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" id="xxx" appearance="subtle" blazor:onclick="x" blazor:oncontextmenu="36">
<div class="col-title-text">Name</div>
<svg slot="end" style="width: 20px; fill: currentColor; opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="x" blazor:onclick="x" blazor:elementreference="xxx">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid loading" style="grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%;" aria-rowcount="1" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="min-width: 100px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="16" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="min-width: 100px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="16" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr; border-collapse: separate; border-spacing: 0;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="sticky-header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
<div style="cursor: pointer;" blazor:onclick="x" blazor:onkeydown="x">➖</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none">
<svg style="width: 20px; fill: var(--colorBrandForeground1); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="x" blazor:onkeydown="x" blazor:elementreference="xxx">
<title>Some rows are selected</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
</svg>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
<thead>
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
<div style="display: flex; justify-content: flex-start; margin-inline-end: 5px; margin-inline-start: 5px;">
<div class="col-title" style="width: calc(100% - 10px);">
<div class="col-title-text">Name</div>
Expand Down
Loading
Loading