Merge pull request #1228 from sbwalker/dev

enhanced ModuleActions component to display panes in a submenu, added more containers to Oqtane theme, added more panes to MultiPane layout, added module outline in edit mode to distinguish modules in panes, consolidated to use a single default AdminPane named "Content", fixed bug related to custom Admin Container behavior
oqtane · Apr 6, 2021 · 0bf85a7 · 0bf85a7
2 parents 224f0c3 + d05747a
commit 0bf85a7
Show file tree

Hide file tree

Showing 24 changed files with 287 additions and 97 deletions.
diff --git a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
@@ -1,4 +1,4 @@
-@namespace Oqtane.Themes.BlazorTheme
+@namespace Oqtane.Themes.BlazorTheme
 @inherits ThemeBase
 
 <div class="breadcrumbs">
@@ -19,9 +19,6 @@
         <div class="row px-4">
             <Pane Name="Content" />
         </div>
-        <div class="row px-4">
-            <Pane Name="Admin" />
-        </div>
     </div>
 </div>
 

diff --git a/Oqtane.Client/Themes/Controls/ModuleActions.razor b/Oqtane.Client/Themes/Controls/ModuleActions.razor
@@ -2,33 +2,41 @@
 @inherits ModuleActionsBase 
 @attribute [OqtaneIgnore]
 
-@if (PageState.EditMode && UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions))
+@if (PageState.EditMode && UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions) && PageState.Action == Constants.DefaultAction)
 {
     <div class="app-moduleactions">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
-        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 37px, 0px);">
-            @foreach (var action in Actions)
+        <ul class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 37px, 0px);">
+            @foreach (var action in Actions.Where(item => !item.Name.Contains("Pane")))
             {
                 if (string.IsNullOrEmpty(action.Name))
                 {
-                    <div class="dropdown-divider"></div>
+                    <li class="dropdown-divider"></li>
                 }
                 else
                 {
-                    <a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
-                        @if (string.IsNullOrEmpty(action.Icon))
-                        {
-                            @((MarkupString) "&nbsp;&nbsp;");
-                        }
-                        else
-                        {
-                            <span class="@action.Icon" aria-hidden="true"></span>
-                        }
-                        &nbsp;
-                        @action.Name
-                    </a>
+                    <li>
+                        <a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
+                            <span class="@action.Icon" aria-hidden="true"></span>&nbsp;@action.Name
+                        </a>
+                    </li>
                 }
             }
-        </div>
+            <li class="dropdown-submenu">
+                <a class="dropdown-item" onclick="return subMenu(this)">
+                    <span class="@Icons.AccountLogin" aria-hidden="true"></span>&nbsp;Move To &gt;
+                </a>
+                <ul class="dropdown-menu">
+                    @foreach (var action in Actions.Where(item => item.Name.Contains("Pane")))
+                    {
+                        <li>
+                            <a class="dropdown-item" @onclick="(async () => await ModuleAction(action))">
+                                <span class="@action.Icon" aria-hidden="true"></span>&nbsp;@action.Name
+                            </a>
+                        </li>
+                    }
+                </ul>
+            </li>
+        </ul>
     </div>
 }
diff --git a/Oqtane.Client/Themes/Controls/ModuleActionsBase.cs b/Oqtane.Client/Themes/Controls/ModuleActionsBase.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
@@ -76,7 +76,7 @@ protected virtual List<ActionViewModel> GetActions()
                 {
                     if (pane != ModuleState.Pane)
                     {
-                        actionList.Add(new ActionViewModel {Icon = Icons.AccountLogin, Name = "Move To " + pane + " Pane", Action = async (s, m) => await MoveToPane(s, pane, m)});
+                        actionList.Add(new ActionViewModel {Icon = Icons.AccountLogin, Name = pane + " Pane", Action = async (s, m) => await MoveToPane(s, pane, m)});
                     }
                 }
             }

diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/DefaultNoTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/DefaultNoTitle.razor
@@ -0,0 +1,10 @@
+@namespace Oqtane.Themes.OqtaneTheme
+@inherits ContainerBase
+
+<div class="container">
+    <ModuleActions /><ModuleInstance />
+</div>
+
+@code {
+    public override string Name => "No Background Color - No Title";
+}
diff --git a/...es/OqtaneTheme/Containers/Container.razor → ...OqtaneTheme/Containers/DefaultTitle.razor b/...es/OqtaneTheme/Containers/Container.razor → ...OqtaneTheme/Containers/DefaultTitle.razor
@@ -1,5 +1,6 @@
-@namespace Oqtane.Themes.OqtaneTheme
+@namespace Oqtane.Themes.OqtaneTheme
 @inherits ContainerBase
+
 <div class="container">
     <div class="row px-4">
         <div class="d-flex flex-nowrap">
@@ -15,5 +16,5 @@
 </div>
 
 @code {
-    public override string Name => "Standard Header";
+    public override string Name => "No Background Color - With Title";
 }
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/NoTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/NoTitle.razor
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryNoTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryNoTitle.razor
@@ -0,0 +1,10 @@
+@namespace Oqtane.Themes.OqtaneTheme
+@inherits ContainerBase
+
+<div class="container bg-primary">
+    <ModuleActions /><ModuleInstance />
+</div>
+
+@code {
+    public override string Name => "Primary Background Color - No Title";
+}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/PrimaryTitle.razor
@@ -0,0 +1,20 @@
+@namespace Oqtane.Themes.OqtaneTheme
+@inherits ContainerBase
+
+<div class="container bg-primary">
+    <div class="row px-4">
+        <div class="d-flex flex-nowrap">
+            <ModuleActions /><h2><ModuleTitle /></h2>
+        </div>
+        <hr class="app-rule" />
+    </div>
+    <div class="row px-4">
+        <div class="container">
+            <ModuleInstance />
+        </div>
+    </div>
+</div>
+
+@code {
+    public override string Name => "Primary Background Color - With Title";
+}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryNoTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryNoTitle.razor
@@ -0,0 +1,10 @@
+@namespace Oqtane.Themes.OqtaneTheme
+@inherits ContainerBase
+
+<div class="container bg-secondary">
+    <ModuleActions /><ModuleInstance />
+</div>
+
+@code {
+    public override string Name => "Secondary Background Color - No Title";
+}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryTitle.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/SecondaryTitle.razor
@@ -0,0 +1,20 @@
+@namespace Oqtane.Themes.OqtaneTheme
+@inherits ContainerBase
+
+<div class="container bg-secondary">
+    <div class="row px-4">
+        <div class="d-flex flex-nowrap">
+            <ModuleActions /><h2><ModuleTitle /></h2>
+        </div>
+        <hr class="app-rule" />
+    </div>
+    <div class="row px-4">
+        <div class="container">
+            <ModuleInstance />
+        </div>
+    </div>
+</div>
+
+@code {
+    public override string Name => "Secondary Background Color - With Title";
+}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Layouts/MultiPane.razor b/Oqtane.Client/Themes/OqtaneTheme/Layouts/MultiPane.razor
@@ -1,20 +1,90 @@
-@namespace Oqtane.Themes.OqtaneTheme
+@namespace Oqtane.Themes.OqtaneTheme
 @inherits LayoutBase
 
-<div class="row px-4">
-    <Pane Name="Top" />
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <Pane Name="Content" />
+        </div>
+    </div>
 </div>
-<div class="row px-4">
-    <div class="col-sm"><Pane Name="Left" /></div>
-    <div class="col-sm"><Pane Name="Content" /></div>
-    <div class="col-sm"><Pane Name="Right" /></div>
-</div>
-<div class="row px-4">
-    <Pane Name="Bottom" />
+<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>
+<Pane Name="Bottom Full Width" />
 
 @code {
     public override string Name => "Multiple Panes";
 
-    public override string Panes => "Top,Left,Content,Right,Bottom";
+    public override string Panes => "Content, 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";
 }
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Layouts/SinglePane.razor b/Oqtane.Client/Themes/OqtaneTheme/Layouts/SinglePane.razor
@@ -1,12 +1,16 @@
-@namespace Oqtane.Themes.OqtaneTheme
+@namespace Oqtane.Themes.OqtaneTheme
 @inherits LayoutBase
 
-<div class="row px-4">
-    <Pane Name="Content" />
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <Pane Name="Content" />
+        </div>
+    </div>
 </div>
 
 @code {
     public override string Name => "Single Pane";
 
     public override string Panes => "Content";
-}
+}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor b/Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor
@@ -1,4 +1,4 @@
-@namespace Oqtane.Themes.OqtaneTheme
+@namespace Oqtane.Themes.OqtaneTheme
 @inherits ThemeBase
 
 <main role="main">
@@ -8,16 +8,11 @@
             <div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
         </div>
     </nav>
-    <div class="content container">
-        <PaneLayout />
-        <div class="row px-4">
-            <Pane Name="Admin" />
-        </div>
-    </div>
+    <PaneLayout />
 </main>
 
 @code {
-    public override string Name => "Default";
+    public override string Name => "Default Theme";
 
     public override string Panes => string.Empty;
 

diff --git a/Oqtane.Client/UI/ContainerBuilder.razor b/Oqtane.Client/UI/ContainerBuilder.razor
@@ -1,11 +1,21 @@
 @namespace Oqtane.UI
 
 <CascadingValue Value="@_moduleState" IsFixed="true">
-    @DynamicComponent
+    @if (_useadminborder)
+    {
+        <div class="app-pane-admin-border">
+            @DynamicComponent
+        </div>
+    }
+    else
+    {
+        @DynamicComponent
+    }
 </CascadingValue>
 
 @code {
     private Module _moduleState;
+    private bool _useadminborder = false;
 
     [CascadingParameter]
     protected PageState PageState { get; set; }
@@ -24,6 +34,15 @@
             container = (!string.IsNullOrEmpty(PageState.Site.AdminContainerType)) ? PageState.Site.AdminContainerType : Constants.DefaultAdminContainer;
         }
 
+        if (PageState.EditMode && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, PageState.Page.Permissions) && PageState.Action == Constants.DefaultAction)
+        {
+            _useadminborder = true;
+        }
+        else
+        {
+            _useadminborder = false;
+        }
+
         DynamicComponent = builder =>
         {
             Type containerType = Type.GetType(container);