kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1074 from Jayson-Furr/dev

Browse Source 
Fixes to horizontal menu logic. Now supports two levels of menu items.
This commit is contained in:
Shaun Walker 2021-01-28 09:02:49 -05:00 committed by GitHub
commit 9ba2328a04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 196 additions and 48 deletions
Show Stats 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; }
}
}

31
Oqtane.Client/Themes/Controls/MenuHorizontal.razor
View File

@ -1,4 +1,5 @@
@namespace Oqtane.Themes.Controls
@inherits MenuBase
@if (MenuPages.Any())
@ -10,35 +11,7 @@
</span>
<div class="app-menu">
<div class="collapse navbar-collapse" id="Menu">
<ul class="navbar-nav mr-auto">
@foreach (var p in MenuPages)
{
if (p.PageId == PageState.Page.PageId)
{
<li class="nav-item active">
<a class="nav-link" href="@GetUrl(p)" target="@GetTarget(p)" >
@if (p.Icon != string.Empty)
{
<span class="@p.Icon" aria-hidden="true"></span>
}
@p.Name<span class="sr-only">(current)</span>
</a>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link" href="@GetUrl(p)" target="@GetTarget(p)" >
@if (p.Icon != string.Empty)
{
<span class="@p.Icon" aria-hidden="true"></span>
}
@p.Name
</a>
</li>
}
}
</ul>
<MenuItemsHorizontal ParentPage="null" Pages="MenuPages" />
</div>
</div>
}

27
Oqtane.Client/Themes/Controls/MenuItemsBase.cs Normal file
View File

@ -0,0 +1,27 @@
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Components;
using Oqtane.Models;
using Oqtane.UI;
namespace Oqtane.Themes.Controls
{
public abstract class MenuItemsBase : MenuBase
{
[Parameter()]
public Page ParentPage { get; set; }
[Parameter()]
public IEnumerable<Page> Pages { get; set; }
protected IEnumerable<Page> GetChildPages()
{
return Pages
.Where(e => e.ParentId == ParentPage?.PageId)
.OrderBy(e => e.Order)
.AsEnumerable();
}
}
}

78
Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor Normal file
View File

@ -0,0 +1,78 @@
@namespace Oqtane.Themes.Controls
@inherits MenuItemsBase
@if (ParentPage != null)
{
<div class="dropdown-menu" aria-labelledby="@($"navbarDropdown{ParentPage.PageId}")">
@foreach (var childPage in GetChildPages())
{
if (childPage.PageId == PageState.Page.PageId)
{
<a class="dropdown-item active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<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>
}
}
</div>
}
else
{
<ul class="navbar-nav mr-auto">
@foreach (var childPage in GetChildPages())
{
if (!Pages.Any(e => e.ParentId == childPage.PageId))
{
if (childPage.PageId == PageState.Page.PageId)
{
<li class="nav-item active">
<a class="nav-link" 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">
<a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
<FontIcon Value="@childPage.Icon" />
@childPage.Name
</a>
</li>
}
}
else
{
if (childPage.PageId == PageState.Page.PageId)
{
<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">
<FontIcon Value="@childPage.Icon" />
@childPage.Name <span class="sr-only">(current)</span>
</a>
<MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
</li>
}
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" />
</li>
}
}
}
</ul>
}

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

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

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>
}