From 3521dd41cd9544c2d71eea0ff91421ba6c52289d Mon Sep 17 00:00:00 2001
From: Leigh <Leigh.Pointer@outlook.com>
Date: Wed, 14 Jul 2021 10:18:39 +0200
Subject: [PATCH 1/2] ConltolPanel to use Bootstrap Offcanvas component

---
 .../Themes/Controls/Theme/ControlPanel.razor  | 35 ++++++-------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
index 2589647f..ec71feb5 100644
--- a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
@@ -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>
 }
@@ -445,23 +446,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)
         {

From 437e9ee43b73cef4495905fe12b0bc49707222d7 Mon Sep 17 00:00:00 2001
From: Leigh <Leigh.Pointer@outlook.com>
Date: Thu, 15 Jul 2021 16:28:12 +0200
Subject: [PATCH 2/2] Modifcations for ControlPanel BS5

current styles in app.css and theme.css for app-controlpanel removed as no longer needed.

Removed the _display var as that is no longer beign used.
---
 .../Themes/Controls/Theme/ControlPanel.razor   |  1 -
 .../Themes/Oqtane.Themes.BlazorTheme/Theme.css |  4 ----
 Oqtane.Server/wwwroot/css/app.css              | 18 ------------------
 3 files changed, 23 deletions(-)

diff --git a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
index ec71feb5..b04330a5 100644
--- a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
@@ -232,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; } = "-";
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
index a9b0be4d..a73e6b33 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
+++ b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -73,10 +73,6 @@
     margin-bottom: 0;
 }
 
-.app-controlpanel {
-    z-index: 9999;
-}
-
 .app-menu .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;
diff --git a/Oqtane.Server/wwwroot/css/app.css b/Oqtane.Server/wwwroot/css/app.css
index c41398ec..a3559989 100644
--- a/Oqtane.Server/wwwroot/css/app.css
+++ b/Oqtane.Server/wwwroot/css/app.css
@@ -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 */