Added ThemeSettings and ContainerSettings to Default Theme Template
Added ThemeSettings and ContainerSettings to Default Theme Template to Demonstrate how these features could be added to developers designing a theme as requested and discussed in Issue #2633
This commit is contained in:
vnetonline
@ -1,100 +1,131 @@
|
||||
@namespace [Owner].Theme.[Theme]
|
||||
@inherits ThemeBase
|
||||
@inject ISettingService SettingService
|
||||
|
||||
<main role="main">
|
||||
<nav class="navbar navbar-dark bg-primary fixed-top">
|
||||
<Logo /><Menu Orientation="Horizontal" />
|
||||
<div class="controls ms-auto">
|
||||
<div class="controls-group"><UserProfile /> <Login /> <ControlPanel ButtonClass="btn-outline-light" /></div>
|
||||
<div class="controls-group"><UserProfile ShowRegister="@_register" /> <Login ShowLogin="@_login" /> <ControlPanel ButtonClass="btn-outline-light" /></div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<Pane Name="@PaneNames.Admin" />
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<Pane Name="@PaneNames.Admin" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Pane Name="Top Full Width" />
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<Pane Name="Top 100%" />
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<Pane Name="Left 50%" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Pane Name="Right 50%" />
|
||||
</div>
|
||||
<Pane Name="Bottom Full Width" />
|
||||
@if (_footer)
|
||||
{
|
||||
<div style="clear: both; height: 30px;"></div>
|
||||
<div class="bg-primary fixed-bottom footer">
|
||||
<Pane Name="Footer" />
|
||||
</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" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<Pane Name="Footer" />
|
||||
}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@code {
|
||||
public override string Name => "Theme1";
|
||||
|
||||
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";
|
||||
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";
|
||||
|
||||
private bool _login = true;
|
||||
private bool _register = true;
|
||||
private bool _footer = false;
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
try
|
||||
{
|
||||
var settings = SettingService.MergeSettings(PageState.Site.Settings, PageState.Page.Settings);
|
||||
_login = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Login", "true"));
|
||||
_register = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Register", "true"));
|
||||
_footer = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Footer", "false"));
|
||||
}
|
||||
catch
|
||||
{
|
||||
// error loading theme settings
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
160
Oqtane.Server/wwwroot/Themes/Templates/External/Client/Themes/ThemeSettings.razor
vendored
Normal file
160
Oqtane.Server/wwwroot/Themes/Templates/External/Client/Themes/ThemeSettings.razor
vendored
Normal file
@ -0,0 +1,160 @@
|
||||
@namespace [Owner].Theme.[Theme]
|
||||
@inherits ModuleBase
|
||||
@implements Oqtane.Interfaces.ISettingsControl
|
||||
@inject ISettingService SettingService
|
||||
@inject IStringLocalizer<ThemeSettings> Localizer
|
||||
@inject IStringLocalizer<SharedResources> SharedLocalizer
|
||||
@attribute [OqtaneIgnore]
|
||||
|
||||
<div class="container">
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="scope" ResourceKey="Scope" ResourceType="@resourceType" HelpText="Specify if the settings are applicable to this page or the entire site.">Setting Scope:</Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="scope" class="form-select" value="@_scope" @onchange="(e => ScopeChanged(e))">
|
||||
@if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
|
||||
{
|
||||
<option value="site">@Localizer["Site"]</option>
|
||||
}
|
||||
<option value="page">@Localizer["Page"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="login" ResourceKey="Login" ResourceType="@resourceType" HelpText="Specify if a Login option should be displayed. Note that this option does not prevent the login page from being accessible via a direct url.">Show Login?</Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="login" class="form-select" @bind="@_login">
|
||||
<option value="-"><@SharedLocalizer["Not Specified"]></option>
|
||||
<option value="true">@SharedLocalizer["Yes"]</option>
|
||||
<option value="false">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="register" ResourceKey="Register" ResourceType="@resourceType" HelpText="Specify if a Register option should be displayed. Note that this option is also dependent on the Allow Registration option in Site Settings.">Show Register?</Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="register" class="form-select" @bind="@_register">
|
||||
<option value="-"><@SharedLocalizer["Not Specified"]></option>
|
||||
<option value="true">@SharedLocalizer["Yes"]</option>
|
||||
<option value="false">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1 align-items-center">
|
||||
<Label Class="col-sm-3" For="footer" ResourceKey="Footer" ResourceType="@resourceType" HelpText="Specify if a Footer pane should always be displayed in a fixed location at the bottom of the page">Display Fixed Footer?</Label>
|
||||
<div class="col-sm-9">
|
||||
<select id="footer" class="form-select" @bind="@_footer">
|
||||
<option value="-"><@SharedLocalizer["Not Specified"]></option>
|
||||
<option value="true">@SharedLocalizer["Yes"]</option>
|
||||
<option value="false">@SharedLocalizer["No"]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private int pageId = -1;
|
||||
private string resourceType = "[Owner].Theme.[Theme].ThemeSettings, [Owner].Theme.[Theme].Client.Oqtane"; // for localization
|
||||
private string _scope = "page";
|
||||
private string _login = "-";
|
||||
private string _register = "-";
|
||||
private string _footer = "-";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (PageState.QueryString.ContainsKey("id"))
|
||||
{
|
||||
pageId = int.Parse(PageState.QueryString["id"]);
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
await LoadSettings();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
await logger.LogError(ex, "Error Loading Settings {Error}", ex.Message);
|
||||
AddModuleMessage("Error Loading Settings", MessageType.Error);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task LoadSettings()
|
||||
{
|
||||
if (_scope == "site")
|
||||
{
|
||||
var settings = PageState.Site.Settings;
|
||||
_login = SettingService.GetSetting(settings, GetType().Namespace + ":Login", "true");
|
||||
_register = SettingService.GetSetting(settings, GetType().Namespace + ":Register", "true");
|
||||
_footer = SettingService.GetSetting(settings, GetType().Namespace + ":Footer", "false");
|
||||
}
|
||||
else
|
||||
{
|
||||
var settings = await SettingService.GetPageSettingsAsync(pageId);
|
||||
settings = SettingService.MergeSettings(PageState.Site.Settings, settings);
|
||||
_login = SettingService.GetSetting(settings, GetType().Namespace + ":Login", "-");
|
||||
_register = SettingService.GetSetting(settings, GetType().Namespace + ":Register", "-");
|
||||
_footer = SettingService.GetSetting(settings, GetType().Namespace + ":Footer", "-");
|
||||
}
|
||||
await Task.Yield();
|
||||
}
|
||||
|
||||
private async Task ScopeChanged(ChangeEventArgs eventArgs)
|
||||
{
|
||||
try
|
||||
{
|
||||
_scope = (string)eventArgs.Value;
|
||||
await LoadSettings();
|
||||
StateHasChanged();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
await logger.LogError(ex, "Error Loading Settings {Error}", ex.Message);
|
||||
AddModuleMessage("Error Loading Settings", MessageType.Error);
|
||||
}
|
||||
}
|
||||
|
||||
public async Task UpdateSettings()
|
||||
{
|
||||
try
|
||||
{
|
||||
if (_scope == "site")
|
||||
{
|
||||
var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
|
||||
if (_login != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Login", _login, true);
|
||||
}
|
||||
if (_register != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Register", _register, true);
|
||||
}
|
||||
if (_footer != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer, true);
|
||||
}
|
||||
await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
|
||||
}
|
||||
else
|
||||
{
|
||||
var settings = await SettingService.GetPageSettingsAsync(pageId);
|
||||
if (_login != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Login", _login);
|
||||
}
|
||||
if (_register != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Register", _register);
|
||||
}
|
||||
if (_footer != "-")
|
||||
{
|
||||
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
|
||||
}
|
||||
await SettingService.UpdatePageSettingsAsync(settings, pageId);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
await logger.LogError(ex, "Error Saving Settings {Error}", ex.Message);
|
||||
AddModuleMessage("Error Saving Settings", MessageType.Error);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user