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> </ToolbarTemplate>
</GridProductDto> </GridProductDto>
@code { @code {
[Inject] public required DatabaseClient Database { get; set; } [Inject] public required DatabaseClient Database { get; set; }

View File

@ -15,6 +15,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridShippingItemBase @ref="Grid" ParentDataItem="ParentDataItem" DataSource="ShippingItems" AutoSaveLayoutName="GridShippingItem" <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"
@ -123,7 +125,8 @@
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; }

View File

@ -15,6 +15,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridGenericAttributeBase @ref="Grid" DataSource="GenericAttributes" AutoSaveLayoutName="GridGenericAttribute" SignalRClient="FruitBankSignalRClient" Logger="_logger" <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>
@ -36,6 +38,8 @@
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridGenericAttributeBase> </GridGenericAttributeBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {
[Inject] public required DatabaseClient Database { get; set; } [Inject] public required DatabaseClient Database { get; set; }

View File

@ -13,6 +13,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridPartnerBase @ref="Grid" <GridPartnerBase @ref="Grid"
DataSource="Partners" DataSource="Partners"
AutoSaveLayoutName="GridPartner" AutoSaveLayoutName="GridPartner"
@ -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; }

View File

@ -11,6 +11,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridStockQuantityHistoryDtoBase @ref="Grid" ContextIds="ContextIds" ParentDataItem="ParentDataItem" DataSource="StockQuantityHistoryDtos" <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">
@ -61,6 +63,8 @@
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; }

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" />

View File

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

View File

@ -13,6 +13,8 @@
@inject IEnumerable<IAcLogWriterClientBase> LogWriters @inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient @inject FruitBankSignalRClient FruitBankSignalRClient
<MgGridWithInfoPanel ShowInfoPanel="@IsMasterGrid">
<GridContent>
<GridStockTakingItemBase @ref="Grid" AutoSaveLayoutName="GridStockTakingItem" SignalRClient="FruitBankSignalRClient" Logger="_logger" <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>
@ -50,6 +52,8 @@
} }
</ToolbarTemplate> </ToolbarTemplate>
</GridStockTakingItemBase> </GridStockTakingItemBase>
</GridContent>
</MgGridWithInfoPanel>
@code { @code {

View File

@ -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*/