Adam
/
FruitBankHybridApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DevExpress Fluent theme: grid/info panel refactor 

Major refactor for DevExpress Fluent theme compatibility:
- InfoPanel templates now use strongly-typed context (`InfoPanelContext`)
- Unified grid layout with `MgGridWithInfoPanel` wrapper
- CSS updated to use Fluent theme variables and container queries
- App-wide CSS cleanup and formatting improvements
- `.editorconfig` added for modern CSS support
- Improved InfoPanel instance resolution for nested grids
- Codebase is cleaner, more maintainable, and ready for further customization
This commit is contained in:
Loretta 2025-12-21 08:24:40 +01:00
parent e8d38f0038
commit 271868b4d5
9 changed files with 459 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
FruitBankHybrid.Shared/Components/GridProductDtoTemplate.razor
View File

@ -74,7 +74,6 @@
</ToolbarTemplate> </ToolbarTemplate>
</GridProductDto> </GridProductDto>
@code { @code {
[Inject] public required DatabaseClient Database { get; set; } [Inject] public required DatabaseClient Database { get; set; }

9
FruitBankHybrid.Shared/Components/GridShippingItemTemplate.razor
View File

@ -15,7 +15,9 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<GridShippingItemBase @ref="Grid" ParentDataItem="ParentDataItem" DataSource="ShippingItems" AutoSaveLayoutName="GridShippingItem" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridShippingItemBase @ref="Grid" ParentDataItem="ParentDataItem" DataSource="ShippingItems" AutoSaveLayoutName="GridShippingItem"
SignalRClient="FruitBankSignalRClient" Logger="_logger" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false" CustomizeElement="Grid_CustomizeElement" CssClass="@GridCss" ValidationEnabled="false" CustomizeElement="Grid_CustomizeElement"
OnGridFocusedRowChanged="Grid_FocusedRowChanged"> OnGridFocusedRowChanged="Grid_FocusedRowChanged">
@ -122,8 +124,9 @@
FieldName="MeasuredNetWeight" FieldName="MeasuredNetWeight"
FooterColumnName="NetWeight" /> FooterColumnName="NetWeight" />
</GroupSummary> </GroupSummary>
</GridShippingItemBase> </GridShippingItemBase>
@* </MgGridBase> *@ </GridContent>
</MgGridWithInfoPanel>
@code { @code {
//[Inject] public required ObjectLock ObjectLock { get; set; } //[Inject] public required ObjectLock ObjectLock { get; set; }

8
FruitBankHybrid.Shared/Components/Grids/GenericAttributes/GridGenericAttribute.razor
View File

@ -15,7 +15,9 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<GridGenericAttributeBase @ref="Grid" DataSource="GenericAttributes" AutoSaveLayoutName="GridGenericAttribute" SignalRClient="FruitBankSignalRClient" Logger="_logger" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridGenericAttributeBase @ref="Grid" DataSource="GenericAttributes" AutoSaveLayoutName="GridGenericAttribute" SignalRClient="FruitBankSignalRClient" Logger="_logger"
ParentDataItem="@ParentDataItem" CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged"> ParentDataItem="@ParentDataItem" CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged">
<Columns> <Columns>
<DxGridDataColumn FieldName="@nameof(GenericAttribute.Id)" SortIndex="0" SortOrder="GridColumnSortOrder.Descending" ReadOnly="true" /> <DxGridDataColumn FieldName="@nameof(GenericAttribute.Id)" SortIndex="0" SortOrder="GridColumnSortOrder.Descending" ReadOnly="true" />
@ -36,11 +38,13 @@
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridGenericAttributeBase> </GridGenericAttributeBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {
[Inject] public required DatabaseClient Database { get; set; } [Inject] public required DatabaseClient Database { get; set; }
[Parameter] public AcObservableCollection<GenericAttributeDto>? GenericAttributes{ get; set; } [Parameter] public AcObservableCollection<GenericAttributeDto>? GenericAttributes { get; set; }
//[Parameter] public object[]? ContextIds { get; set; } //[Parameter] public object[]? ContextIds { get; set; }
[Parameter] public IId<int>? ParentDataItem { get; set; } [Parameter] public IId<int>? ParentDataItem { get; set; }

6
FruitBankHybrid.Shared/Components/Grids/Partners/GridPartner.razor
View File

@ -13,7 +13,9 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<GridPartnerBase @ref="Grid" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridPartnerBase @ref="Grid"
DataSource="Partners" DataSource="Partners"
AutoSaveLayoutName="GridPartner" AutoSaveLayoutName="GridPartner"
SignalRClient="FruitBankSignalRClient" SignalRClient="FruitBankSignalRClient"
@ -69,6 +71,8 @@
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridPartnerBase> </GridPartnerBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {
//[Inject] public required ObjectLock ObjectLock { get; set; } //[Inject] public required ObjectLock ObjectLock { get; set; }

8
FruitBankHybrid.Shared/Components/Grids/Products/GridStockQuantityHistoryDtoTemplate.razor
View File

@ -11,7 +11,9 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<GridStockQuantityHistoryDtoBase @ref="Grid" ContextIds="ContextIds" ParentDataItem="ParentDataItem" DataSource="StockQuantityHistoryDtos" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridStockQuantityHistoryDtoBase @ref="Grid" ContextIds="ContextIds" ParentDataItem="ParentDataItem" DataSource="StockQuantityHistoryDtos"
AutoSaveLayoutName="GridStockQuantityHistoryDto" SignalRClient="FruitBankSignalRClient" Logger="_logger" AutoSaveLayoutName="GridStockQuantityHistoryDto" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false"> CssClass="@GridCss" ValidationEnabled="false">
<Columns> <Columns>
@ -60,7 +62,9 @@
FieldName="MeasuredNetWeight" FieldName="MeasuredNetWeight"
FooterColumnName="NetWeight" /> FooterColumnName="NetWeight" />
</GroupSummary> *@ </GroupSummary> *@
</GridStockQuantityHistoryDtoBase> </GridStockQuantityHistoryDtoBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {
[Inject] public required DatabaseClient Database { get; set; } [Inject] public required DatabaseClient Database { get; set; }

12
FruitBankHybrid.Shared/Components/Grids/ShippingDocuments/GridShippingDocumentInfoPanel.razor
View File

@ -5,15 +5,15 @@
@inject IJSRuntime JS @inject IJSRuntime JS
<MgGridInfoPanel OnDataItemChanged="OnDataItemChangedAsync"> <MgGridInfoPanel OnDataItemChanged="OnDataItemChangedAsync">
@* <HeaderTemplate Context="dataItem"> @* <HeaderTemplate Context="ctx">
<div class="dxbl-grid-header-panel px-3 py-2 border-bottom d-flex align-items-center"> <div class="dxbl-grid-header-panel px-3 py-2 border-bottom d-flex align-items-center">
<span class="me-2">??</span> <span class="me-2">??</span>
<span class="fw-semibold">Szállítólevél részletei</span> <span class="fw-semibold">Szállítólevél részletei</span>
</div> </div>
</HeaderTemplate> *@ </HeaderTemplate> *@
@* <BeforeColumnsTemplate Context="dataItem"> @* <BeforeColumnsTemplate Context="ctx">
@if (dataItem is ShippingDocument doc) @if (ctx.DataItem is ShippingDocument doc)
{ {
<div class="alert alert-info mb-2 py-1 px-2 small"> <div class="alert alert-info mb-2 py-1 px-2 small">
<strong>Partner:</strong> @doc.Partner?.Name <strong>Partner:</strong> @doc.Partner?.Name
@ -21,8 +21,8 @@
} }
</BeforeColumnsTemplate> *@ </BeforeColumnsTemplate> *@
<AfterColumnsTemplate Context="dataItem"> <AfterColumnsTemplate Context="ctx">
@if (dataItem is ShippingDocument doc) @if (ctx is { IsEditMode: false, DataItem: ShippingDocument doc })
{ {
<table class="table table-sm table-bordered table-striped" style="margin-top: 35px;"> <table class="table table-sm table-bordered table-striped" style="margin-top: 35px;">
<colgroup> <colgroup>
@ -73,7 +73,7 @@
} }
</AfterColumnsTemplate> </AfterColumnsTemplate>
@* <FooterTemplate Context="dataItem"> @* <FooterTemplate Context="ctx">
<div class="p-2 border-top d-flex gap-2"> <div class="p-2 border-top d-flex gap-2">
<DxButton Text="Nyomtatás" IconCssClass="dx-icon dx-icon-print" RenderStyle="ButtonRenderStyle.Light" /> <DxButton Text="Nyomtatás" IconCssClass="dx-icon dx-icon-print" RenderStyle="ButtonRenderStyle.Light" />
<DxButton Text="Export" IconCssClass="dx-icon dx-icon-export" RenderStyle="ButtonRenderStyle.Light" /> <DxButton Text="Export" IconCssClass="dx-icon dx-icon-export" RenderStyle="ButtonRenderStyle.Light" />

8
FruitBankHybrid.Shared/Components/Grids/Shippings/GridShipping.razor
View File

@ -15,7 +15,9 @@
@* <GridShippingBase @ref="Grid" Data="Shippings" AutoSaveLayoutName="GridShipping"> *@ @* <GridShippingBase @ref="Grid" Data="Shippings" AutoSaveLayoutName="GridShipping"> *@
<GridShippingBase @ref="Grid" DataSource="Shippings" AutoSaveLayoutName="GridShipping" SignalRClient="FruitBankSignalRClient" Logger="_logger" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridShippingBase @ref="Grid" DataSource="Shippings" AutoSaveLayoutName="GridShipping" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false" CssClass="@GridCss" ValidationEnabled="false"
OnGridFocusedRowChanged="Grid_FocusedRowChanged"> OnGridFocusedRowChanged="Grid_FocusedRowChanged">
<Columns> <Columns>
@ -58,7 +60,9 @@
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" /> <MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridShippingBase> </GridShippingBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {
//[Inject] public required ObjectLock ObjectLock { get; set; } //[Inject] public required ObjectLock ObjectLock { get; set; }

6
FruitBankHybrid.Shared/Components/Grids/StockTakingItems/GridStockTakingItem.razor
View File

@ -13,7 +13,9 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<GridStockTakingItemBase @ref="Grid" AutoSaveLayoutName="GridStockTakingItem" SignalRClient="FruitBankSignalRClient" Logger="_logger" <MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridStockTakingItemBase @ref="Grid" AutoSaveLayoutName="GridStockTakingItem" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged"> CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged">
<Columns> <Columns>
<DxGridDataColumn FieldName="Id" SortIndex="0" SortOrder="GridColumnSortOrder.Descending" ReadOnly="true" /> <DxGridDataColumn FieldName="Id" SortIndex="0" SortOrder="GridColumnSortOrder.Descending" ReadOnly="true" />
@ -50,6 +52,8 @@
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridStockTakingItemBase> </GridStockTakingItemBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {

111
FruitBankHybrid.Shared/wwwroot/app.css
View File

@ -43,9 +43,9 @@ h1:focus {
color: white; color: white;
} }
.blazor-error-boundary::after { .blazor-error-boundary::after {
content: "An error has occurred." content: "An error has occurred."
} }
.darker-border-checkbox.form-check-input { .darker-border-checkbox.form-check-input {
border-color: #929292; border-color: #929292;
@ -93,7 +93,7 @@ h1:focus {
.hide-toolbar .dxbl-grid-toolbar-container { .hide-toolbar .dxbl-grid-toolbar-container {
display: none; display: none;
} }
.hideDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button { .hideDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button {
visibility: hidden; visibility: hidden;
@ -110,9 +110,10 @@ h1:focus {
background-color: #F7F7F7 !important; background-color: #F7F7F7 !important;
color: #161616; color: #161616;
} }
/* Fluent Themes */
/*.alt-item { /* DevExpress Fluent Theme - alternating row colors */
--dxbl-grid-row-bg: var(--DS-color-surface-neutral-subdued-rest); /*.alt-item > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
background-color: var(--DS-color-surface-neutral-subdued-rest) !important;
}*/ }*/
/*endregion: DSGrids*/ /*endregion: DSGrids*/
@ -169,18 +170,18 @@ h1:focus {
justify-content: center; justify-content: center;
} }
.grid-new-row::before, .grid-new-row::before,
.grid-edit-row::before, .grid-edit-row::before,
.grid-delete-row::before, .grid-delete-row::before,
.grid-save::before, .grid-save::before,
.grid-cancel::before, .grid-cancel::before,
.grid-chevron-up::before, .grid-chevron-up::before,
.grid-chevron-down::before, .grid-chevron-down::before,
.grid-column-chooser::before, .grid-column-chooser::before,
.grid-export::before, .grid-export::before,
.grid-export-xlsx::before, .grid-export-xlsx::before,
.grid-export-pdf::before, .grid-export-pdf::before,
.grid-refresh::before { .grid-refresh::before {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 1.25rem; width: 1.25rem;
@ -193,79 +194,79 @@ h1:focus {
-webkit-mask-size: contain; -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
} }
/* Plus icon (New) */ /* Plus icon (New) */
.grid-new-row::before { .grid-new-row::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
} }
/* Edit/Pencil icon */ /* Edit/Pencil icon */
.grid-edit-row::before { .grid-edit-row::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
} }
/* Trash/Delete icon */ /* Trash/Delete icon */
.grid-delete-row::before { .grid-delete-row::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
} }
/* Save/Check icon */ /* Save/Check icon */
.grid-save::before { .grid-save::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
} }
/* Cancel/Close icon */ /* Cancel/Close icon */
.grid-cancel::before { .grid-cancel::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
} }
/* Chevron Up icon */ /* Chevron Up icon */
.grid-chevron-up::before { .grid-chevron-up::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
} }
/* Chevron Down icon */ /* Chevron Down icon */
.grid-chevron-down::before { .grid-chevron-down::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
} }
/* Column Chooser icon */ /* Column Chooser icon */
.grid-column-chooser::before { .grid-column-chooser::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3C/svg%3E");
} }
/* Export icon */ /* Export icon */
.grid-export::before { .grid-export::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
} }
/* Export XLSX icon */ /* Export XLSX icon */
.grid-export-xlsx::before { .grid-export-xlsx::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E");
} }
/* Export PDF icon */ /* Export PDF icon */
.grid-export-pdf::before { .grid-export-pdf::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
} }
/* Refresh icon */ /* Refresh icon */
.grid-refresh::before { .grid-refresh::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
} }
/* ======================================== /* ========================================
MgGrid Splitter with InfoPanel MgGrid Splitter with InfoPanel