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

User experience improvements

Browse Source
This commit is contained in:
Shaun Walker
2021-04-17 19:18:24 -04:00
parent 1d3a79437c
commit cbe843bafc
84 changed files with 1020 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,13 +17,13 @@
</div>
<div class="container">
<div class="row px-4">
<Pane Name="Content" />
<Pane Name="@PaneNames.Admin" />
</div>
</div>
</div>
@code {
public override string Panes => "Content";
public override string Panes => PaneNames.Admin;
public override List<Resource> Resources => new List<Resource>()
{

33
Oqtane.Client/Themes/Controls/ModuleActions.razor → Oqtane.Client/Themes/Controls/Container/ModuleActions.razor
View File

@ -22,21 +22,24 @@
</li>
}
}
<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>
@if (Actions.Where(item => item.Name.Contains("Pane")).Any())
{
<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>
}

0
Oqtane.Client/Themes/Controls/ModuleActionsBase.cs → Oqtane.Client/Themes/Controls/Container/ModuleActionsBase.cs
View File

0
Oqtane.Client/Themes/Controls/ModuleTitle.razor → Oqtane.Client/Themes/Controls/Container/ModuleTitle.razor
View File

12
Oqtane.Client/Themes/Controls/FontIcon.razor
View File

@ -1,12 +0,0 @@
@namespace Oqtane.Themes.Controls
@inherits ThemeControlBase
@if (!string.IsNullOrWhiteSpace(Value))
{
<span class="@Value" aria-hidden="true"></span>
}
@code {
[Parameter()]
public string Value { get; set; }
}

0
Oqtane.Client/Themes/Controls/Breadcrumbs.razor → Oqtane.Client/Themes/Controls/Theme/Breadcrumbs.razor
View File

2
Oqtane.Client/Themes/Controls/ControlPanel.razor → Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
View File

@ -599,7 +599,7 @@
Dictionary<string, string> settings = await SettingService.GetUserSettingsAsync(PageState.User.UserId);
_category = SettingService.GetSetting(settings, settingCategory, "Common");
var pane = SettingService.GetSetting(settings, settingPane, "");
_pane = PageState.Page.Panes.Contains(pane) ? pane : PageState.Page.Panes.FirstOrDefault();
_pane = PageState.Page.Panes.Contains(pane) ? pane : PaneNames.Admin;
}
private async Task UpdateSettingsAsync()

0
Oqtane.Client/Themes/Controls/LanguageSwitcher.razor → Oqtane.Client/Themes/Controls/Theme/LanguageSwitcher.razor
View File

0
Oqtane.Client/Themes/Controls/Login.razor → Oqtane.Client/Themes/Controls/Theme/Login.razor
View File

0
Oqtane.Client/Themes/Controls/LoginBase.cs → Oqtane.Client/Themes/Controls/Theme/LoginBase.cs
View File

0
Oqtane.Client/Themes/Controls/Logo.razor → Oqtane.Client/Themes/Controls/Theme/Logo.razor
View File

0
Oqtane.Client/Themes/Controls/Menu.razor → Oqtane.Client/Themes/Controls/Theme/Menu.razor
View File

0
Oqtane.Client/Themes/Controls/MenuBase.cs → Oqtane.Client/Themes/Controls/Theme/MenuBase.cs
View File

0
Oqtane.Client/Themes/Controls/MenuHorizontal.razor → Oqtane.Client/Themes/Controls/Theme/MenuHorizontal.razor
View File

0
Oqtane.Client/Themes/Controls/MenuItemsBase.cs → Oqtane.Client/Themes/Controls/Theme/MenuItemsBase.cs
View File

0
Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor → Oqtane.Client/Themes/Controls/Theme/MenuItemsHorizontal.razor
View File

0
Oqtane.Client/Themes/Controls/MenuItemsVertical.razor → Oqtane.Client/Themes/Controls/Theme/MenuItemsVertical.razor
View File

0
Oqtane.Client/Themes/Controls/MenuVertical.razor → Oqtane.Client/Themes/Controls/Theme/MenuVertical.razor
View File

0
Oqtane.Client/Themes/Controls/UserProfile.razor → Oqtane.Client/Themes/Controls/Theme/UserProfile.razor
View File

2
Oqtane.Client/Themes/ILayoutControl.cs
View File

@ -1,4 +1,4 @@
namespace Oqtane.Themes
namespace Oqtane.Themes
{
public interface ILayoutControl
{

5
Oqtane.Client/Themes/LayoutBase.cs
View File

@ -1,5 +1,8 @@
namespace Oqtane.Themes
using System;
namespace Oqtane.Themes
{
[Obsolete("This class is deprecated", false)]
public abstract class LayoutBase : ThemeBase, ILayoutControl
{

47
Oqtane.Client/Themes/OqtaneTheme/Containers/Container.razor Normal file
View File

@ -0,0 +1,47 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
@inject ISettingService SettingService
<div class="@_classes">
@if (_title)
{
<div class="row px-4">
<div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" />
</div>
}
else
{
<ModuleActions />
}
<div class="row px-4">
<div class="container">
<ModuleInstance />
</div>
</div>
</div>
@code {
public override string Name => "Customizable Container";
private bool _title = true;
private string _classes = "container";
protected override void OnParametersSet()
{
try
{
_title = bool.Parse(SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true"));
_classes += " " + SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
_classes += " " + SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
_classes += " " + SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
_classes = _classes.Trim();
}
catch
{
// error loading container settings
}
}
}

113
Oqtane.Client/Themes/OqtaneTheme/Containers/ContainerSettings.razor Normal file
View File

@ -0,0 +1,113 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ModuleBase
@implements Oqtane.Interfaces.ISettingsControl
@inject ISettingService SettingService
@attribute [OqtaneIgnore]
<table class="table table-borderless">
<tr>
<td>
<Label For="title" ResourceKey="Title" HelpText="Specify If The Module Title Should Be Displayed">Display Title?</Label>
</td>
<td>
<select id="title" class="form-control" @bind="@_title">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="background\" ResourceKey="Background" HelpText="Optionally Specify A Background Color For The Container">Background Color:</Label>
</td>
<td>
<select id="background" class="form-control" @bind="@_background">
<option value="">None</option>
<option value="bg-primary">Primary</option>
<option value="bg-secondary">Secondary</option>
<option value="bg-success">Success</option>
<option value="bg-danger">Danger</option>
<option value="bg-warning">Warning</option>
<option value="bg-info">Info</option>
<option value="bg-light">Light</option>
<option value="bg-dark">Dark</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="text" ResourceKey="Text" HelpText="Optionally Specify A Text Color For The Container">Text Color:</Label>
</td>
<td>
<select id="text" class="form-control" @bind="@_text">
<option value="">None</option>
<option value="text-primary">Primary</option>
<option value="text-secondary">Secondary</option>
<option value="text-success">Success</option>
<option value="text-danger">Danger</option>
<option value="text-warning">Warning</option>
<option value="text-info">Info</option>
<option value="text-light">Light</option>
<option value="text-dark">Dark</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="border" ResourceKey="Border" HelpText="Optionally Specify A Border For The Container">Border Color:</Label>
</td>
<td>
<select id="border" class="form-control" @bind="@_border">
<option value="">None</option>
<option value="border">Default</option>
<option value="border border-primary">Primary</option>
<option value="border border-secondary">Secondary</option>
<option value="border border-success">Success</option>
<option value="border border-danger">Danger</option>
<option value="border border-warning">Warning</option>
<option value="border border-info">Info</option>
<option value="border border-light">Light</option>
<option value="border border-dark">Dark</option>
</select>
</td>
</tr>
</table>
@code {
private string _title = "true";
private string _background = "";
private string _text = "";
private string _border = "";
protected override void OnInitialized()
{
try
{
_title = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true");
_background = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
_text = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
_border = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
public async Task UpdateSettings()
{
try
{
var settings = ModuleState.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Title", _title);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Background", _background);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Text", _text);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Border", _border);
await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}

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

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

20
Oqtane.Client/Themes/OqtaneTheme/Containers/DefaultTitle.razor
View File

@ -1,20 +0,0 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ContainerBase
<div class="container">
<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 => "No Background Color - With Title";
}

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

@ -1,10 +0,0 @@
@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
View File

@ -1,20 +0,0 @@
@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
View File

@ -1,10 +0,0 @@
@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
View File

@ -1,20 +0,0 @@
@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";
}

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

@ -1,90 +0,0 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits LayoutBase
<div class="container">
<div class="row">
<div class="col-md-12">
<Pane Name="Content" />
</div>
</div>
</div>
<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 => "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";
}

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

@ -1,16 +0,0 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits LayoutBase
<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";
}

6
Oqtane.Client/Themes/OqtaneTheme/ThemeInfo.cs
View File

@ -1,4 +1,4 @@
using Oqtane.Models;
using Oqtane.Models;
namespace Oqtane.Themes.OqtaneTheme
{
@ -7,7 +7,9 @@ namespace Oqtane.Themes.OqtaneTheme
public Theme Theme => new Theme
{
Name = "Oqtane Theme",
Version = "1.0.0"
Version = "1.0.0",
ThemeSettingsType = "Oqtane.Themes.OqtaneTheme.ThemeSettings, Oqtane.Client",
ContainerSettingsType = "Oqtane.Themes.OqtaneTheme.ContainerSettings, Oqtane.Client"
};
}
}

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

@ -1,5 +1,6 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ThemeBase
@inject ISettingService SettingService
<main role="main">
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
@ -8,20 +9,123 @@
<div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
</div>
</nav>
<PaneLayout />
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<Pane Name="@PaneNames.Admin" />
</div>
</div>
</div>
<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" />
@if (_footer)
{
<div class="bg-primary footer">
<Pane Name="Footer" />
</div>
}
</div>
</main>
@code {
public override string Name => "Default Theme";
public override string Panes => string.Empty;
public override string Panes => PaneNames.Admin + ",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,Footer";
public override List<Resource> Resources => new List<Resource>()
{
{
new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/cyborg/bootstrap.min.css", Integrity = "sha384-GKugkVcT8wqoh3M8z1lqHbU+g6j498/ZT/zuXbepz7Dc09/otQZxTimkEMTkRWHP", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://code.jquery.com/jquery-3.5.1.slim.min.js", Integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js", Integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js", Integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI", CrossOrigin = "anonymous" }
};
private bool _footer = false;
protected override void OnParametersSet()
{
try
{
_footer = bool.Parse(SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false"));
}
catch
{
// error loading theme settings
}
}
}

49
Oqtane.Client/Themes/OqtaneTheme/Themes/ThemeSettings.razor Normal file
View File

@ -0,0 +1,49 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ModuleBase
@implements Oqtane.Interfaces.ISettingsControl
@inject ISettingService SettingService
@attribute [OqtaneIgnore]
<table class="table table-borderless">
<tr>
<td>
<Label For="title" ResourceKey="Title" HelpText="Specify If The Page Footer Should Be Displayed">Display Footer?</Label>
</td>
<td>
<select id="title" class="form-control" @bind="@_footer">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>
</table>
@code {
private string _footer = "false";
protected override void OnInitialized()
{
try
{
_footer = SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false");
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
public async Task UpdateSettings()
{
try
{
var settings = PageState.Page.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
await SettingService.UpdatePageSettingsAsync(settings, PageState.Page.PageId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}