resolve #566 by moving Bootstrap declaration into theme

This commit is contained in:
Shaun Walker
2020-06-16 17:38:06 -04:00
parent 71b3b695fc
commit 7c24bae753
10 changed files with 110 additions and 39 deletions

View File

@ -4,12 +4,12 @@
<div class="d-flex">
<div>
<a data-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name">
<a data-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
<h5>@_heading</h5>
</a>
</div>
<div class="ml-auto">
<a data-toggle="collapse" class="app-link-unstyled float-right" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name">
<a data-toggle="collapse" class="app-link-unstyled float-right" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
<i class="oi oi-chevron-bottom"></i>&nbsp;
</a>
</div>

View File

@ -11,13 +11,13 @@
<li class="nav-item">
@if (tabPanel.Name == ActiveTab)
{
<a class="nav-link active" data-toggle="tab" href="#@tabPanel.Name" role="tab">
<a class="nav-link active" data-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true">
@DisplayHeading(tabPanel.Name, tabPanel.Heading)
</a>
}
else
{
<a class="nav-link" data-toggle="tab" href="#@tabPanel.Name" role="tab">
<a class="nav-link" data-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true">
@DisplayHeading(tabPanel.Name, tabPanel.Heading)
</a>
}

View File

@ -55,7 +55,7 @@ namespace Oqtane.Modules
var interop = new Interop(JSRuntime);
foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
{
await interop.LoadScript(resource.Url);
await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? "");
}
}
}

View File

@ -1,5 +1,6 @@
@namespace Oqtane.Themes.BlazorTheme
@inherits ThemeBase
@implements IThemeControl
<div class="breadcrumbs">
<Breadcrumbs />
@ -30,6 +31,16 @@
public override List<Resource> Resources => new List<Resource>()
{
new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", Integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" }
};
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var interop = new Interop(JSRuntime);
await interop.LoadBootstrapJS();
}
}
}

View File

@ -1,5 +1,6 @@
@namespace Oqtane.Themes.OqtaneTheme
@inherits ThemeBase
@implements IThemeControl
<main role="main">
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
@ -23,10 +24,16 @@
public override List<Resource> Resources => new List<Resource>()
{
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "BootswatchCyborg.css" },
// remote stylesheets can be linked using the format below, however we want the default theme to display properly in local development scenarios where an Internet connection is not available
//new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" }
};
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var interop = new Interop(JSRuntime);
await interop.LoadBootstrapJS();
}
}
}

View File

@ -9,7 +9,7 @@ using System.Threading.Tasks;
namespace Oqtane.Themes
{
public abstract class ThemeBase : ComponentBase, IThemeControl
public abstract class ThemeBase : ComponentBase
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
@ -34,7 +34,7 @@ namespace Oqtane.Themes
var interop = new Interop(JSRuntime);
foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
{
await interop.LoadScript(resource.Url);
await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? "");
}
}
}

View File

@ -117,11 +117,23 @@ namespace Oqtane.UI
}
}
public async Task LoadScript(string path)
public async Task LoadScript(string url, string integrity, string crossorigin)
{
try
{
await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadScript", path);
await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadScript", url, integrity, crossorigin);
}
catch
{
// ignore exception
}
}
public async Task LoadBootstrapJS()
{
try
{
await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadBootstrapJS");
}
catch
{