add theme creator module to simplify the scaffolding of external themes

2021-04-07 13:05:18 -04:00
parent d05747af1e
commit 1d3a79437c
20 changed files with 760 additions and 6 deletions
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/AssemblyInfo.cs
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/AssemblyInfo.cs
@ -0,0 +1,4 @@
+using System.Resources;
+using Microsoft.Extensions.Localization;
+
+[assembly: RootNamespace("[Owner].[Theme].Client")]
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/Containers/Container1.razor
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/Containers/Container1.razor
@ -0,0 +1,20 @@
+@namespace [Owner].[Theme]
+@inherits ContainerBase
+
+<div class="container">
+    <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 => "Container1";
+}
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/ThemeInfo.cs
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/ThemeInfo.cs
@ -0,0 +1,15 @@
+using Oqtane.Models;
+using Oqtane.Themes;
+
+namespace [Owner].[Theme]
+{
+    public class ThemeInfo : ITheme
+    {
+        public Theme Theme => new Theme
+        {
+            Name = "[Theme]",
+            Version = "1.0.0"
+        };
+
+    }
+}
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/Themes/Theme1.razor
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/Themes/Theme1.razor
@ -0,0 +1,107 @@
+@namespace [Owner].[Theme]
+@inherits ThemeBase
+
+<main role="main">
+    <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
+        <Logo /><Menu Orientation="Horizontal" />
+        <div class="controls ml-md-auto">
+            <div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <Pane Name="Content" />
+            </div>
+        </div>
+    </div>
+    <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" />
+</main>
+
+@code {
+    public override string Name => "Theme1";
+
+    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";
+
+    public override List<Resource> Resources => new List<Resource>()
+    {
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css", Integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk", CrossOrigin = "anonymous" },
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://code.jquery.com/jquery-3.5.1.slim.min.js", Integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", CrossOrigin = "anonymous" },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js", Integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo", CrossOrigin = "anonymous" },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Bootstrap", Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js", Integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI", CrossOrigin = "anonymous" }
+    };
+}
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/[Owner].[Theme].Client.csproj
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/[Owner].[Theme].Client.csproj
@ -0,0 +1,34 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+    <RazorLangVersion>3.0</RazorLangVersion>
+    <Version>1.0.0</Version>
+    <Authors>[Owner]</Authors>
+    <Company>[Owner]</Company>
+    <Description>[Description]</Description>
+    <Product>[Owner].[Theme]</Product>
+    <Copyright>[Owner]</Copyright>
+    <AssemblyName>[Owner].[Theme].Client.Oqtane</AssemblyName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.0" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    [ClientReference]
+    [SharedReference]
+  </ItemGroup>
+
+  <PropertyGroup>
+    <!-- there may be other elements here -->
+    <BlazorWebAssemblyEnableLinking>false</BlazorWebAssemblyEnableLinking>
+    <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
+  </PropertyGroup>
+
+</Project>
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/_Imports.razor
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/_Imports.razor
@ -0,0 +1,21 @@
+@using System
+@using System.Linq
+@using System.Collections.Generic
+@using System.Net.Http
+@using System.Net.Http.Json
+
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+
+@using Oqtane.Models
+@using Oqtane.Modules
+@using Oqtane.Modules.Controls
+@using Oqtane.Providers
+@using Oqtane.Security
+@using Oqtane.Services
+@using Oqtane.Shared
+@using Oqtane.Themes
+@using Oqtane.Themes.Controls
+@using Oqtane.UI
+@using Oqtane.Enums
--- a/Oqtane.Server/wwwroot/Themes/Templates/External/Client/wwwroot/Themes/[Owner].[Theme]/Theme.css
+++ b/Oqtane.Server/wwwroot/Themes/Templates/External/Client/wwwroot/Themes/[Owner].[Theme]/Theme.css
@ -0,0 +1,83 @@
+/* Oqtane Styles */
+
+body {
+    padding-top: 7rem;
+}
+
+.controls {
+    z-index: 2000;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-right: 10px;
+}
+
+.app-menu .nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.app-menu .nav-item a {
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.app-menu .nav-item a.active {
+    background-color: rgba(255,255,255,0.25);
+    color: white;
+}
+
+.app-menu .nav-item a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.app-menu .nav-link .oi {
+    width: 1.5rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+    margin-left: auto;
+}
+
+div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
+    color:#ffffff;
+}
+
+@media (max-width: 767px) {
+
+    .app-menu {
+        width: 100%
+    }
+
+    .navbar {
+        position: fixed;
+        top: 60px;
+        width: 100%;
+    }
+
+    .controls {
+        height: 60px;
+        top: 15px;
+        position: fixed;
+        top: 0px;
+        width: 100%;
+        background-color: rgb(0, 0, 0);
+    }
+
+    .controls-group {
+        float: right;
+        margin-right: 25px;
+    }
+
+    .content {
+        position: relative;
+        top: 60px;
+    }
+}