AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init receiver UI web project using devexpress template

Browse Source
This commit is contained in:
tekh
2026-05-13 10:39:55 +02:00
parent 8d9480ed71
commit 48bbadc906
58 changed files with 1988 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/Drawer.razor Normal file
View File

@@ -0,0 +1,38 @@
@inherits DrawerStateComponentBase
<div class="drawer-container">
<DxDrawer PanelWidth="@PanelWidth"
CssClass="@(CssClass + " mobile")"
Mode="DrawerMode.Overlap"
IsOpen="@ToggledDrawer"
BodyTemplate="BodyTemplate"
HeaderTemplate="HeaderTemplate"
FooterTemplate="FooterTemplate"
ApplyBackgroundShading="false"
ClosedCssClass="panel-closed">
<TargetContent>
<DxDrawer PanelWidth="@PanelWidth"
CssClass="@CssClass"
Mode="DrawerMode.Shrink"
IsOpen="@(!ToggledDrawer)"
BodyTemplate="BodyTemplate"
HeaderTemplate="HeaderTemplate"
FooterTemplate="FooterTemplate"
OpenCssClass="panel-open">
<TargetContent>
<div class="navigation-drawer-shading"></div>
@TargetContent
</TargetContent>
</DxDrawer>
</TargetContent>
</DxDrawer>
</div>
@code {
[Parameter] public string? CssClass { get; set; }
[Parameter] public string? PanelWidth { get; set; }
[Parameter] public RenderFragment? TargetContent { get; set; }
[Parameter] public RenderFragment? BodyTemplate { get; set; }
[Parameter] public RenderFragment? HeaderTemplate { get; set; }
[Parameter] public RenderFragment? FooterTemplate { get; set; }
}

53
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/Drawer.razor.css Normal file
View File

@@ -0,0 +1,53 @@
.drawer-container {
height: 100%;
}
.navigation-drawer-shading {
height: 100%;
position: absolute;
transition: ease 300ms;
transition-property: opacity, visibility;
visibility: visible;
width: 100%;
z-index: 99;
background-color: var(--dxds-color-surface-backdrop-default-rest);
}
.navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
opacity: 0;
visibility: hidden;
}
::deep .navigation-drawer > .dxbl-drawer-panel {
display: flex;
}
::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
display: none;
}
.navigation-drawer-shading {
display: none;
}
::deep .panel-open:not(.mobile) .nav-buttons-container .menu-button {
display: none;
}
@media (max-width: 768px) {
::deep .navigation-drawer > .dxbl-drawer-panel {
display: none;
}
::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
display: flex;
}
.navigation-drawer-shading {
display: block;
}
::deep .panel-open:not(.mobile) .nav-buttons-container .menu-button {
display: flex;
}
}

53
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/MainLayout.razor Normal file
View File

@@ -0,0 +1,53 @@
@inherits DrawerStateLayoutComponentBase
@inject NavigationManager NavigationManager
<div class="page">
<Drawer CssClass="navigation-drawer" PanelWidth="240px">
<HeaderTemplate>
<div class="navigation-drawer-header">
<NavLink href="@AddDrawerStateToUrl("/")">
<img class="logo" src="images/logo.svg" alt="DevExpress logo" />
</NavLink>
<NavLink aria-label="Close menu" href="@AddDrawerStateToUrlToggled(LocalPath)">
<DxButton aria-label="Close menu" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="btn-icon-only" IconCssClass="@(ToggledDrawer ? "icon icon-close" : "icon icon-menu")"></DxButton>
</NavLink>
</div>
</HeaderTemplate>
<BodyTemplate>
<div class="w-100">
<NavMenu></NavMenu>
</div>
</BodyTemplate>
<FooterTemplate>
<div class="navigation-drawer-footer">
<NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
<DxButton Text="Docs" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" IconCssClass="icon icon-docs"></DxButton>
</NavLink>
<NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
<DxButton Text="Demos" RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="ButtonRenderStyleMode.Text" IconCssClass="icon icon-demos"></DxButton>
</NavLink>
</div>
</FooterTemplate>
<TargetContent>
<div class="drawer-content">
<div class="nav-buttons-container">
<NavLink aria-label="Open menu" href="@AddDrawerStateToUrlToggled(LocalPath)" class="menu-button">
<DxButton aria-label="Open menu" RenderStyle="ButtonRenderStyle.Secondary" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="btn-icon-only" IconCssClass="icon icon-menu"></DxButton>
</NavLink>
@if (LocalPath != "/") {
<NavLink href="@AddDrawerStateToUrl("/")" class="button-link">
<DxButton Text="Back to Home" RenderStyle="ButtonRenderStyle.Secondary" RenderStyleMode="ButtonRenderStyleMode.Text" CssClass="back-button" IconCssClass="icon icon-back"></DxButton>
</NavLink>
}
</div>
<div class="page-content-container">
@Body
</div>
</div>
</TargetContent>
</Drawer>
</div>
@code {
string LocalPath => new Uri(NavigationManager.Uri).LocalPath;
}

67
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/MainLayout.razor.css Normal file
View File

@@ -0,0 +1,67 @@
.page {
height: 100%;
min-height: 0;
}
::deep .navigation-drawer {
--dxbl-drawer-panel-body-padding-x: 0;
--dxbl-drawer-panel-body-padding-y: 1rem;
--dxbl-drawer-panel-footer-bg: none;
--dxbl-drawer-panel-header-bg: none;
--dxbl-drawer-separator-border-width: 0;
}
::deep .navigation-drawer > .dxbl-drawer-panel {
background-image: linear-gradient(180deg, var(--dxds-color-surface-primary-default-rest) 0%, var(--dxds-primary-170) 150%);
}
.navigation-drawer-header {
align-items: center;
display: flex;
justify-content: space-between;
padding: 1.375rem 0.375rem;
width: 100%;
}
.navigation-drawer-header .logo {
height: 1.5rem;
width: 9rem;
}
.navigation-drawer-footer {
display: flex;
justify-content: space-evenly;
padding-bottom: 0.875rem;
width: 100%;
}
.drawer-content {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
padding: 2rem 1.5rem 1.5rem 1.5rem;
}
.nav-buttons-container {
align-items: center;
display: flex;
gap: 0.625rem;
min-height: 2rem;
}
::deep .nav-buttons-container > a {
color: inherit;
}
::deep .nav-buttons-container .back-button {
padding-left: 0;
padding-right: 0.25rem;
}
.page-content-container {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
}

35
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/NavMenu.razor Normal file
View File

@@ -0,0 +1,35 @@
@inject NavigationManager NavigationManager
@implements IDisposable
<div>
<DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
<Items>
<DxMenuItem NavigateUrl="/" Text="Home" CssClass="@MenuItemCssClass("/")" IconCssClass="icon icon-home"></DxMenuItem>
<DxMenuItem NavigateUrl="/counter" Text="Counter" CssClass="@MenuItemCssClass("/counter")" IconCssClass="icon icon-counter"></DxMenuItem>
<DxMenuItem NavigateUrl="/weather" Text="Weather" CssClass="@MenuItemCssClass("/weather")" IconCssClass="icon icon-weather"></DxMenuItem>
<DxMenuItem NavigateUrl="/pdfviewer" Text="PDF Viewer" CssClass="@MenuItemCssClass("/pdfviewer")" IconCssClass="icon icon-pdf-viewer"></DxMenuItem>
</Items>
</DxMenu>
</div>
@code {
private string? currentLocalPath;
protected override void OnInitialized() {
currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
NavigationManager.LocationChanged += OnLocationChanged;
}
private void OnLocationChanged(object? sender, LocationChangedEventArgs e) {
currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
InvokeAsync(StateHasChanged);
}
private string? MenuItemCssClass(string itemPath) {
return string.Equals(currentLocalPath, itemPath, StringComparison.OrdinalIgnoreCase) ? "menu-item-active" : null;
}
public void Dispose() {
NavigationManager.LocationChanged -= OnLocationChanged;
}
}

23
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Layout/NavMenu.razor.css Normal file
View File

@@ -0,0 +1,23 @@
::deep .menu {
--dxbl-menu-bottom-left-border-radius: 0;
--dxbl-menu-bottom-right-border-radius: 0;
--dxbl-menu-top-left-border-radius: 0;
--dxbl-menu-top-right-border-radius: 0;
--dxbl-menu-item-padding-x: 1.125rem;
--dxbl-menu-item-padding-y: 0.5rem;
--dxbl-menu-item-color: var(--dxds-color-content-neutral-default-static-dark-rest);
--dxbl-menu-item-image-color: var(--dxds-color-content-neutral-default-static-dark-rest);
--dxbl-menu-item-hover-bg: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.15);
--dxbl-menu-item-hover-color: var(--dxds-color-content-neutral-default-static-dark-hovered);
--dxbl-menu-item-hover-image-color: var(--dxds-color-content-neutral-default-static-dark-hovered);
background: none;
}
::deep .menu.display-mobile {
margin-bottom: 2rem;
}
::deep .menu-item-active {
background-color: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.05);
}