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

Merge pull request #1554 from leigh-pointer/OffCanvas

Browse Source 
ConltolPanel to use Bootstrap Offcanvas component
This commit is contained in:
Shaun Walker 2021-07-18 10:42:09 -04:00 committed by GitHub
commit 0e6baae366
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
View File

@ -14,12 +14,12 @@
@if (_moduleDefinitions != null && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, PageState.Page.Permissions))
{
<div class="app-controlpanel" style="@_display">
<div class="offcanvas offcanvas-end" tabindex="-1" data-bs-scroll="true" data-bs-backdrop="false" id="offcanvasControlPanel" aria-labelledby="offcanvasControlPanelLabel">
<div class="@CardClass">
<div class="@HeaderClass d-flex">
<span class="font-weight-bold">@Localizer["ControlPanel"]</span>
<div class="ms-auto">
<button type="button" class="btn-close" aria-label="Close" @onclick="HideControlPanel"></button>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="offcanvas"></button>
</div>
</div>
<div class="@BodyClass">
@ -41,8 +41,8 @@
</div>
<div class="row d-flex">
<div class="col d-flex justify-content-between">
<button type="button" class="btn btn-secondary col-3" @onclick=@(async () => Navigate("Add"))>@SharedLocalizer["Add"]</button>
<button type="button" class="btn btn-secondary col-3" @onclick=@(async () => Navigate("Edit"))>@SharedLocalizer["Edit"]</button>
<button type="button" class="btn btn-secondary col-3" data-bs-dismiss="offcanvas" @onclick=@(async () => Navigate("Add"))>@SharedLocalizer["Add"]</button>
<button type="button" class="btn btn-secondary col-3" data-bs-dismiss="offcanvas" @onclick=@(async () => Navigate("Edit"))>@SharedLocalizer["Edit"]</button>
<button type="button" class="btn btn-danger col-3" @onclick="ConfirmDelete">@SharedLocalizer["Delete"]</button>
</div>
</div>
@ -86,7 +86,7 @@
<hr class="app-rule" />
<div class="row">
<div class="col text-center">
<label Class="col-sm-3" For="Module" >@Localizer["Module.Manage"] </label>
<label for="Module" class="control-label">@Localizer["Module.Manage"] </label>
<select class="form-select" @bind="@ModuleType">
<option value="new">@Localizer["Module.AddNew"]</option>
<option value="existing">@Localizer["Module.AddExisting"]</option>
@ -152,7 +152,7 @@
</div>
<div class="row">
<div class="col text-center">
<label Class="col-sm-3" For="Title">@Localizer["Title"] </label>
<label for="Title" class="control-label">@Localizer["Title"] </label>
<input type="text" name="Title" class="form-control" @bind="@Title" />
</div>
</div>
@ -160,7 +160,7 @@
{
<div class="row">
<div class="col text-center">
<label Class="col-sm-3" For="Pane">@Localizer["Pane"] </label>
<label for="Pane" class="control-label">@Localizer["Pane"] </label>
<select class="form-select" @bind="@Pane">
@foreach (string pane in PageState.Page.Panes)
{
@ -172,7 +172,7 @@
}
<div class="row">
<div class="col text-center">
<label Class="col-sm-3" For="Container">@Localizer["Container"] </label>
<label for="Container" class="control-label">@Localizer["Container"] </label>
<select class="form-select" @bind="@ContainerType">
@foreach (var container in _containers)
{
@ -217,7 +217,8 @@
@if (UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, PageState.Page.Permissions))
{
<button type="button" class="btn @ButtonClass" @onclick="ShowControlPanel">
<button class="btn @ButtonClass" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasControlPanel" aria-controls="offcanvasControlPanel">
<span class="oi oi-cog"></span>
</button>
}
@ -231,7 +232,6 @@
private List<Page> _pages = new List<Page>();
private List<Module> _modules = new List<Module>();
private List<ThemeControl> _containers = new List<ThemeControl>();
private string _display = "display: none;";
private string _category = "Common";
protected string PageId { get; private set; } = "-";
@ -445,23 +445,9 @@
}
}
private void ShowControlPanel()
{
Message = "";
_display = "width: 25%; min-width: 375px;";
StateHasChanged();
}
private void HideControlPanel()
{
Message = "";
_display = "width: 0%;";
StateHasChanged();
}
private void Navigate(string location)
{
HideControlPanel();
//HideControlPanel();
Module module;
switch (location)
{

4
Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
View File

@ -73,10 +73,6 @@
margin-bottom: 0;
}
.app-controlpanel {
z-index: 9999;
}
.app-menu .nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;

18
Oqtane.Server/wwwroot/css/app.css
View File

@ -10,24 +10,6 @@ app {
flex-direction: column;
}
/* Control Panel */
.app-controlpanel {
height: 100%;
width: 0%;
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
right: 0;
top: 0;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.app-controlpanel .card-body {
position: relative;
width: 100%; /* 100% width */
}
/* Admin Modal */
.app-admin-modal .modal {
position: fixed; /* Stay in place */