Diplomarbeit-Absolventenverein/oqtane.framework
6
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

Fixes to vertical menu logic. Now supports multiple levels of menu items. Added FontIcon component to reduce duplicate code.

Browse Source
This commit is contained in:
Jayson Furr
2021-01-23 21:14:44 -06:00
parent 6fdbbeb8ce
commit 5a02ce6124
6 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Themes/Controls/FontIcon.razor Normal file
View File

@ -0,0 +1,4 @@
@if (!string.IsNullOrWhiteSpace(Value))
{
<span class="@Value" aria-hidden="true"></span>
}

10
Oqtane.Client/Themes/Controls/FontIcon.razor.cs Normal file
View File

@ -0,0 +1,10 @@
using Microsoft.AspNetCore.Components;
namespace Oqtane.Themes.Controls
{
public partial class FontIcon : ComponentBase
{
[Parameter()]
public string Value { get; set; }
}
}

20
Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
View File

@ -10,12 +10,14 @@
if (childPage.PageId == PageState.Page.PageId)
{
<a class="dropdown-item active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
@childPage.Name<span class="sr-only">(current)</span>
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
}
else
{
<a class="dropdown-item" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
}
@ -33,11 +35,8 @@ else
{
<li class="nav-item active">
<a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
@if (childPage.Icon != string.Empty)
{
<span class="@childPage.Icon" aria-hidden="true"></span>
}
@childPage.Name<span class="sr-only">(current)</span>
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
</li>
}
@ -45,10 +44,7 @@ else
{
<li class="nav-item">
<a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
@if (childPage.Icon != string.Empty)
{
<span class="@childPage.Icon" aria-hidden="true"></span>
}
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
</li>
@ -60,7 +56,8 @@ else
{
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@childPage.Name<span class="sr-only">(current)</span>
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
<MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
</li>
@ -69,6 +66,7 @@ else
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
<MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />

62
Oqtane.Client/Themes/Controls/MenuItemsVertical.razor Normal file
View File

@ -0,0 +1,62 @@
@namespace Oqtane.Themes.Controls
@inherits MenuItemsBase
@if (ParentPage != null)
{
foreach (var childPage in GetChildPages())
{
if (childPage.PageId == PageState.Page.PageId)
{
<li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
<a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
</li>
}
else
{
<li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
<a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
</li>
}
if (Pages.Any(e => e.ParentId == childPage.PageId))
{
<MenuItemsVertical ParentPage="childPage" Pages="Pages" />
}
}
}
else
{
<ul class="nav flex-column">
@foreach (var childPage in GetChildPages())
{
if (childPage.PageId == PageState.Page.PageId)
{
<li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
<a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
</li>
}
else
{
<li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
<a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
</li>
}
if (Pages.Any(e => e.ParentId == childPage.PageId))
{
<MenuItemsVertical ParentPage="childPage" Pages="Pages" />
}
}
</ul>
}

6
Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs Normal file
View File

@ -0,0 +1,6 @@
namespace Oqtane.Themes.Controls
{
public partial class MenuItemsVertical : MenuItemsBase
{
}
}

20
Oqtane.Client/Themes/Controls/MenuVertical.razor
View File

@ -10,25 +10,7 @@
</span>
<div class="app-menu">
<div class="collapse navbar-collapse" id="Menu">
<ul class="nav flex-column">
@foreach (var p in MenuPages)
{
<li class="nav-item px-3">
<a href="@GetUrl(p)" class="nav-link" style="padding-left:@((p.Level + 1) * 15)px !important;" target="@GetTarget(p)">
@if (p.HasChildren)
{
<i class="oi oi-chevron-right"></i>
}
@if (p.Icon != string.Empty)
{
<span class="@p.Icon" aria-hidden="true"></span>
}
@p.Name
</a>
</li>
}
</ul>
<MenuItemsVertical ParentPage="null" Pages="MenuPages" />
</div>
</div>
}