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

View File

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

View File

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

View File

@ -15,6 +15,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridGenericAttributeBase @ref="Grid" DataSource="GenericAttributes" AutoSaveLayoutName="GridGenericAttribute" SignalRClient="FruitBankSignalRClient" Logger="_logger"
ParentDataItem="@ParentDataItem" CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged">
<Columns>
@ -36,6 +38,8 @@
}
</ToolbarTemplate>
</GridGenericAttributeBase>
</GridContent>
</MgGridWithInfoPanel>
@code {
[Inject] public required DatabaseClient Database { get; set; }

View File

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

View File

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

View File

@ -5,15 +5,15 @@
@inject IJSRuntime JS
<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">
<span class="me-2">??</span>
<span class="fw-semibold">Szállítólevél részletei</span>
</div>
</HeaderTemplate> *@
@* <BeforeColumnsTemplate Context="dataItem">
@if (dataItem is ShippingDocument doc)
@* <BeforeColumnsTemplate Context="ctx">
@if (ctx.DataItem is ShippingDocument doc)
{
<div class="alert alert-info mb-2 py-1 px-2 small">
<strong>Partner:</strong> @doc.Partner?.Name
@ -21,8 +21,8 @@
}
</BeforeColumnsTemplate> *@
<AfterColumnsTemplate Context="dataItem">
@if (dataItem is ShippingDocument doc)
<AfterColumnsTemplate Context="ctx">
@if (ctx is { IsEditMode: false, DataItem: ShippingDocument doc })
{
<table class="table table-sm table-bordered table-striped" style="margin-top: 35px;">
<colgroup>
@ -73,7 +73,7 @@
}
</AfterColumnsTemplate>
@* <FooterTemplate Context="dataItem">
@* <FooterTemplate Context="ctx">
<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="Export" IconCssClass="dx-icon dx-icon-export" RenderStyle="ButtonRenderStyle.Light" />

View File

@ -15,6 +15,8 @@
@* <GridShippingBase @ref="Grid" Data="Shippings" AutoSaveLayoutName="GridShipping"> *@
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridShippingBase @ref="Grid" DataSource="Shippings" AutoSaveLayoutName="GridShipping" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false"
OnGridFocusedRowChanged="Grid_FocusedRowChanged">
@ -59,6 +61,8 @@
}
</ToolbarTemplate>
</GridShippingBase>
</GridContent>
</MgGridWithInfoPanel>
@code {
//[Inject] public required ObjectLock ObjectLock { get; set; }

View File

@ -13,6 +13,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridStockTakingItemBase @ref="Grid" AutoSaveLayoutName="GridStockTakingItem" SignalRClient="FruitBankSignalRClient" Logger="_logger"
CssClass="@GridCss" ValidationEnabled="false" OnGridFocusedRowChanged="Grid_FocusedRowChanged">
<Columns>
@ -50,6 +52,8 @@
}
</ToolbarTemplate>
</GridStockTakingItemBase>
</GridContent>
</MgGridWithInfoPanel>
@code {

View File

@ -110,9 +110,10 @@ h1:focus {
background-color: #F7F7F7 !important;
color: #161616;
}
/* Fluent Themes */
/*.alt-item {
--dxbl-grid-row-bg: var(--DS-color-surface-neutral-subdued-rest);
/* DevExpress Fluent Theme - alternating row colors */
/*.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*/