From d8b15e7a4e9d85ccf4538d0b307dce6520288a48 Mon Sep 17 00:00:00 2001 From: Shaun Walker Date: Fri, 3 Apr 2020 15:04:25 -0400 Subject: [PATCH] Components based on Bootstrap4 for Sections and TabStrip to increase productivity and promote uniformity in Module UIs (#333) * upgrade to .NET Core 3.2 Preview 3 and fixes for issues created by #314 * Components based on Bootstrap4 for Sections and TabStrip to increase productivity and promote uniformity in Module UIs --- .../Modules/Admin/RecycleBin/Index.razor | 130 ++++++++---------- Oqtane.Client/Modules/Admin/Site/Index.razor | 16 +-- Oqtane.Client/Modules/Controls/Label.razor | 2 +- Oqtane.Client/Modules/Controls/Section.razor | 44 ++++++ .../Modules/Controls/TabControl.razor | 44 ------ Oqtane.Client/Modules/Controls/TabPanel.razor | 24 ++-- Oqtane.Client/Modules/Controls/TabStrip.razor | 56 ++++++++ 7 files changed, 177 insertions(+), 139 deletions(-) create mode 100644 Oqtane.Client/Modules/Controls/Section.razor delete mode 100644 Oqtane.Client/Modules/Controls/TabControl.razor create mode 100644 Oqtane.Client/Modules/Controls/TabStrip.razor diff --git a/Oqtane.Client/Modules/Admin/RecycleBin/Index.razor b/Oqtane.Client/Modules/Admin/RecycleBin/Index.razor index 27978203..d3955307 100644 --- a/Oqtane.Client/Modules/Admin/RecycleBin/Index.razor +++ b/Oqtane.Client/Modules/Admin/RecycleBin/Index.razor @@ -5,80 +5,62 @@ @inject IModuleService ModuleService @inject IPageService PageService -
-
- - - -
-
- @if (_pages == null) - { -
-

No Deleted Pages

- } - else - { - -
-   -   - Name - Deleted By - Deleted On -
- - - - @context.Name - @context.DeletedBy - @context.DeletedOn - - - } -
-
- @if (_modules == null) - { -
-

No Deleted Modules

- } - else - { - -
-   -   - Page - Module - Deleted By - Deleted On -
- - - - @PageState.Pages.Find(item => item.PageId == context.PageId).Name - @context.Title - @context.DeletedBy - @context.DeletedOn - - - } -
-
-
-
+ + + @if (_pages == null) + { +
+

No Deleted Pages

+ } + else + { + +
+   +   + Name + Deleted By + Deleted On +
+ + + + @context.Name + @context.DeletedBy + @context.DeletedOn + + + } + + + @if (_modules == null) + { +
+

No Deleted Modules

+ } + else + { + +
+   +   + Page + Module + Deleted By + Deleted On +
+ + + + @PageState.Pages.Find(item => item.PageId == context.PageId).Name + @context.Title + @context.DeletedBy + @context.DeletedOn + + + } + + @code { private List _pages; diff --git a/Oqtane.Client/Modules/Admin/Site/Index.razor b/Oqtane.Client/Modules/Admin/Site/Index.razor index afcf50ab..bb188e8d 100644 --- a/Oqtane.Client/Modules/Admin/Site/Index.razor +++ b/Oqtane.Client/Modules/Admin/Site/Index.razor @@ -123,10 +123,7 @@ - -
+
@@ -169,12 +166,8 @@
-
- - -
+ +
-
@@ -203,9 +196,8 @@
-
+
diff --git a/Oqtane.Client/Modules/Controls/Label.razor b/Oqtane.Client/Modules/Controls/Label.razor index a643e118..0826e0cb 100644 --- a/Oqtane.Client/Modules/Controls/Label.razor +++ b/Oqtane.Client/Modules/Controls/Label.razor @@ -15,7 +15,7 @@ else private string _closeLabel = ""; [Parameter] - public RenderFragment ChildContent { get; set; } // required - the title of the label + public RenderFragment ChildContent { get; set; } [Parameter] public string For { get; set; } // optional - the id of the associated input control for accessibility diff --git a/Oqtane.Client/Modules/Controls/Section.razor b/Oqtane.Client/Modules/Controls/Section.razor new file mode 100644 index 00000000..6921f933 --- /dev/null +++ b/Oqtane.Client/Modules/Controls/Section.razor @@ -0,0 +1,44 @@ +@namespace Oqtane.Modules.Controls +@inherits ModuleBase + +
+
+ +
@_heading
+ +
+
+ +   + +
+
+
+
+
+
+ @ChildContent +
+ +@code { + private string _heading = string.Empty; + private string _expanded = string.Empty; + + [Parameter] + public RenderFragment ChildContent { get; set; } + + [Parameter] + public string Name { get; set; } // required - the name of the section + + [Parameter] + public string Heading { get; set; } // optional - will default to Name if not provided + + [Parameter] + public string Expanded { get; set; } // optional - will default to false if not provided + + protected override void OnInitialized() + { + _heading = (!string.IsNullOrEmpty(Heading)) ? Heading : Name; + _expanded = (!string.IsNullOrEmpty(Expanded)) ? Expanded : "false"; + } +} diff --git a/Oqtane.Client/Modules/Controls/TabControl.razor b/Oqtane.Client/Modules/Controls/TabControl.razor deleted file mode 100644 index c65124aa..00000000 --- a/Oqtane.Client/Modules/Controls/TabControl.razor +++ /dev/null @@ -1,44 +0,0 @@ -@namespace Oqtane.Modules.Controls -@inherits ModuleBase - - -
- @foreach (TabPanel tabPanel in _tabPanels) - { - - } -
- @ChildContent - - -@code { - private List _tabPanels = new List(); - - // Next line is needed so we are able to add components inside - [Parameter] - public RenderFragment ChildContent { get; set; } - - public TabPanel ActiveTabPanel { get; set; } - - internal void AddTabPanel(TabPanel tabPanel) - { - _tabPanels.Add(tabPanel); - if (_tabPanels.Count == 1) - ActiveTabPanel = tabPanel; - StateHasChanged(); - } - - private string GetButtonClass(TabPanel tabPanel) - => tabPanel == ActiveTabPanel - ? "btn-primary" - : "btn-secondary"; - - private void ActivateTabPanel(TabPanel tabPanel) - { - ActiveTabPanel = tabPanel; - } -} diff --git a/Oqtane.Client/Modules/Controls/TabPanel.razor b/Oqtane.Client/Modules/Controls/TabPanel.razor index 475d6258..d09ff53f 100644 --- a/Oqtane.Client/Modules/Controls/TabPanel.razor +++ b/Oqtane.Client/Modules/Controls/TabPanel.razor @@ -1,27 +1,35 @@ @namespace Oqtane.Modules.Controls @inherits ModuleBase -@if (Parent.ActiveTabPanel == (TabPanel)(object)this) +@if (Name == Parent.ActiveTab) { - @ChildContent +
+ @ChildContent +
+} +else +{ +
+ @ChildContent +
} @code { [CascadingParameter] - private TabControl Parent { get; set; } + private TabStrip Parent { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] - public string Text { get; set; } + public string Name { get; set; } // required - name of the TabPanel + + [Parameter] + public string Heading { get; set; } // optional - defaults to name if not specified protected override void OnInitialized() { - if (Parent == null) - throw new ArgumentNullException(nameof(Parent), "TabPanel must exist within a TabControl"); - base.OnInitialized(); - Parent.AddTabPanel((TabPanel)(object)this); + Parent.AddTabPanel((TabPanel)this); } } diff --git a/Oqtane.Client/Modules/Controls/TabStrip.razor b/Oqtane.Client/Modules/Controls/TabStrip.razor new file mode 100644 index 00000000..10527d0f --- /dev/null +++ b/Oqtane.Client/Modules/Controls/TabStrip.razor @@ -0,0 +1,56 @@ +@namespace Oqtane.Modules.Controls +@inherits ModuleBase + + +
+
+ +
+
+ @ChildContent +
+
+
+ + +@code { + private List _tabPanels = new List(); + + [Parameter] + public RenderFragment ChildContent { get; set; } // contains the TabPanels + + [Parameter] + public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified + + internal void AddTabPanel(TabPanel tabPanel) + { + _tabPanels.Add(tabPanel); + if (string.IsNullOrEmpty(ActiveTab)) + { + ActiveTab = tabPanel.Name; + } + } + + private string DisplayHeading(string Name, string Heading) + { + return (string.IsNullOrEmpty(Heading)) ? Name : Heading; + } +}