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

Improved CSS handling

Browse Source
This commit is contained in:
Shaun Walker 2019-09-21 22:15:44 -04:00
parent 054495056d
commit 5f62957752
15 changed files with 142 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Oqtane.Client/Modules/Admin/Pages/Add.razor
View File

@ -175,6 +175,9 @@
themes = ThemeService.GetThemeTypes(PageState.Themes);
panelayouts = ThemeService.GetPaneLayoutTypes(PageState.Themes);
themetype = PageState.Site.DefaultThemeType;
layouttype = PageState.Site.DefaultLayoutType;
List<PermissionString> permissionstrings = new List<PermissionString>();
permissionstrings.Add(new PermissionString { PermissionName = "View", Permissions = Constants.AdminRole });
permissionstrings.Add(new PermissionString { PermissionName = "Edit", Permissions = Constants.AdminRole });

2
Oqtane.Client/Modules/Admin/Pages/Index.razor
View File

@ -11,7 +11,7 @@
{
<ActionLink Action="Add" Text="Add Page" Style="float: right; margin: 10px;" />
<Pager Items="@PageState.Pages" DisplayPages="3" PageSize="3">
<Pager Items="@PageState.Pages">
<Header>
<th>Name</th>
<th>&nbsp;</th>

2
Oqtane.Client/Modules/Controls/Pager.razor
View File

@ -70,7 +70,7 @@
{
if (string.IsNullOrEmpty(PageSize))
{
MaxItems = 5;
MaxItems = 10;
}
else
{

4
Oqtane.Client/Modules/Controls/PermissionGrid.razor
View File

@ -102,6 +102,10 @@
{
permissionnames = "View,Edit";
}
else
{
permissionnames = PermissionNames;
}
roles = await RoleService.GetRolesAsync(ModuleState.SiteId);
roles.Insert(0, new Role { Name = Constants.AllUsersRole });

42
Oqtane.Client/Modules/HelloWorld/Index.razor Normal file
View File

@ -0,0 +1,42 @@
@using Microsoft.AspNetCore.Components.Web
@using Oqtane.Modules
@using Oqtane.Services
@namespace Oqtane.Modules.HelloWorld
@inherits ModuleBase
@inject ISettingService SettingService
<div class="container">
<div>
<label for="Url" class="control-label">Image Url: </label>
</div>
<div>
<input type="text" name="Url" class="form-control" placeholder="Image Url" @bind="@url" />
</div>
<button type="button" class="btn btn-primary" @onclick="Save">Save</button>
<div>
@if (!string.IsNullOrEmpty(url))
{
<br />
<img src="@url" />
}
</div>
</div>
@code {
string url = "";
protected override async Task OnInitializedAsync()
{
Dictionary<string, string> settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
url = SettingService.GetSetting(settings, "url", "");
}
private async Task Save()
{
Dictionary<string, string> settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
SettingService.SetSetting(settings, "url", url);
await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
StateHasChanged();
}
}

15
Oqtane.Client/Modules/ModuleBase.cs
View File

@ -1,11 +1,16 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Oqtane.Shared;
using Oqtane.Models;
using System.Threading.Tasks;
namespace Oqtane.Modules
{
public class ModuleBase : ComponentBase, IModuleControl
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
[CascadingParameter]
protected PageState PageState { get; set; }
@ -25,6 +30,16 @@ namespace Oqtane.Modules
return "Modules/" + this.GetType().Namespace + "/";
}
public async Task AddCSS(string Url)
{
if (!Url.StartsWith("http"))
{
Url = ModulePath() + Url;
}
var interop = new Interop(JSRuntime);
await interop.AddCSS("Module:" + Utilities.CreateIdFromUrl(Url), Url);
}
public string NavigateUrl()
{
return NavigateUrl(PageState.Page.Path);

8
Oqtane.Client/Shared/Interop.cs
View File

@ -42,13 +42,13 @@ namespace Oqtane.Shared
}
}
public Task AddCSS(string filename)
public Task AddCSS(string id, string url)
{
try
{
jsRuntime.InvokeAsync<string>(
"interop.addCSS",
filename);
id, url);
return Task.CompletedTask;
}
catch
@ -57,13 +57,13 @@ namespace Oqtane.Shared
}
}
public Task RemoveCSS(string filepattern)
public Task RemoveCSS(string pattern)
{
try
{
jsRuntime.InvokeAsync<string>(
"interop.removeCSS",
filepattern);
pattern);
return Task.CompletedTask;
}
catch

4
Oqtane.Client/Shared/ThemeBuilder.razor
View File

@ -35,7 +35,7 @@
{
// remove any custom CSS
var interop = new Interop(jsRuntime);
await interop.RemoveCSS("Themes/");
await interop.RemoveCSS("Modules/");
await interop.RemoveCSS("Theme:");
await interop.RemoveCSS("Module:");
}
}

5
Oqtane.Client/Shared/Utilities.cs
View File

@ -191,5 +191,10 @@ namespace Oqtane.Shared
return "";
}
}
public static string CreateIdFromUrl(string value)
{
return value.Replace("/", "_").Replace("\\", "_").Replace(".", "_");
}
}
}

20
Oqtane.Client/Themes/ContainerBase.cs
View File

@ -1,11 +1,16 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Oqtane.Shared;
using Oqtane.Models;
using System.Threading.Tasks;
namespace Oqtane.Themes
{
public class ContainerBase : ComponentBase, IContainerControl
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
[CascadingParameter]
protected PageState PageState { get; set; }
@ -14,6 +19,21 @@ namespace Oqtane.Themes
public virtual string Name { get; set; }
public string ThemePath()
{
return "Themes/" + this.GetType().Namespace + "/";
}
public async Task AddCSS(string Url)
{
if (!Url.StartsWith("http"))
{
Url = ThemePath() + Url;
}
var interop = new Interop(JSRuntime);
await interop.AddCSS("Theme:" + Utilities.CreateIdFromUrl(Url), Url);
}
public string NavigateUrl()
{
return NavigateUrl(PageState.Page.Path);

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

@ -19,6 +19,11 @@
<div id="actions" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeActions()">x</a>
<div class="overlay-content">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="btn btn-primary mx-auto" href="@NavigateUrl("admin")">Admin Dashboard</NavLink>
</li>
</ul>
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="btn btn-primary mx-auto" href="@PageUrl("Add")">Add Page</NavLink>
@ -99,12 +104,6 @@
</table>
<button type="button" class="btn btn-primary mx-auto" style="width: 100%;" @onclick="@AddModule">Add Module To Page</button>
</div>
<hr style="width: 100%; color: white; height: 1px; background-color:white;" />
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="btn btn-primary mx-auto" href="@NavigateUrl("admin")">Admin Dashboard</NavLink>
</li>
</ul>
</div>
</div>

15
Oqtane.Client/Themes/ThemeBase.cs
View File

@ -1,10 +1,15 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Oqtane.Shared;
using System.Threading.Tasks;
namespace Oqtane.Themes
{
public class ThemeBase : ComponentBase, IThemeControl
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
[CascadingParameter]
protected PageState PageState { get; set; }
public virtual string Name { get; set; }
@ -15,6 +20,16 @@ namespace Oqtane.Themes
return "Themes/" + this.GetType().Namespace + "/";
}
public async Task AddCSS(string Url)
{
if (!Url.StartsWith("http"))
{
Url = ThemePath() + Url;
}
var interop = new Interop(JSRuntime);
await interop.AddCSS("Theme:" + Utilities.CreateIdFromUrl(Url), Url);
}
public string NavigateUrl()
{
return NavigateUrl(PageState.Page.Path);

23
Oqtane.Server/Repository/SiteRepository.cs
View File

@ -28,27 +28,27 @@ namespace Oqtane.Repository
// defines the default site template
SiteTemplate = new List<PageTemplate>();
SiteTemplate.Add(new PageTemplate { Name = "Home", Parent = "", Path = "", Order = 1, Icon = "home", IsNavigation = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Home", Parent = "", Path = "", Order = 1, Icon = "home", IsNavigation = true, EditMode = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "", ModulePermissions = "", Title = "", Pane = "", ContainerType = "" });
SiteTemplate.Add(new PageTemplate { Name = "Admin", Parent = "", Path = "admin", Order = 1, Icon = "", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Admin", Parent = "", Path = "admin", Order = 1, Icon = "", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Dashboard, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Administration", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Site Management", Parent = "Admin", Path = "admin/sites", Order = 1, Icon = "globe", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Site Management", Parent = "Admin", Path = "admin/sites", Order = 1, Icon = "globe", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Sites, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Site Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Page Management", Parent = "Admin", Path = "admin/pages", Order = 1, Icon = "layers", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Page Management", Parent = "Admin", Path = "admin/pages", Order = 1, Icon = "layers", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Pages, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Page Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Module Management", Parent = "Admin", Path = "admin/modules", Order = 1, Icon = "browser", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Module Management", Parent = "Admin", Path = "admin/modules", Order = 1, Icon = "browser", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.ModuleDefinitions, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Module Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Theme Management", Parent = "Admin", Path = "admin/themes", Order = 1, Icon = "brush", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Theme Management", Parent = "Admin", Path = "admin/themes", Order = 1, Icon = "brush", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Themes, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Theme Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "User Management", Parent = "Admin", Path = "admin/users", Order = 1, Icon = "person", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "User Management", Parent = "Admin", Path = "admin/users", Order = 1, Icon = "person", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Users, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "User Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Role Management", Parent = "Admin", Path = "admin/roles", Order = 1, Icon = "lock-locked", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Role Management", Parent = "Admin", Path = "admin/roles", Order = 1, Icon = "lock-locked", IsNavigation = false, EditMode = true, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Roles, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Role Management", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Login", Parent = "", Path = "login", Order = 1, Icon = "lock-locked", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Login", Parent = "", Path = "login", Order = 1, Icon = "lock-locked", IsNavigation = false, EditMode = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Login, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Login", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Register", Parent = "", Path = "register", Order = 1, Icon = "person", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Register", Parent = "", Path = "register", Order = 1, Icon = "person", IsNavigation = false, EditMode = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Register, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "Register", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
SiteTemplate.Add(new PageTemplate { Name = "Profile", Parent = "", Path = "profile", Order = 1, Icon = "person", IsNavigation = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
SiteTemplate.Add(new PageTemplate { Name = "Profile", Parent = "", Path = "profile", Order = 1, Icon = "person", IsNavigation = false, EditMode = false, PagePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]",
ModuleDefinitionName = "Oqtane.Modules.Admin.Profile, Oqtane.Client", ModulePermissions = "[{\"PermissionName\":\"View\",\"Permissions\":\"All Users;Administrators\"},{\"PermissionName\":\"Edit\",\"Permissions\":\"Administrators\"}]", Title = "User Profile", Pane = "top", ContainerType = "Oqtane.Themes.Theme2.Container2, Oqtane.Client" });
}
@ -119,6 +119,7 @@ namespace Oqtane.Repository
Path = pagetemplate.Path,
Order = pagetemplate.Order,
IsNavigation = pagetemplate.IsNavigation,
EditMode = pagetemplate.EditMode,
ThemeType = site.DefaultThemeType,
LayoutType = site.DefaultLayoutType,
Icon = pagetemplate.Icon,

20
Oqtane.Server/wwwroot/js/interop.js
View File

@ -28,23 +28,21 @@ window.interop = {
return "";
}
},
addCSS: function (fileName) {
var head = document.head;
addCSS: function (id, url) {
if (document.getElementById(id) === null) {
var link = document.createElement("link");
link.id = id;
link.type = "text/css";
link.rel = "stylesheet";
link.href = fileName;
head.appendChild(link);
link.href = url;
document.head.appendChild(link);
}
},
removeCSS: function (filePattern) {
var head = document.head;
removeCSS: function (pattern) {
var links = document.getElementsByTagName("link");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.rel === 'stylesheet' && link.href.includes(filePattern)) {
head.removeChild(link);
if (links[i].id.includes(pattern)) {
document.head.removeChild(links[i]);
}
}
},

1
Oqtane.Shared/Models/PageTemplate.cs
View File

@ -8,6 +8,7 @@
public int Order { get; set; }
public string Icon { get; set; }
public bool IsNavigation { get; set; }
public bool EditMode { get; set; }
public string PagePermissions { get; set; }
public string ModuleDefinitionName { get; set; }
public string ModulePermissions { get; set; }