-
Notifications
You must be signed in to change notification settings - Fork 25
New theme API update #19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
S0rax
wants to merge
20
commits into
DevExpress-Examples:24.2.3+
Choose a base branch
from
S0rax:theme-switcher-rework
base: 24.2.3+
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit
Hold shift + click to select a range
fe242c1
reworked to match the new theme api
S0rax 6be0c70
added updating cookie state
S0rax 325e0f5
added a new switcher example based off of new blazor templates
S0rax 14f7605
added missing files
S0rax bff3d4b
updated switcher to work
S0rax 552c161
merged changes to switcher proj
S0rax 1c3c0f0
added missing files
S0rax bdc95a4
small refactor
S0rax ee329e4
nav button render style update
S0rax 7e43ee7
pr feedback: refactored switcher .js files, reverted .sln changes and…
S0rax e64c2ee
switcher rework - WIP
S0rax 8437c16
added missing files
S0rax d956f95
working example
S0rax dab9e61
updated themeswitcher logic, decreased the complexity
S0rax 4debf8e
removed switchernew proj
S0rax 8a6a33a
pr feedback
S0rax 2c1a290
fixed scroll view
S0rax 83bd03f
removed bootstrap themes - simplification
S0rax 930f39c
added size mode switching
S0rax 97dd17c
moved size mode container
S0rax File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| @using Microsoft.AspNetCore.Mvc.ViewFeatures | ||
| @inject IHttpContextAccessor HttpContextAccessor | ||
| @inject IFileVersionProvider FileVersionProvider | ||
| @inject DxThemesService ThemesService | ||
|
|
||
| @{ | ||
| string? InitialThemeName = HttpContextAccessor.HttpContext?.Request.Cookies[DxThemesService.ThemeCookieKey]; | ||
| ThemesService.SetActiveThemeByName(InitialThemeName); | ||
| } | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en" data-bs-theme="@(ThemesService.IsBootstrapDarkActive ? "dark" : null)" data-fluent-darkmode="@(ThemesService.IsFluentDarkModeActive ? "" : null)"> | ||
| <head> | ||
| <meta charset="utf-8"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <base href="/"/> | ||
| @DxResourceManager.RegisterTheme(ThemesService.ActiveTheme) | ||
| @DxResourceManager.RegisterScripts() | ||
| <link href=@AppendVersion("css/site.css") rel="stylesheet"/> | ||
| <link href=@AppendVersion("switcher.styles.css") rel="stylesheet"/> | ||
| <link href="switcher-resources/css/theme-switcher.css" rel="stylesheet" /> | ||
| <link href="switcher-resources/css/themes.css" rel="stylesheet" /> | ||
| <script src="switcher-resources/js/page-helper.js"></script> | ||
| <HeadOutlet/> | ||
| </head> | ||
| <body class="@(ThemesService.IsFluentActive ? "dxbl-theme-fluent" : null)"> | ||
| <Routes></Routes> | ||
| <script src="_framework/blazor.web.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
|
|
||
| @code{ | ||
| private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| @inherits LayoutComponentBase | ||
| @inject NavigationManager NavigationManager | ||
|
|
||
| <div> | ||
| <DxDrawer PanelWidth="@Width" | ||
| CssClass="@(CssClass + " mobile")" | ||
| Mode="@DrawerMode.Overlap" | ||
| IsOpen="@ToggledSidebar" | ||
| HeaderTemplate="@DrawerHeader" | ||
| FooterTemplate="@DrawerFooter" | ||
| ApplyBackgroundShading="false" | ||
| ClosedCssClass="panel-closed"> | ||
| <BodyTemplate> | ||
| @DrawerBody | ||
| </BodyTemplate> | ||
| <TargetContent> | ||
| <DxDrawer PanelWidth="@Width" | ||
| CssClass="@CssClass" | ||
| Mode="@DrawerMode.Shrink" | ||
| IsOpen="@(!ToggledSidebar)" | ||
| HeaderTemplate="@DrawerHeader" | ||
| FooterTemplate="@DrawerFooter" | ||
| OpenCssClass="panel-open" > | ||
| <BodyTemplate> | ||
| @DrawerBody | ||
| </BodyTemplate> | ||
| <TargetContent> | ||
| <div class="navigation-drawer-shading" /> | ||
| @DrawerTarget | ||
| </TargetContent> | ||
| </DxDrawer> | ||
| </TargetContent> | ||
| </DxDrawer> | ||
| </div> | ||
|
|
||
| @code { | ||
| string Width => "240px"; | ||
| string CssClass => "navigation-drawer"; | ||
|
|
||
| [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)] | ||
| public bool ToggledSidebar { get; set; } | ||
| [Parameter] public RenderFragment? DrawerTarget { get; set; } | ||
| [Parameter] public RenderFragment? DrawerBody { get; set; } | ||
| [Parameter] public RenderFragment? DrawerHeader { get; set; } | ||
| [Parameter] public RenderFragment? DrawerFooter { get; set; } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| ::deep .navigation-drawer { | ||
| height: 100vh; | ||
| max-height: 100%; | ||
| } | ||
|
|
||
| ::deep .panel-open:not(.mobile) .menu-button { | ||
| display: none; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel { | ||
| background-image: linear-gradient(180deg, var(--bs-primary, var(--DS-primary-90)) 0%, var(--bs-black, #000) 150%); | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-content { | ||
| height: 100vh; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header { | ||
| border-bottom: none; | ||
| padding: 2rem 1rem; | ||
| background: none; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header > .navigation-drawer-header { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-body { | ||
| --dxbl-drawer-panel-body-padding-x: 0; | ||
| --dxbl-drawer-panel-body-padding-y: 1rem; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer { | ||
| --dxbl-drawer-panel-footer-justify-content: center; | ||
| border-top: none; | ||
| padding-bottom: 1.5rem; | ||
| width: 240px; | ||
| background: none; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel { | ||
| display: flex; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer.mobile > .dxbl-drawer-panel { | ||
| display: none; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading { | ||
| display: none; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| ::deep .panel-open:not(.mobile) .menu-button { | ||
| display: inline-flex; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-panel { | ||
| display: none; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer.mobile > .dxbl-drawer-panel { | ||
| display: flex; | ||
| } | ||
|
|
||
| ::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading { | ||
| background-color: var(--dxbl-drawer-content-shading-bg); | ||
| display: block; | ||
| height: 100%; | ||
| position: absolute; | ||
| transition: ease var(--dxbl-drawer-animation-duration); | ||
| transition-property: opacity, visibility; | ||
| visibility: visible; | ||
| width: 100%; | ||
| z-index: 99; | ||
| opacity: var(--dxbl-drawer-content-shading-opacity); | ||
| } | ||
|
|
||
| ::deep .navigation-drawer.mobile.panel-closed .navigation-drawer-shading { | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @inherits LayoutComponentBase | ||
| @inject NavigationManager NavigationManager | ||
| @inject DxThemesService ThemesService | ||
|
|
||
| <div class="page"> | ||
| <Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter"> | ||
| <DrawerBody> | ||
| <div class="w-100"> | ||
| <NavMenu></NavMenu> | ||
| </div> | ||
| </DrawerBody> | ||
| <DrawerTarget> | ||
| <div class="nav-buttons-container"> | ||
| <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)"> | ||
| <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button" IconCssClass="icon icon-menu"></DxButton> | ||
| </NavLink> | ||
| @if(new Uri(NavigationManager.Uri).LocalPath != "/"){ | ||
| <NavLink href="@UrlGenerator.GetUrl("/", ToggledSidebar)" class="button-link hidden"> | ||
| <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" Text="Back to Home" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="icon icon-back"></DxButton> | ||
| </NavLink> | ||
| } | ||
| </div> | ||
| <div class="p-4"> | ||
| <ThemeSwitcher /> | ||
| @Body | ||
| </div> | ||
| </DrawerTarget> | ||
| </Drawer> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)] | ||
| public bool ToggledSidebar { get; set; } | ||
|
|
||
| private RenderFragment drawerHeader => @<div class="navigation-drawer-header"> | ||
| <img class="logo" src="images/logo.svg" alt="DevExpress logo"/> | ||
| <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)"> | ||
| <DxButton RenderStyle="ButtonRenderStyle.Light" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav test-class" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton> | ||
| </NavLink> | ||
| </div>; | ||
|
|
||
| private RenderFragment drawerFooter => @<div> | ||
| <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link"> | ||
| <DxButton Text="Docs" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="@(ThemesService.IsFluentDarkModeActive ? ButtonRenderStyle.Dark : ButtonRenderStyle.Light)" IconCssClass="icon docs-icon"></DxButton> | ||
| </NavLink> | ||
| <NavLink href="https://demos.devexpress.com/blazor/" class="button-link"> | ||
| <DxButton Text="Demos" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="@(ThemesService.IsFluentDarkModeActive ? ButtonRenderStyle.Dark : ButtonRenderStyle.Light)" IconCssClass="icon demos-icon"></DxButton> | ||
| </NavLink> | ||
| </div>; | ||
|
|
||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.