resolve #566 by moving Bootstrap declaration into theme
This commit is contained in:
@ -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>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -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>
|
||||
}
|
||||
|
@ -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 ?? "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 ?? "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
{
|
||||
|
Reference in New Issue
Block a user