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

enhanced ModuleActions component to display panes in a submenu, added more containers to Oqtane theme, added more panes to MultiPane layout, added module outline in edit mode to distinguish modules in panes, consolidated to use a single default AdminPane named "Content", fixed bug related to custom Admin Container behavior

Browse Source
This commit is contained in:
Shaun Walker
2021-04-06 17:45:11 -04:00
parent 6b90e0f37b
commit d05747af1e
24 changed files with 287 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
View File

@ -1,4 +1,4 @@
@namespace Oqtane.Themes.BlazorTheme
@namespace Oqtane.Themes.BlazorTheme
@inherits ThemeBase
<div class="breadcrumbs">
@ -19,9 +19,6 @@
<div class="row px-4">
<Pane Name="Content" />
</div>
<div class="row px-4">
<Pane Name="Admin" />
</div>
</div>
</div>

42
Oqtane.Client/Themes/Controls/ModuleActions.razor
View File

@ -2,33 +2,41 @@
@inherits ModuleActionsBase
@attribute [OqtaneIgnore]
@if (PageState.EditMode && UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions))
@if (PageState.EditMode && UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions) && PageState.Action == Constants.DefaultAction)
{
<div class="app-moduleactions">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 37px, 0px);">
@foreach (var action in Actions)
<ul class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 37px, 0px);">
@foreach (var action in Actions.Where(item => !item.Name.Contains("Pane")))
{
if (string.IsNullOrEmpty(action.Name))
{
<div class="dropdown-divider"></div>
<li class="dropdown-divider"></li>
}
else
{
<a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
@if (string.IsNullOrEmpty(action.Icon))
{
@((MarkupString) "&nbsp;&nbsp;");
}
else
{
<span class="@action.Icon" aria-hidden="true"></span>
}
&nbsp;
@action.Name
</a>
<li>
<a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
<span class="@action.Icon" aria-hidden="true"></span>&nbsp;@action.Name
</a>
</li>
}
}
</div>
<li class="dropdown-submenu">
<a class="dropdown-item" onclick="return subMenu(this)">
<span class="@Icons.AccountLogin" aria-hidden="true"></span>&nbsp;Move To &gt;
</a>
<ul class="dropdown-menu">
@foreach (var action in Actions.Where(item => item.Name.Contains("Pane")))
{
<li>
<a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
<span class="@action.Icon" aria-hidden="true"></span>&nbsp;@action.Name
</a>
</li>
}
</ul>
</li>
</ul>
</div>
}

4
Oqtane.Client/Themes/Controls/ModuleActionsBase.cs
View File

@ -1,4 +1,4 @@
using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
@ -76,7 +76,7 @@ namespace Oqtane.Themes.Controls
{
if (pane != ModuleState.Pane)
{
actionList.Add(new ActionViewModel {Icon = Icons.AccountLogin, Name = "Move To " + pane + " Pane", Action = async (s, m) => await MoveToPane(s, pane, m)});
actionList.Add(new ActionViewModel {Icon = Icons.AccountLogin, Name = pane + " Pane", Action = async (s, m) => await MoveToPane(s, pane, m)});
}
}
}

10
Oqtane.Client/Themes/OqtaneTheme/Containers/DefaultNoTitle.razor Normal file
View File

@ -0,0 +1,10 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container">
<ModuleActions /><ModuleInstance />
</div>
@code {
public override string Name => "No Background Color - No Title";
}

5
Oqtane.Client/Themes/OqtaneTheme/Containers/Container.razor → Oqtane.Client/Themes/OqtaneTheme/Containers/DefaultTitle.razor
View File

@ -1,5 +1,6 @@
@namespace Oqtane.Themes.OqtaneTheme
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container">
<div class="row px-4">
<div class="d-flex flex-nowrap">
@ -15,5 +16,5 @@
</div>
@code {
public override string Name => "Standard Header";
public override string Name => "No Background Color - With Title";
}

13
Oqtane.Client/Themes/OqtaneTheme/Containers/NoTitle.razor
View File

@ -1,13 +0,0 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container">
@if (PageState.EditMode)
{
<ModuleActions />
}
<ModuleInstance />
</div>
@code {
public override string Name => "No Header";
}

10
Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryNoTitle.razor Normal file
View File

@ -0,0 +1,10 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container bg-primary">
<ModuleActions /><ModuleInstance />
</div>
@code {
public override string Name => "Primary Background Color - No Title";
}

20
Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryTitle.razor Normal file
View File

@ -0,0 +1,20 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container bg-primary">
<div class="row px-4">
<div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" />
</div>
<div class="row px-4">
<div class="container">
<ModuleInstance />
</div>
</div>
</div>
@code {
public override string Name => "Primary Background Color - With Title";
}

10
Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryNoTitle.razor Normal file
View File

@ -0,0 +1,10 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container bg-secondary">
<ModuleActions /><ModuleInstance />
</div>
@code {
public override string Name => "Secondary Background Color - No Title";
}

20
Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryTitle.razor Normal file
View File

@ -0,0 +1,20 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container bg-secondary">
<div class="row px-4">
<div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" />
</div>
<div class="row px-4">
<div class="container">
<ModuleInstance />
</div>
</div>
</div>
@code {
public override string Name => "Secondary Background Color - With Title";
}

92
Oqtane.Client/Themes/OqtaneTheme/Layouts/MultiPane.razor
View File

@ -1,20 +1,90 @@
@namespace Oqtane.Themes.OqtaneTheme
@namespace Oqtane.Themes.OqtaneTheme
@inherits LayoutBase
<div class="row px-4">
<Pane Name="Top" />
<div class="container">
<div class="row">
<div class="col-md-12">
<Pane Name="Content" />
</div>
</div>
</div>
<div class="row px-4">
<div class="col-sm"><Pane Name="Left" /></div>
<div class="col-sm"><Pane Name="Content" /></div>
<div class="col-sm"><Pane Name="Right" /></div>
</div>
<div class="row px-4">
<Pane Name="Bottom" />
<Pane Name="Top Full Width" />
<div class="container">
<div class="row">
<div class="col-md-12">
<Pane Name="Top 100%" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<Pane Name="Left 50%" />
</div>
<div class="col-md-6">
<Pane Name="Right 50%" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<Pane Name="Left 33%" />
</div>
<div class="col-md-4">
<Pane Name="Center 33%" />
</div>
<div class="col-md-4">
<Pane Name="Right 33%" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<Pane Name="Left Outer 25%" />
</div>
<div class="col-md-3">
<Pane Name="Left Inner 25%" />
</div>
<div class="col-md-3">
<Pane Name="Right Inner 25%" />
</div>
<div class="col-md-3">
<Pane Name="Right Outer 25%" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<Pane Name="Left 25%" />
</div>
<div class="col-md-6">
<Pane Name="Center 50%" />
</div>
<div class="col-md-3">
<Pane Name="Right 25%" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<Pane Name="Left Sidebar 66%" />
</div>
<div class="col-md-4">
<Pane Name="Right Sidebar 33%" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<Pane Name="Left Sidebar 33%" />
</div>
<div class="col-md-8">
<Pane Name="Right Sidebar 66%" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<Pane Name="Bottom 100%" />
</div>
</div>
</div>
<Pane Name="Bottom Full Width" />
@code {
public override string Name => "Multiple Panes";
public override string Panes => "Top,Left,Content,Right,Bottom";
public override string Panes => "Content, Top Full Width,Top 100%,Left 50%,Right 50%,Left 33%,Center 33%,Right 33%,Left Outer 25%,Left Inner 25%,Right Inner 25%,Right Outer 25%,Left 25%,Center 50%,Right 25%,Left Sidebar 66%,Right Sidebar 33%,Left Sidebar 33%,Right Sidebar 66%,Bottom 100%,Bottom Full Width";
}

12
Oqtane.Client/Themes/OqtaneTheme/Layouts/SinglePane.razor
View File

@ -1,12 +1,16 @@
@namespace Oqtane.Themes.OqtaneTheme
@namespace Oqtane.Themes.OqtaneTheme
@inherits LayoutBase
<div class="row px-4">
<Pane Name="Content" />
<div class="container">
<div class="row">
<div class="col-md-12">
<Pane Name="Content" />
</div>
</div>
</div>
@code {
public override string Name => "Single Pane";
public override string Panes => "Content";
}
}

11
Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor
View File

@ -1,4 +1,4 @@
@namespace Oqtane.Themes.OqtaneTheme
@namespace Oqtane.Themes.OqtaneTheme
@inherits ThemeBase
<main role="main">
@ -8,16 +8,11 @@
<div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
</div>
</nav>
<div class="content container">
<PaneLayout />
<div class="row px-4">
<Pane Name="Admin" />
</div>
</div>
<PaneLayout />
</main>
@code {
public override string Name => "Default";
public override string Name => "Default Theme";
public override string Panes => string.Empty;