From 292f9d1b56eb09d51c43c098e4efdd1a90ef578d Mon Sep 17 00:00:00 2001 From: dominikcrha Date: Sun, 19 Nov 2023 23:05:18 +0100 Subject: [PATCH 1/6] Toggler v2 WIP --- .../Navigation/HxSidebar.razor | 25 +++++----- .../Navigation/HxSidebar.razor.css | 46 +++++++++++++------ .../HxSidebar_Demo_TogglerTemplate.razor | 2 +- 3 files changed, 47 insertions(+), 26 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor index 8e3c51c49..820103cde 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor @@ -27,19 +27,22 @@ @ItemsTemplate -
- - @if (TogglerTemplate is null) - { -
+ GetResponsiveCssClass("d-??-block"))" role="button" @onclick="HandleCollapseToggleClick" + @onclick:stopPropagation="true"> - -
- } + @if (TogglerTemplate is null) + { + +
+
+
+
+ + } else { @TogglerTemplate(new() { SidebarCollapsed = this.Collapsed }) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css index 463d067dd..297f8ae77 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css @@ -62,25 +62,43 @@ transform: translate(-50%, -50%); } -.hx-sidebar-toggler-icon-wrapper { - opacity: 0; - width: 2em; - height: 2em; - border-radius: 50%; - border: var(--hx-sidebar-toggler-border); - align-items: center; - justify-content: center; - background-color: var(--hx-sidebar-toggler-background); - color: var(--hx-sidebar-toggler-color); +.hx-sidebar-toggler-inner { + display: block; + padding: .75rem; +} + +.hx-sidebar-toggler-arrow { + width: .25rem; + height: .75rem; + border-radius: .25rem; + /* border: var(--hx-sidebar-toggler-border); */ + background-color: var(--bs-secondary-bg); transition: all .25s ease-in-out; + transform: translateY(.15rem) rotate(0deg) translateZ(0px); +} + +.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow { + background-color: var(--bs-body-color); +} + +.hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow { + transform: translateY(-.15rem) rotate(0deg) translateZ(0px); +} + +.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow { + transform: translateY(.15rem) rotate(15deg) translateZ(0px); +} + +.hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow { + transform: translateY(-.15rem) rotate(-15deg) translateZ(0px); } -.hx-sidebar:hover .hx-sidebar-toggler-icon-wrapper { - opacity: .75; +.collapsed .hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow { + transform: translateY(.15rem) rotate(-15deg) translateZ(0px); } -.hx-sidebar .hx-sidebar-toggler-icon-wrapper:hover { - opacity: 1; +.collapsed .hx-sidebar-toggler:hover .hx-sidebar-toggler-arrow + .hx-sidebar-toggler-arrow { + transform: translateY(-.15rem) rotate(15deg) translateZ(0px); } .hx-sidebar-navbar-toggler:hover { diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor index 188d844c1..bbda35fde 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_TogglerTemplate.razor @@ -28,7 +28,7 @@ } else { - + CLOSE From 64aa2da905359ab52717c7ea445634668f80ec8e Mon Sep 17 00:00:00 2001 From: dominikcrha Date: Thu, 14 Dec 2023 15:21:55 +0100 Subject: [PATCH 2/6] Bigger contrast of toggler --- .../Navigation/HxSidebar.razor.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css index 297f8ae77..80f620c1e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css @@ -71,8 +71,7 @@ width: .25rem; height: .75rem; border-radius: .25rem; - /* border: var(--hx-sidebar-toggler-border); */ - background-color: var(--bs-secondary-bg); + background-color: var(--bs-gray-500); transition: all .25s ease-in-out; transform: translateY(.15rem) rotate(0deg) translateZ(0px); } From 9d18116ba3e187f05f57f09917b55f06909759d0 Mon Sep 17 00:00:00 2001 From: dominikcrha Date: Fri, 15 Dec 2023 15:02:50 +0100 Subject: [PATCH 3/6] CSS vars, docs, cleanup --- .../Navigation/HxSidebar.razor.cs | 12 +----------- .../Navigation/HxSidebar.razor.css | 2 +- .../wwwroot/defaults.css | 4 +--- .../HxSidebarDoc/HxSidebar_Documentation.razor | 10 ++-------- .../XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml | 12 +----------- 5 files changed, 6 insertions(+), 34 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs index 024857ffd..15b8fed2f 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs @@ -16,23 +16,13 @@ public partial class HxSidebar : ComponentBase /// [Parameter] public RenderFragment ItemsTemplate { get; set; } - /// - /// Icon for expanding the desktop version. Use for more specific customization. - /// - [Parameter] public IconBase ExpandIcon { get; set; } = BootstrapIcon.ChevronBarRight; - - /// - /// Icon for collapsing the desktop version. Use for more specific customization. - /// - [Parameter] public IconBase CollapseIcon { get; set; } = BootstrapIcon.ChevronBarLeft; - /// /// Sidebar footer (e.g. logged user, language switch, ...). /// [Parameter] public RenderFragment FooterTemplate { get; set; } /// - /// Vertical toggler (desktop version) to be rendered instead of the and icon. + /// Vertical toggler (desktop version) to be rendered instead of the default bar/arrow. /// [Parameter] public RenderFragment TogglerTemplate { get; set; } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css index 80f620c1e..d23709432 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.css @@ -71,7 +71,7 @@ width: .25rem; height: .75rem; border-radius: .25rem; - background-color: var(--bs-gray-500); + background-color: var(--hx-sidebar-toggler-background); transition: all .25s ease-in-out; transform: translateY(.15rem) rotate(0deg) translateZ(0px); } diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css index 9ac389556..70a5d4450 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css @@ -13,9 +13,7 @@ --hx-sidebar-background-color: transparent; --hx-sidebar-collapsed-width: 72px; --hx-sidebar-width: 250px; - --hx-sidebar-toggler-border: 1px solid var(--bs-border-color); - --hx-sidebar-toggler-background: var(--bs-body-bg); - --hx-sidebar-toggler-color: var(--bs-body-color); + --hx-sidebar-toggler-background: var(--bs-gray-500); --hx-sidebar-item-font-size: 1rem; --hx-sidebar-item-padding: .75rem; --hx-sidebar-item-color: var(--bs-body-color); diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor index a7f3a4c29..e426e5884 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor @@ -49,14 +49,8 @@ Width of the sidebar. - - Toggler border. - - - Toggler background. - - - Toggler color. + + Toggler bar/arrow background. Font size of the items. diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 52d24e054..405e67cae 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -7976,16 +7976,6 @@ Sidebar items. Use . - - - Icon for expanding the desktop version. Use for more specific customization. - - - - - Icon for collapsing the desktop version. Use for more specific customization. - - Sidebar footer (e.g. logged user, language switch, ...). @@ -7993,7 +7983,7 @@ - Vertical toggler (desktop version) to be rendered instead of the and icon. + Vertical toggler (desktop version) to be rendered instead of the and icon. From c023d829f42a02cbbcefa75c996d8c58def8cada Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Fri, 15 Dec 2023 15:42:32 +0100 Subject: [PATCH 4/6] HxSidebar Toggler localization --- ...vit.Blazor.Components.Web.Bootstrap.csproj | 6 + .../Navigation/HxSidebar.razor | 101 +++++++------- .../Navigation/HxSidebar.razor.cs | 6 +- .../Resources/HxSidebar.cs.resx | 126 ++++++++++++++++++ .../Resources/HxSidebar.it-IT.resx | 126 ++++++++++++++++++ .../Resources/HxSidebar.resx | 126 ++++++++++++++++++ .../Resources/HxSidebar.zh-CN.resx | 126 ++++++++++++++++++ 7 files changed, 566 insertions(+), 51 deletions(-) create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.it-IT.resx create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.resx create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.zh-CN.resx diff --git a/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj b/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj index 30c8cac92..a9da23eee 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj +++ b/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj @@ -45,6 +45,12 @@ + + + + + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor index 820103cde..96a162899 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor @@ -1,61 +1,62 @@ @namespace Havit.Blazor.Components.Web.Bootstrap
-
+
- @if (HeaderTemplate is not null) - { -
- - @HeaderTemplate - -
- } + @if (HeaderTemplate is not null) + { +
+ + @HeaderTemplate + +
+ } -
-
- - - @ItemsTemplate - - -
+
+
+ + + @ItemsTemplate + + +
@if (TogglerTemplate is null) { - -
-
-
-
- + +
+
+
+
+ } - else - { - @TogglerTemplate(new() { SidebarCollapsed = this.Collapsed }) - } -
-
+ else + { + @TogglerTemplate(new() { SidebarCollapsed = this.Collapsed }) + } +
+
- @if (FooterTemplate is not null) - { -
- @FooterTemplate(new() { SidebarCollapsed = this.Collapsed }) -
- } -
-
+ @if (FooterTemplate is not null) + { +
+ @FooterTemplate(new() { SidebarCollapsed = this.Collapsed }) +
+ } +
+
\ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs index 15b8fed2f..f814f0fe8 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs @@ -1,4 +1,6 @@ -namespace Havit.Blazor.Components.Web.Bootstrap; +using Microsoft.Extensions.Localization; + +namespace Havit.Blazor.Components.Web.Bootstrap; /// /// Sidebar component - responsive navigation sidebar.
@@ -63,6 +65,8 @@ public partial class HxSidebar : ComponentBase /// [Parameter] public SidebarResponsiveBreakpoint ResponsiveBreakpoint { get; set; } = SidebarResponsiveBreakpoint.Medium; + [Inject] protected IStringLocalizer Localizer { get; set; } + protected internal string NavContentElementId => Id + "-nav-content"; /// diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx new file mode 100644 index 000000000..e71177de5 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.cs.resx @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + Sbalit + + + Rozbalit + + \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.it-IT.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.it-IT.resx new file mode 100644 index 000000000..70ccb698f --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.it-IT.resx @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + Comprimi + + + Espandi + + \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.resx new file mode 100644 index 000000000..f26ae0eb6 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.resx @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + Collapse + + + Expand + + \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.zh-CN.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.zh-CN.resx new file mode 100644 index 000000000..08937f340 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxSidebar.zh-CN.resx @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + 折叠 + + + 展开 + + \ No newline at end of file From 633f3bb95443426b27f36c160536de662a88b9bc Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Fri, 15 Dec 2023 15:49:50 +0100 Subject: [PATCH 5/6] HxSidebar - revert ExpandIcon & CollapseIcon removal (in favor of [Obsolete] for now) --- .../Navigation/HxSidebar.razor.cs | 12 ++++++++++++ .../HxSidebarDoc/HxSidebar_Documentation.razor | 5 ++++- .../XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml | 12 +++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs index f814f0fe8..c8ed8d70e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/HxSidebar.razor.cs @@ -18,6 +18,18 @@ public partial class HxSidebar : ComponentBase /// [Parameter] public RenderFragment ItemsTemplate { get; set; } + /// + /// ExpandIcon is obsolete and will be removed in future release. Use if you want to render an icon. + /// + [Obsolete("ExpandIcon is obsolete and will be removed in future release. Use TogglerTemplate if you want to render an icon.")] + [Parameter] public IconBase ExpandIcon { get; set; } + + /// + /// CollapseIcon is obsolete and will be removed in future release. Use if you want to render an icon. + /// + [Obsolete("CollapseIcon is obsolete and will be removed in future release. Use TogglerTemplate if you want to render an icon.")] + [Parameter] public IconBase CollapseIcon { get; set; } + /// /// Sidebar footer (e.g. logged user, language switch, ...). /// diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor index e426e5884..5f1301a1c 100644 --- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor +++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor @@ -24,7 +24,10 @@ -

With TogglerTemplate you can set a custom toggler for the desktop version to be rendered instead of the default ExpandIcon and CollapseIcon. Render varying content based on the SidebarTogglerTemplateContext.

+

+ With TogglerTemplate you can set a custom toggler for the desktop version to be rendered instead of the default visual. + Render varying content based on the SidebarTogglerTemplateContext. +

diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 405e67cae..2829a2ba5 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -7976,6 +7976,16 @@ Sidebar items. Use . + + + ExpandIcon is obsolete and will be removed in future release. Use if you want to render an icon. + + + + + CollapseIcon is obsolete and will be removed in future release. Use if you want to render an icon. + + Sidebar footer (e.g. logged user, language switch, ...). @@ -7983,7 +7993,7 @@ - Vertical toggler (desktop version) to be rendered instead of the and icon. + Vertical toggler (desktop version) to be rendered instead of the default bar/arrow. From 152dcb1151ae4a68437d9603c67737266713c6b9 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Fri, 15 Dec 2023 15:51:02 +0100 Subject: [PATCH 6/6] HxSidebar - .csproj cleanup --- .../Havit.Blazor.Components.Web.Bootstrap.csproj | 5 ----- 1 file changed, 5 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj b/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj index a9da23eee..5a923a7da 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj +++ b/Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj @@ -45,11 +45,6 @@ - - - - -