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

added classes to all theme controls, added mobile support to Oqtane theme

Browse Source
This commit is contained in:
Shaun Walker
2020-05-08 17:30:35 -04:00
parent aaf2c96374
commit c2ed71ab0d
18 changed files with 278 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
Oqtane.Client/Modules/Controls/RichTextEditor.razor
View File

@ -85,8 +85,8 @@
private ElementReference _toolBar;
private bool _filemanagervisible = false;
private FileManager _fileManager;
private string _original = string.Empty;
private string _content = string.Empty;
private string _original = string.Empty;
private string _message = string.Empty;
[Parameter]
@ -110,8 +110,7 @@
protected override void OnInitialized()
{
_original = Content;
_content = _original;
_content = Content; // raw HTML
}
protected override async Task OnAfterRenderAsync(bool firstRender)
@ -129,45 +128,54 @@
await RichTextEditorInterop.LoadEditorContent(
JsRuntime,
_editorElement, _original);
}
}
_editorElement, Content);
public async Task<string> GetText()
{
return await RichTextEditorInterop.GetText(
JsRuntime,
_editorElement);
}
public async Task<string> GetHtml()
{
if (_original != _content)
{
// raw html content changed
return _content;
}
else
{
// return rich text content
return await RichTextEditorInterop.GetHtml(
// preserve a copy of the rich text content ( Quill sanitizes content so we need to retrieve it from the editor )
_original = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
}
}
public async Task<string> GetContent()
public void CloseFileManager()
{
return await RichTextEditorInterop.GetContent(
JsRuntime,
_editorElement);
_filemanagervisible = false;
_message = string.Empty;
StateHasChanged();
}
public async Task EnableEditor(bool mode)
public async Task RefreshRichText()
{
await RichTextEditorInterop.EnableEditor(
await RichTextEditorInterop.LoadEditorContent(
JsRuntime,
_editorElement, mode);
_editorElement, _content);
}
public async Task RefreshRawHtml()
{
_content = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
StateHasChanged();
}
public async Task<string> GetHtml()
{
// get rich text content
string content = await RichTextEditorInterop.GetHtml(
JsRuntime,
_editorElement);
if (_original != content)
{
// rich text content has changed - return it
return content;
}
else
{
// return raw html content
return _content;
}
}
public async Task InsertImage()
@ -196,25 +204,25 @@
StateHasChanged();
}
public void CloseFileManager()
// other rich text editor methods which can be used by developers
public async Task<string> GetText()
{
_filemanagervisible = false;
_message = string.Empty;
StateHasChanged();
}
public async Task RefreshRichText()
{
await RichTextEditorInterop.LoadEditorContent(
JsRuntime,
_editorElement, _content);
}
public async Task RefreshRawHtml()
{
_content = await RichTextEditorInterop.GetHtml(
return await RichTextEditorInterop.GetText(
JsRuntime,
_editorElement);
StateHasChanged();
}
public async Task<string> GetContent()
{
return await RichTextEditorInterop.GetContent(
JsRuntime,
_editorElement);
}
public async Task EnableEditor(bool mode)
{
await RichTextEditorInterop.EnableEditor(
JsRuntime,
_editorElement, mode);
}
}

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

@ -7,15 +7,7 @@
<div class="sidebar">
<nav class="navbar">
<Logo />
<button class="navbar-toggler" aria-expanded="false" aria-controls="navbarSupportedContent"
aria-label="Toggle navigation" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<Menu Orientation="Vertical" />
</div>
<Logo /><Menu Orientation="Vertical" />
</nav>
</div>

32
Oqtane.Client/Themes/Controls/Breadcrumbs.razor
View File

@ -4,24 +4,30 @@
@if (BreadCrumbPages.Any())
{
<ol class="breadcrumb">
@foreach (var p in BreadCrumbPages)
{
<li class="breadcrumb-item @ActiveClass(p)">
<a href="@NavigateUrl(p.Path)">@p.Name</a>
</li>
}
</ol>
<span class="app-breadcrumbs">
<ol class="breadcrumb">
@foreach (var p in BreadCrumbPages)
{
if (p.PageId == PageState.Page.PageId)
{
<li class="breadcrumb-item active">
<a href="@NavigateUrl(p.Path)">@p.Name</a>
</li>
}
else
{
<li class="breadcrumb-item">
<a href="@NavigateUrl(p.Path)">@p.Name</a>
</li>
}
}
</ol>
</span>
}
@code {
protected IEnumerable<Page> BreadCrumbPages => GetBreadCrumbPages().Reverse().ToList();
protected string ActiveClass(Page page)
{
return (page.PageId == PageState.Page.PageId) ? " active" : string.Empty;
}
private IEnumerable<Page> GetBreadCrumbPages()
{

1
Oqtane.Client/Themes/Controls/ControlPanel.razor
View File

@ -1,5 +1,4 @@
@namespace Oqtane.Themes.Controls
@using Oqtane.Enums
@inherits ThemeControlBase
@attribute [OqtaneIgnore]
@inject NavigationManager NavigationManager

24
Oqtane.Client/Themes/Controls/Login.razor
View File

@ -2,14 +2,16 @@
@inherits LoginBase
@attribute [OqtaneIgnore]
<AuthorizeView>
<Authorizing>
<text>...</text>
</Authorizing>
<Authorized>
<button type="button" class="btn btn-primary" @onclick="LogoutUser">Logout</button>
</Authorized>
<NotAuthorized>
<button type="button" class="btn btn-primary" @onclick="LoginUser">Login</button>
</NotAuthorized>
</AuthorizeView>
<span class="app-login">
<AuthorizeView>
<Authorizing>
<text>...</text>
</Authorizing>
<Authorized>
<button type="button" class="btn btn-primary" @onclick="LogoutUser">Logout</button>
</Authorized>
<NotAuthorized>
<button type="button" class="btn btn-primary" @onclick="LoginUser">Login</button>
</NotAuthorized>
</AuthorizeView>
</span>

19
Oqtane.Client/Themes/Controls/Logo.razor
View File

@ -1,22 +1,13 @@
@namespace Oqtane.Themes.Controls
@inherits ThemeControlBase
@attribute [OqtaneIgnore]
@inject NavigationManager NavigationManager
@if (PageState.Site.LogoFileId != null)
{
<a href="@Href">
<img class="img-fluid" src="@ContentUrl(PageState.Site.LogoFileId.Value)" alt="@PageState.Site.Name"/>
</a>
<span class="app-logo">
<a href="@PageState.Alias.Path">
<img class="img-fluid" src="@ContentUrl(PageState.Site.LogoFileId.Value)" alt="@PageState.Site.Name" />
</a>
</span>
}
@code {
string Href
{
get
{
var uri = new Uri(NavigationManager.Uri);
return $"{uri.Scheme}://{uri.Authority}";
}
}
}

7
Oqtane.Client/Themes/Controls/MenuHorizontal.Razor
View File

@ -3,11 +3,10 @@
@attribute [OqtaneIgnore]
@if (MenuPages.Any())
{
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Menu">
<ul class="navbar-nav mr-auto">
@foreach (var p in MenuPages)

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

@ -1,28 +1,32 @@
@namespace Oqtane.Themes.Controls
@inherits MenuBase
@inherits MenuBase
@attribute [OqtaneIgnore]
@if (MenuPages.Any())
{
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="app-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)">
<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="oi oi-@p.Icon" aria-hidden="true"></span>
}
@p.Name
</a>
</li>
}
</ul>
@if (p.HasChildren)
{
<i class="oi oi-chevron-right"></i>
}
@if (p.Icon != string.Empty)
{
<span class="oi oi-@p.Icon" aria-hidden="true"></span>
}
@p.Name
</a>
</li>
}
</ul>
</div>
</div>
}

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

@ -4,18 +4,20 @@
@if (PageState.EditMode && !PageState.Page.EditMode && UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions))
{
<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)
{
if (string.IsNullOrEmpty(action.Name))
{
<div class="dropdown-divider"></div>
}
else
{
<a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">@action.Name</a>
}
}
<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)
{
if (string.IsNullOrEmpty(action.Name))
{
<div class="dropdown-divider"></div>
}
else
{
<a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">@action.Name</a>
}
}
</div>
</div>
}
}

4
Oqtane.Client/Themes/Controls/ModuleTitle.razor
View File

@ -2,7 +2,9 @@
@inherits ContainerBase
@attribute [OqtaneIgnore]
@((MarkupString)title)
<span class="app-moduletitle">
@((MarkupString)title)
</span>
@code {
private string title = "";

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

@ -3,21 +3,22 @@
@attribute [OqtaneIgnore]
@inject NavigationManager NavigationManager
<AuthorizeView>
<Authorizing>
<text>...</text>
</Authorizing>
<Authorized>
<button type="button" class="btn btn-primary" @onclick="UpdateProfile">@context.User.Identity.Name</button>
</Authorized>
<NotAuthorized>
@if (PageState.Site.AllowRegistration)
{
<button type="button" class="btn btn-primary" @onclick="RegisterUser">Register</button>
}
</NotAuthorized>
</AuthorizeView>
<span class="app-profile">
<AuthorizeView>
<Authorizing>
<text>...</text>
</Authorizing>
<Authorized>
<button type="button" class="btn btn-primary" @onclick="UpdateProfile">@context.User.Identity.Name</button>
</Authorized>
<NotAuthorized>
@if (PageState.Site.AllowRegistration)
{
<button type="button" class="btn btn-primary" @onclick="RegisterUser">Register</button>
}
</NotAuthorized>
</AuthorizeView>
</span>
@code {

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

@ -3,7 +3,10 @@
<main role="main">
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<Logo /><Menu Orientation="Horizontal" /><div class="ml-md-auto"><UserProfile /> <Login /> <ControlPanel /></div>
<Logo /><Menu Orientation="Horizontal" />
<div class="controls ml-md-auto">
<div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
</div>
</nav>
<div class="container">
<PaneLayout />

11
Oqtane.Client/UI/SiteRouter.razor
View File

@ -1,4 +1,6 @@
@namespace Oqtane.UI
@using System.Diagnostics.CodeAnalysis
@using System.Runtime.InteropServices
@namespace Oqtane.UI
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject SiteState SiteState
@inject NavigationManager NavigationManager
@ -11,9 +13,6 @@
@inject IModuleService ModuleService
@inject IModuleDefinitionService ModuleDefinitionService
@inject ILogService LogService
@using System.Diagnostics.CodeAnalysis
@using Oqtane.Enums
@using System.Runtime.InteropServices
@implements IHandleAfterRender
@DynamicComponent
@ -89,7 +88,7 @@
// get path
var path = uri.LocalPath.Substring(1);
// parse querystring
// parse querystring
var querystring = ParseQueryString(uri.Query);
// the reload parameter is used during user login/logout
@ -237,7 +236,7 @@
}
// check if user is authorized to view page
if (UserSecurity.IsAuthorized(user,PermissionNames.View, page.Permissions))
if (UserSecurity.IsAuthorized(user, PermissionNames.View, page.Permissions))
{
page = await ProcessPage(page, site, user);

3
Oqtane.Client/_Imports.razor
View File

@ -17,4 +17,5 @@
@using Oqtane.Shared
@using Oqtane.Themes
@using Oqtane.Themes.Controls
@using Oqtane.UI
@using Oqtane.UI
@using Oqtane.Enums