Refactor grid InfoPanel: sticky, responsive, new icons
- Redesigned MgGridInfoPanel to use a sticky, scroll-aware layout via JavaScript for better UX when scrolling. - InfoPanel now uses a responsive CSS grid layout with container queries for 1/2/3 column display based on width. - Added new toolbar icons using SVG masks for a modern, consistent look; updated toolbar item class names. - Added "Prev Row" and "Next Row" navigation buttons to the grid toolbar, with corresponding methods in grid base classes. - Unified edit state enum naming to MgGridEditState and updated all references. - Improved InfoPanel cell rendering for better text overflow handling and tooltips. - Updated CSS for InfoPanel and grid, including sticky pane support and icon styles. - Registered mgGridInfoPanel.js in App.razor and index.html for JS interop. - Minor UI/UX tweaks: InfoPanel header, background colors, and panel sizing.
This commit is contained in:
parent
fbe09be307
commit
a0f7ac6a29
|
|
@ -24,7 +24,7 @@ public class MgGridBase : DxGrid, IMgGridBase
|
|||
public bool IsSyncing => false;
|
||||
|
||||
/// <inheritdoc />
|
||||
public MgEditState EditState { get; private set; } = MgEditState.None;
|
||||
public MgGridEditState GridEditState { get; private set; } = MgGridEditState.None;
|
||||
|
||||
[Inject] public required IEnumerable<IAcLogWriterClientBase> LogWriters { get; set; }
|
||||
[Inject] public required FruitBankSignalRClient FruitBankSignalRClient { get; set; }
|
||||
|
|
@ -145,6 +145,30 @@ public class MgGridBase : DxGrid, IMgGridBase
|
|||
//StateHasChanged();
|
||||
}
|
||||
}
|
||||
/// <summary>
|
||||
/// Navigates to the previous row in the grid
|
||||
/// </summary>
|
||||
public void StepPrevRow()
|
||||
{
|
||||
var currentIndex = GetFocusedRowIndex();
|
||||
if (currentIndex > 0)
|
||||
{
|
||||
SetFocusedRowIndex(currentIndex - 1);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Navigates to the next row in the grid
|
||||
/// </summary>
|
||||
public void StepNextRow()
|
||||
{
|
||||
var currentIndex = GetFocusedRowIndex();
|
||||
var visibleRowCount = GetVisibleRowCount();
|
||||
if (currentIndex >= 0 && currentIndex < visibleRowCount - 1)
|
||||
{
|
||||
SetFocusedRowIndex(currentIndex + 1);
|
||||
}
|
||||
}
|
||||
|
||||
async Task Grid_LayoutAutoLoading(GridPersistentLayoutEventArgs e)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -12,36 +12,40 @@
|
|||
@using FruitBankHybrid.Shared.Services.SignalRs
|
||||
|
||||
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
|
||||
@inject FruitBankSignalRClient FruitBankSignalRClient
|
||||
@inject LoggedInModel LoggedInModel;
|
||||
|
||||
<ToolbarBase @ref="Toolbar" Grid="Grid" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
|
||||
<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-toolbar-new"
|
||||
<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-new-row"
|
||||
Visible="@(!IsEditing)" Enabled="@(!IsSyncing)" />
|
||||
<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-toolbar-edit"
|
||||
<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-edit-row"
|
||||
Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
|
||||
<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-toolbar-delete"
|
||||
<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-delete-row"
|
||||
Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsDeveloper && HasFocusedRow && !IsSyncing)" />
|
||||
|
||||
<DxToolbarItem Text="Save" Click="SaveItem_Click" IconCssClass="grid-toolbar-save"
|
||||
<DxToolbarItem Text="Save" Click="SaveItem_Click" IconCssClass="grid-save"
|
||||
Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Primary" />
|
||||
<DxToolbarItem Text="Cancel" Click="CancelEdit_Click" IconCssClass="grid-toolbar-cancel"
|
||||
<DxToolbarItem Text="Cancel" Click="CancelEdit_Click" IconCssClass="grid-cancel"
|
||||
Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Secondary" />
|
||||
|
||||
|
||||
@if (!OnlyGridEditTools)
|
||||
{
|
||||
<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-toolbar-column-chooser"
|
||||
<DxToolbarItem Text="Prev Row" BeginGroup="true" Click="PrevRow_Click" IconCssClass="grid-chevron-up"
|
||||
Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
|
||||
<DxToolbarItem Text="Next Row" Click="NextRow_Click" IconCssClass="grid-chevron-down"
|
||||
Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
|
||||
|
||||
<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-column-chooser"
|
||||
Visible="@(!IsEditing)"/>
|
||||
<DxToolbarItem Text="Export" IconCssClass="grid-toolbar-export"
|
||||
<DxToolbarItem Text="Export" IconCssClass="grid-export"
|
||||
Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsAdministrator && HasFocusedRow)">
|
||||
<Items>
|
||||
<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click"/>
|
||||
<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click"/>
|
||||
<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click"/>
|
||||
<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click"/>
|
||||
<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click" IconCssClass="grid-export-xlsx"/>
|
||||
<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click" IconCssClass="grid-export-xlsx"/>
|
||||
<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click" IconCssClass="grid-export-xlsx"/>
|
||||
<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click" IconCssClass="grid-export-pdf"/>
|
||||
</Items>
|
||||
</DxToolbarItem>
|
||||
<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click"
|
||||
<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click" IconCssClass="grid-refresh"
|
||||
Visible="@(!IsEditing)" Enabled="@(!IsSyncing && !_isReloadInProgress)"/>
|
||||
<DxToolbarItem BeginGroup="true">
|
||||
</DxToolbarItem>
|
||||
|
|
@ -64,7 +68,7 @@
|
|||
/// <summary>
|
||||
/// Whether the grid is currently in edit mode (New or Edit)
|
||||
/// </summary>
|
||||
private bool IsEditing => Grid?.EditState != MgEditState.None;
|
||||
private bool IsEditing => Grid?.GridEditState != MgGridEditState.None;
|
||||
|
||||
/// <summary>
|
||||
/// Whether the grid is currently syncing data
|
||||
|
|
@ -121,6 +125,16 @@
|
|||
await Grid.CancelEditAsync();
|
||||
}
|
||||
|
||||
void PrevRow_Click()
|
||||
{
|
||||
Grid.StepPrevRow();
|
||||
}
|
||||
|
||||
void NextRow_Click()
|
||||
{
|
||||
Grid.StepNextRow();
|
||||
}
|
||||
|
||||
void ColumnChooserItem_Click(ToolbarItemClickEventArgs e)
|
||||
{
|
||||
Grid.ShowColumnChooser();
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ h1:focus {
|
|||
}
|
||||
|
||||
.blazor-error-boundary {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
||||
padding: 1rem 1rem 1rem 3.7rem;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -146,4 +146,138 @@ h1:focus {
|
|||
|
||||
.order-notification-toast .date {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
/* ========================================
|
||||
Grid Toolbar Icons - SVG based
|
||||
======================================== */
|
||||
|
||||
/* Base icon styling using CSS masks */
|
||||
.grid-new-row,
|
||||
.grid-edit-row,
|
||||
.grid-delete-row,
|
||||
.grid-save,
|
||||
.grid-cancel,
|
||||
.grid-chevron-up,
|
||||
.grid-chevron-down,
|
||||
.grid-column-chooser,
|
||||
.grid-export,
|
||||
.grid-export-xlsx,
|
||||
.grid-export-pdf,
|
||||
.grid-refresh {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-new-row::before,
|
||||
.grid-edit-row::before,
|
||||
.grid-delete-row::before,
|
||||
.grid-save::before,
|
||||
.grid-cancel::before,
|
||||
.grid-chevron-up::before,
|
||||
.grid-chevron-down::before,
|
||||
.grid-column-chooser::before,
|
||||
.grid-export::before,
|
||||
.grid-export-xlsx::before,
|
||||
.grid-export-pdf::before,
|
||||
.grid-refresh::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.25rem;
|
||||
background-color: currentColor;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
}
|
||||
|
||||
/* Plus icon (New) */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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 */
|
||||
.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");
|
||||
-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
|
||||
InfoPanel sticky via JavaScript
|
||||
======================================== */
|
||||
|
||||
/* Splitter - allow natural height, page scroll is enabled */
|
||||
.mg-grid-splitter {
|
||||
/* No max-height - allow page to scroll naturally */
|
||||
}
|
||||
|
||||
/* InfoPanel pane - allow overflow for transform to work */
|
||||
.mg-info-panel-pane {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
|
||||
<body class="dxbl-theme-fluent">
|
||||
<Routes @rendermode="InteractiveWebAssembly" />
|
||||
<script src="_content/AyCode.Blazor.Components/js/mgGridInfoPanel.js"></script>
|
||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<link href="_content/DevExpress.Blazor.Themes.Fluent/global.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
|
||||
<link href="_content/DevExpress.Blazor.Themes.Fluent/modes/light.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
|
||||
<link href="_content/DevExpress.Blazor.Themes.Fluent/accents/blue.min.css" data-theme-id="fluent-blueLight" rel="stylesheet" />
|
||||
<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
|
||||
<link href="_content/FruitBankHybrid.Shared/bootstrap/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="_content/FruitBankHybrid.Shared/app.css" rel="stylesheet" />
|
||||
<link href="app.css" rel="stylesheet" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue