Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Drawer, DrwerContainer, DrawerHeader - rework

Browse Source
This commit is contained in:
stm 2023-01-09 14:51:00 +01:00
parent d042b55ac6
commit 63a84810f5
10 changed files with 601 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Connected.Components/.config/dotnet-tools.json
View File

@ -3,7 +3,7 @@
"isRoot": true,
"tools": {
"excubo.webcompiler": {
"version": "3.5.0",
"version": "3.5.10",
"commands": [
"webcompiler"
]

18
src/Connected.Components/Components/Drawer/Drawer.razor
View File

@ -1,11 +1,25 @@
@namespace Connected.Components
@inherits UIComponent
<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
<p>@_screenBreakpoint.ToString()</p>
@if (_screenBreakpoint.ToString().ToLower() != "xs")
{
<p>Drawer</p>
<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
<div @ref="_contentRef" class="drawer-content">
<CascadingValue Value="this" IsFixed="true">
@ChildContent
</CascadingValue>
</div>
</aside>
<Overlay Visible="@OverlayVisible" OnClick="@CloseDrawer" Class="@OverlayClass" DarkBackground="true" LockScroll=false />
<Overlay Visible="@OverlayVisible" OnClick="@CloseDrawer" Class="@CompiledOverlayClass.Build()" DarkBackground="true" LockScroll=false />
} else {
<p>Tabs</p>
<Tabs>
<CascadingValue Value="this" IsFixed="true">
@ChildContent
</CascadingValue>
</Tabs>
}

623
src/Connected.Components/Components/Drawer/Drawer.razor.cs
View File

@ -3,6 +3,7 @@ using Connected.Extensions;
using Connected.Services;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using System.ComponentModel;
namespace Connected.Components;
@ -12,309 +13,21 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
private ElementReference _contentRef;
private DrawerClipMode _clipMode;
private bool? _isOpenWhenLarge = null;
private bool _open, _rtl, _isRendered, _initial = true, _keepInitialState, _fixed = true;
private Breakpoint _breakpoint = Breakpoint.Md, _screenBreakpoint = Breakpoint.None;
private bool _open;
private bool _rtl;
private bool _isRendered;
private bool _initial = true;
private bool _keepInitialState;
private bool _fixed = true;
private Breakpoint _breakpoint = Breakpoint.Md;
private Breakpoint _screenBreakpoint = Breakpoint.None;
private Guid _breakpointListenerSubscriptionId;
private bool OverlayVisible => _open && !DisableOverlay &&
(Variant == DrawerVariant.Temporary ||
(_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Mini) ||
(_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Responsive));
#region EventCallbacks
protected string Classname =>
new CssBuilder("drawer")
.AddClass($"drawer-fixed", Fixed)
.AddClass($"drawer-pos-{GetPosition()}")
.AddClass($"drawer--open", Open)
.AddClass($"drawer--closed", !Open)
.AddClass($"drawer--initial", _initial)
.AddClass($"drawer-{Breakpoint.ToDescription()}")
.AddClass($"drawer-clipped-{_clipMode.ToDescription()}")
.AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
.AddClass($"elevation-{Elevation}")
.AddClass($"drawer-{Variant.ToDescription()}")
.AddClass(AdditionalClassList)
.Build();
protected string OverlayClass =>
new CssBuilder("drawer-overlay mud-overlay-drawer")
.AddClass($"drawer-pos-{GetPosition()}")
.AddClass($"drawer-overlay--open", Open)
.AddClass($"drawer-overlay-{Variant.ToDescription()}")
.AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
.AddClass($"drawer-overlay--initial", _initial)
.Build();
protected string Stylename =>
new StyleBuilder()
//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
.AddStyle("--mud-drawer-content-height",
string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,
Anchor == Anchor.Bottom || Anchor == Anchor.Top)
.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
.Build();
[Inject] public IBreakpointService Breakpointistener { get; set; }
[CascadingParameter] DrawerContainer DrawerContainer { get; set; }
[CascadingParameter(Name = "RightToLeft")]
bool RightToLeft
{
get => _rtl;
set
{
if (_rtl != value)
{
_rtl = value;
DrawerContainer?.FireDrawersChanged();
}
}
}
/// <summary>
/// If true, drawer position will be fixed. (CSS position: fixed;)
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool Fixed
{
get => _fixed && DrawerContainer is Layout;
set
{
if (_fixed == value)
return;
_fixed = value;
}
}
/// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public int Elevation { set; get; } = 1;
/// <summary>
/// Side from which the drawer will appear.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public Anchor Anchor { get; set; } = Anchor.Start;
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// Variant of the drawer. It specifies how the drawer will be displayed.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public DrawerVariant Variant { get; set; } = DrawerVariant.Responsive;
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// Show overlay for responsive and temporary drawers.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool DisableOverlay { get; set; } = false;
/// <summary>
/// Preserve open state for responsive drawer when window resized above <see cref="Breakpoint" />.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool PreserveOpenState { get; set; } = false;
/// <summary>
/// Open drawer automatically on mouse enter when <see cref="Variant" /> parameter is set to <see cref="DrawerVariant.Mini" />.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool OpenMiniOnHover { get; set; }
/// <summary>
/// Switching point for responsive drawers
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public Breakpoint Breakpoint
{
get => _breakpoint;
set
{
if (value == _breakpoint)
return;
_breakpoint = value;
if (_isRendered)
{
UpdateBreakpointState(_screenBreakpoint);
}
DrawerContainer?.FireDrawersChanged();
}
}
/// <summary>
/// Sets the opened state on the drawer. Can be used with two-way binding to close itself on navigation.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool Open
{
get => _open;
set
{
if (_open == value)
{
return;
}
_open = value;
if (_isRendered && _initial && !_keepInitialState)
{
_initial = false;
}
if (_keepInitialState)
{
_keepInitialState = false;
}
if (_isRendered && value && (Anchor == Anchor.Top || Anchor == Anchor.Bottom))
{
_ = UpdateHeight();
}
DrawerContainer?.FireDrawersChanged();
OpenChanged.InvokeAsync(_open);
}
}
[Parameter] public EventCallback<bool> OpenChanged { get; set; }
/// <summary>
/// Width of left/right drawer. Only for non-fixed drawers.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public string Width { get; set; }
/// <summary>
/// Width of left/right drawer. Only for non-fixed drawers.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public string MiniWidth { get; set; }
/// <summary>
/// Height of top/bottom temporary drawer
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public string Height { get; set; }
/// <summary>
/// Specify how the drawer should behave inside a MudLayout. It affects the position relative to <b>MudAppbar</b>
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public DrawerClipMode ClipMode
{
get => _clipMode;
set
{
if (_clipMode == value)
{
return;
}
_clipMode = value;
if (Fixed)
{
DrawerContainer?.FireDrawersChanged();
}
StateHasChanged();
}
}
protected override void OnInitialized()
{
if (Variant != DrawerVariant.Temporary)
{
DrawerContainer?.Add(this);
}
base.OnInitialized();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await UpdateHeight();
var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
var currentBreakpoint = result.Breakpoint;
_breakpointListenerSubscriptionId = result.SubscriptionId;
_screenBreakpoint = result.Breakpoint;
if (_screenBreakpoint < Breakpoint && _open)
{
_keepInitialState = true;
await OpenChanged.InvokeAsync(false);
}
_isRendered = true;
if (string.IsNullOrWhiteSpace(Height) && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
{
StateHasChanged();
}
}
await base.OnAfterRenderAsync(firstRender);
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
int _disposeCount;
public virtual void Dispose(bool disposing)
{
if (Interlocked.Increment(ref _disposeCount) == 1)
{
if (disposing)
{
DrawerContainer?.Remove(this);
if (_breakpointListenerSubscriptionId != default)
{
Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
}
}
}
}
private void CloseDrawer()
{
if (Open)
{
OpenChanged.InvokeAsync(false);
}
}
public async Task OnNavigation()
{
if (Variant == DrawerVariant.Temporary ||
@ -332,11 +45,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
InvokeAsync(() => UpdateBreakpointState(breakpoint));
}
private async Task UpdateHeight()
{
_height = (await _contentRef.MudGetBoundingClientRectAsync())?.Height ?? 0;
}
private async void UpdateBreakpointState(Breakpoint breakpoint)
{
var isStateChanged = false;
@ -367,7 +75,12 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
}
}
if (_breakpoint != _screenBreakpoint)
{
isStateChanged = true;
}
_screenBreakpoint = breakpoint;
if (isStateChanged)
{
StateHasChanged();
@ -408,4 +121,310 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
await OpenChanged.InvokeAsync(false);
}
}
protected override void OnInitialized()
{
if (Variant != DrawerVariant.Temporary)
{
DrawerContainer?.Add(this);
}
base.OnInitialized();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//await UpdateHeight();
var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
//var currentBreakpoint = result.Breakpoint;
_breakpointListenerSubscriptionId = result.SubscriptionId;
var refresh = false;
if (_screenBreakpoint != result.Breakpoint) refresh = true;
_screenBreakpoint = result.Breakpoint;
if (_screenBreakpoint < Breakpoint && _open)
{
_keepInitialState = true;
await OpenChanged.InvokeAsync(false);
}
_isRendered = true;
if (Anchor == Anchor.Bottom || Anchor == Anchor.Top || _screenBreakpoint == Breakpoint.None)
{
refresh = true;
}
if (refresh) StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
int _disposeCount;
public virtual void Dispose(bool disposing)
{
if (Interlocked.Increment(ref _disposeCount) == 1)
{
if (disposing)
{
DrawerContainer?.Remove(this);
if (_breakpointListenerSubscriptionId != default)
{
Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
}
}
}
}
#endregion
#region Content placeholders
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
public RenderFragment ChildContent { get; set; }
[CascadingParameter] DrawerContainer DrawerContainer { get; set; }
[Inject] public IBreakpointService Breakpointistener { get; set; }
[CascadingParameter(Name = "RightToLeft")]
bool RightToLeft
{
get => _rtl;
set
{
if (_rtl != value)
{
_rtl = value;
DrawerContainer?.FireDrawersChanged();
}
}
}
#endregion
#region Styling properties
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("drawer")
.AddClass($"drawer-fixed", Fixed)
.AddClass($"drawer-pos-{GetPosition()}")
.AddClass($"drawer--open", Open)
.AddClass($"drawer--closed", !Open)
.AddClass($"drawer--initial", _initial)
.AddClass($"drawer-{Breakpoint.ToDescription()}")
.AddClass($"drawer-clipped-{_clipMode.ToDescription()}")
//.AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
.AddClass($"elevation-{Elevation}")
.AddClass($"drawer-{Variant.ToDescription()}")
.AddClass(ClassList);
}
}
protected StyleBuilder CompiledStyleList
{
get
{
return new StyleBuilder()
.AddStyle(StyleList);
//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
}
}
protected CssBuilder CompiledOverlayClass
{
get
{
return new CssBuilder("drawer-overlay mud-overlay-drawer")
.AddClass($"drawer-pos-{GetPosition()}")
.AddClass($"drawer-overlay--open", Open)
.AddClass($"drawer-overlay-{Variant.ToDescription()}")
.AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
.AddClass($"drawer-overlay--initial", _initial);
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? StyleList { get; set; }
/// <summary>
/// If true, drawer position will be fixed. (CSS position: fixed;)
/// </summary>
[Parameter]
public bool Fixed
{
get => _fixed && DrawerContainer is Layout;
set
{
if (_fixed == value)
return;
_fixed = value;
}
}
/// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
/// </summary>
[Parameter]
public int Elevation { set; get; } = 1;
/// <summary>
/// Side from which the drawer will appear.
/// </summary>
[Parameter]
public Anchor Anchor { get; set; } = Anchor.Start;
/*
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
public ThemeColor Color { get; set; } = ThemeColor.Default;
*/
/// <summary>
/// Variant of the drawer. It specifies how the drawer will be displayed.
/// </summary>
[Parameter]
public DrawerVariant Variant { get; set; } = DrawerVariant.Responsive;
/// <summary>
/// Show overlay for responsive and temporary drawers.
/// </summary>
[Parameter]
public bool DisableOverlay { get; set; } = false;
/// <summary>
/// Preserve open state for responsive drawer when window resized above <see cref="Breakpoint" />.
/// </summary>
[Parameter]
public bool PreserveOpenState { get; set; } = false;
/// <summary>
/// Open drawer automatically on mouse enter when <see cref="Variant" /> parameter is set to <see cref="DrawerVariant.Mini" />.
/// </summary>
[Parameter]
public bool OpenMiniOnHover { get; set; }
/// <summary>
/// Specify how the drawer should behave inside a MudLayout. It affects the position relative to <b>MudAppbar</b>
/// </summary>
[Parameter]
public DrawerClipMode ClipMode
{
get => _clipMode;
set
{
if (_clipMode == value)
{
return;
}
_clipMode = value;
if (Fixed)
{
DrawerContainer?.FireDrawersChanged();
}
StateHasChanged();
}
}
private bool OverlayVisible => _open && !DisableOverlay &&
(Variant == DrawerVariant.Temporary ||
(_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Mini) ||
(_screenBreakpoint < Breakpoint && Variant == DrawerVariant.Responsive));
/// <summary>
/// Switching point for responsive drawers
/// </summary>
[Parameter]
public Breakpoint Breakpoint
{
get => _breakpoint;
set
{
if (value == _breakpoint)
return;
_breakpoint = value;
if (_isRendered)
{
UpdateBreakpointState(_screenBreakpoint);
}
DrawerContainer?.FireDrawersChanged();
}
}
/// <summary>
/// Sets the opened state on the drawer. Can be used with two-way binding to close itself on navigation.
/// </summary>
[Parameter]
public bool Open
{
get => _open;
set
{
if (_open == value)
{
return;
}
_open = value;
if (_isRendered && _initial && !_keepInitialState)
{
_initial = false;
}
if (_keepInitialState)
{
_keepInitialState = false;
}
/*if (_isRendered && value && (Anchor == Anchor.Top || Anchor == Anchor.Bottom))
{
_ = UpdateHeight();
}*/
DrawerContainer?.FireDrawersChanged();
OpenChanged.InvokeAsync(_open);
}
}
private void CloseDrawer()
{
if (Open)
{
OpenChanged.InvokeAsync(false);
}
}
#endregion
}

2
src/Connected.Components/Components/Drawer/DrawerContainer.razor
View File

@ -1,7 +1,7 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" style="@Stylename" class="@Classname">
<div @attributes="CustomAttributes" style="@CompiledStyleList.Build()" class="@CompiledClassList.Build()">
<CascadingValue Value="this" IsFixed="true">
@ChildContent
</CascadingValue>

128
src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs
View File

@ -10,44 +10,19 @@ public partial class DrawerContainer : UIComponent
protected bool Fixed { get; set; } = false;
private List<Drawer> _drawers = new();
protected virtual string Classname =>
new CssBuilder()
.AddClass(GetDrawerClass(FindLeftDrawer()))
.AddClass(GetDrawerClass(FindRightDrawer()))
.AddClass(AdditionalClassList)
.Build();
#region Event callbacks
protected string Stylename =>
new StyleBuilder()
.AddStyle("--mud-drawer-width-left", GetDrawerWidth(FindLeftDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindLeftDrawer())))
.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
.Build();
internal void FireDrawersChanged() => StateHasChanged();
#endregion
#region Content placeholders
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public RenderFragment ChildContent { get; set; }
internal void FireDrawersChanged() => StateHasChanged();
internal void Add(Drawer drawer)
{
if (Fixed && !drawer.Fixed)
return;
_drawers.Add(drawer);
StateHasChanged();
}
internal void Remove(Drawer drawer)
{
_drawers.Remove(drawer);
StateHasChanged();
}
private string GetDrawerClass(Drawer drawer)
{
if (drawer == null)
@ -65,22 +40,6 @@ public partial class DrawerContainer : UIComponent
return className;
}
private string GetDrawerWidth(Drawer drawer)
{
if (drawer == null)
return string.Empty;
return drawer.Width;
}
private string GetMiniDrawerWidth(Drawer drawer)
{
if (drawer == null)
return string.Empty;
return drawer.MiniWidth;
}
private Drawer FindLeftDrawer()
{
var anchor = RightToLeft ? Anchor.End : Anchor.Start;
@ -104,4 +63,79 @@ public partial class DrawerContainer : UIComponent
var anchor = RightToLeft ? Anchor.Start : Anchor.End;
return _drawers.FirstOrDefault(d => d.Variant == DrawerVariant.Mini && (d.Anchor == anchor || d.Anchor == Anchor.Right));
}
#endregion
#region Styling properties
protected virtual CssBuilder CompiledClassList
{
get
{
return new CssBuilder()
.AddClass(ClassList);
}
}
/*
protected virtual string Classname =>
new CssBuilder()
/*.AddClass(GetDrawerClass(FindLeftDrawer()))
.AddClass(GetDrawerClass(FindRightDrawer()))
.AddClass(ClassList)
.Build();
protected string Stylename =>
new StyleBuilder()
.AddStyle(StyleList)
.AddStyle("--mud-drawer-width-left", GetDrawerWidth(FindLeftDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindLeftDrawer())))
.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
.Build();*/
protected StyleBuilder CompiledStyleList
{
get
{
return new StyleBuilder()
.AddStyle(StyleList);
//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? StyleList { get; set; }
#endregion
internal void Add(Drawer drawer)
{
if (Fixed && !drawer.Fixed)
return;
_drawers.Add(drawer);
StateHasChanged();
}
internal void Remove(Drawer drawer)
{
_drawers.Remove(drawer);
StateHasChanged();
}
}

4
src/Connected.Components/Components/Drawer/DrawerHeader.razor
View File

@ -3,13 +3,13 @@
@if (LinkToIndex)
{
<a @attributes="CustomAttributes" class="@Classname" href="/">
<a @attributes="CustomAttributes" class="@CompiledClassList.Build()" href="/">
@ChildContent
</a>
}
else
{
<div @attributes="CustomAttributes" class="@Classname">
<div @attributes="CustomAttributes" class="@CompiledClassList.Build()">
@ChildContent
</div>
}

44
src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs
View File

@ -1,34 +1,58 @@
using Connected.Annotations;
using Connected.Utilities;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class DrawerHeader : UIComponent
{
protected string Classname =>
new CssBuilder("drawer-header")
.AddClass($"drawer-header-dense", Dense)
.AddClass(AdditionalClassList)
.Build();
#region Event callbacks
#endregion
#region Content placeholders
/// <summary>
/// If true, compact padding will be used, same as the Appbar.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Appearance)]
public bool Dense { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// If true, the component will link to index page with an a element instead of div.
/// </summary>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool LinkToIndex { get; set; }
#endregion
#region Styling properties
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? StyleList { get; set; }
#endregion
protected virtual CssBuilder CompiledClassList
{
get
{
return new CssBuilder("drawer-header")
.AddClass($"drawer-header-dense", Dense)
.AddClass(ClassList);
}
}
}

2
src/Connected.Components/Components/Layout/Layout.razor
View File

@ -1,7 +1,7 @@
@namespace Connected.Components
@inherits DrawerContainer
<div @attributes="CustomAttributes" class="@Classname" style="@Stylename">
<div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
<CascadingValue IsFixed="true" Value="@this">
@ChildContent
</CascadingValue>

28
src/Connected.Components/Components/Layout/Layout.razor.cs
View File

@ -1,13 +1,33 @@
using Connected.Utilities;
using System.Net;
namespace Connected.Components;
public partial class Layout : DrawerContainer
{
protected override string Classname =>
new CssBuilder("layout")
.AddClass(base.Classname)
.Build();
protected virtual CssBuilder CompiledClassList
{
get
{
return new CssBuilder("layout")
.AddClass(base.ClassList);
}
}
protected StyleBuilder CompiledStyleList
{
get
{
return new StyleBuilder()
.AddStyle(base.StyleList);
//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
}
}
public Layout()
{

119
src/Connected.Components/Navigation.cs Normal file
View File

@ -0,0 +1,119 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Connected;
internal class Navigation
{
private const int MaxPagesOnList = 256;
private readonly NavigationManager _navigationManager;
[Inject]
private IJSRuntime JS { get; set; }
private List<string> _backPages;
private List<string> _forwardPages;
public Navigation(NavigationManager navigationManager)
{
_navigationManager = navigationManager;
_backPages = new List<string>();
_forwardPages = new List<string>();
}
/// <summary>
/// Navigates to the specified url.
/// </summary>
/// <param name="url">The destination url (relative or absolute).</param>
public async Task NavigateTo(string url, Target target=Target._self)
{
if (!target.Equals("_self"))
{
if (!url.Equals(_navigationManager.Uri))
_backPages.Add(_navigationManager.Uri);
_navigationManager.NavigateTo(url);
} else
{
if (JS is not null)
await JS.InvokeVoidAsync("open", url, target.ToString());
}
}
/// <summary>
/// Returns true if it is possible to navigate to the previous url.
/// </summary>
private bool CanNavigateBack()
{
return (_backPages.Count > 1);
}
private bool CanNavigateForward()
{
return (_forwardPages.Count > 1);
}
private void UpdateBackPageList()
{
string url = _navigationManager.Uri;
_backPages.Add(url);
if (_backPages.Count() > MaxPagesOnList)
{
_backPages.RemoveAt(0);
}
}
private string GetFromBackPageList()
{
string result = _backPages.Last();
_backPages.RemoveAt(_backPages.Count()-1);
return result;
}
private string GetFromForwardPageList()
{
string result = _forwardPages.Last();
_forwardPages.RemoveAt(_forwardPages.Count() - 1);
return result;
}
private void UpdateForwardPageList()
{
string url = _navigationManager.Uri;
_forwardPages.Add(url);
if (_forwardPages.Count() > MaxPagesOnList)
{
_forwardPages.RemoveAt(0);
}
}
/// <summary>
/// Navigates to the previous url if possible or does nothing if it is not.
/// </summary>
public void Back()
{
if (!CanNavigateBack()) return;
var backPageUrl = GetFromBackPageList();
UpdateForwardPageList();
NavigateTo(backPageUrl);
}
/// <summary>
/// Navigates to the forward url if possible or does nothing if it is not.
/// </summary>
public void Forward()
{
if (!CanNavigateForward()) return;
var forwardPageUrl = GetFromForwardPageList();
UpdateBackPageList();
NavigateTo(forwardPageUrl);
}
}
enum Target
{
_self,
_blank,
_parent,
_top
}