Added support for friendly names and thumbnails in theme, layout, and container components. Added fallback support during loading for themes, layout, and containers.

Oqtane.Client/Themes/ContainerBase.cs

@@ -17,6 +17,8 @@ namespace Oqtane.Themes
         [CascadingParameter]
         protected Module ModuleState { get; set; }
 
+        public virtual string Name { get; set; }
+        public virtual string Thumbnail { get; set; }
 
         public string ThemePath()
         {

Oqtane.Client/Themes/Controls/ControlPanel.razor

@@ -161,9 +161,9 @@
                     <div class="col text-center">
                         <label for="Container" class="control-label">Container: </label>
                         <select class="form-control" @bind="@ContainerType">
-                            @foreach (KeyValuePair<string, string> container in _containers)
+                            @foreach (var container in _containers)
                             {
-                                <option value="@container.Key">@container.Value</option>
+                                <option value="@container.TypeName">@container.Name</option>
                             }
                         </select>
                     </div>
@@ -218,7 +218,7 @@
     private List<ModuleDefinition> _moduleDefinitions;
     private List<Page> _pages = new List<Page>();
     private List<Module> _modules = new List<Module>();
-    private Dictionary<string, string> _containers = new Dictionary<string, string>();
+    private List<ThemeControl> _containers = new List<ThemeControl>();
     private string _display = "display: none;";
     private string _category = "Common";
 
@@ -301,7 +301,7 @@
             var panes = PageState.Page.Panes;
             Pane = panes.Count() == 1 ? panes.SingleOrDefault() : "";
             var themes = await ThemeService.GetThemesAsync();
-            _containers = ThemeService.GetContainerTypes(themes, PageState.Page.ThemeType);
+            _containers = ThemeService.GetContainerControls(themes, PageState.Page.ThemeType);
             ContainerType = PageState.Site.DefaultContainerType;
 
             _allModuleDefinitions = await ModuleDefinitionService.GetModuleDefinitionsAsync(PageState.Site.SiteId);

Oqtane.Client/Themes/IContainerControl.cs

@@ -2,5 +2,7 @@
 {
     public interface IContainerControl
     {
+        string Name { get; } // friendly name for a container
+        string Thumbnail { get; } // screen shot of a container - assumed to be in the ThemePath() folder
     }
 }

Oqtane.Client/Themes/ILayoutControl.cs

@@ -2,7 +2,9 @@
 {
     public interface ILayoutControl
     {
-        string Panes { get; } // identifies all panes in a theme ( delimited by ";" ) 
+        string Name { get; } // friendly name for a layout
+        string Thumbnail { get; } // screen shot of a layout - assumed to be in the ThemePath() folder
+        string Panes { get; } // identifies all panes in a theme ( delimited by "," or ";" ) 
 
     }
 }

Oqtane.Client/Themes/LayoutBase.cs

@@ -8,6 +8,8 @@ namespace Oqtane.Themes
     {
         [CascadingParameter]
         protected PageState PageState { get; set; }
+        public virtual string Name { get; set; }
+        public virtual string Thumbnail { get; set; }
         public virtual string Panes { get; set; }
 
         public string LayoutPath()

Oqtane.Client/Themes/OqtaneTheme/Container.razor

@@ -12,4 +12,8 @@
             <ModuleInstance />
         </div>
     </div>
-</div>
+</div>
+
+@code {
+    public override string Name => "Standard Header";
+}

Oqtane.Client/Themes/OqtaneTheme/Default.razor

@@ -17,6 +17,8 @@
 </main>
 
 @code {
+    public override string Name => "Default";
+
     public override string Panes => string.Empty;
 
     public override List<Resource> Resources => new List<Resource>()

Oqtane.Client/Themes/OqtaneTheme/MultiPane.razor

@@ -14,5 +14,7 @@
 </div>
 
 @code {
-    public override string Panes => "Top;Left;Content;Right;Bottom";
+    public override string Name => "Multiple Panes";
+
+    public override string Panes => "Top,Left,Content,Right,Bottom";
 }

Oqtane.Client/Themes/OqtaneTheme/NoTitle.razor

@@ -6,4 +6,8 @@
         <ModuleActions />
     }
     <ModuleInstance />
-</div>
+</div>
+
+@code {
+    public override string Name => "No Header";
+}

Oqtane.Client/Themes/OqtaneTheme/SinglePane.razor

@@ -6,5 +6,7 @@
 </div>
 
 @code {
+    public override string Name => "Single Pane";
+
     public override string Panes => "Content";
 }

Oqtane.Client/Themes/ThemeBase.cs

@@ -17,6 +17,8 @@ namespace Oqtane.Themes
 
         [CascadingParameter]
         protected PageState PageState { get; set; }
+        public virtual string Name { get; set; }
+        public virtual string Thumbnail { get; set; }
         public virtual string Panes { get; set; }
         public virtual List<Resource> Resources { get; set; }