Merge pull request #12383 from abpframework/docs/lpx

LeptonX Lite Documentation

docs/en/Themes/LeptonXLite/angular.md

@@ -0,0 +1,82 @@
+# LeptonX Lite Angular UI
+LeptonX Lite has implementation for the ABP Framework Angular Client. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/).
+
+>   If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/).
+
+> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes.
+
+## Installation
+
+To add `LeptonX-lite` into your project,
+
+* Install `@abp/ng.theme.lepton-x`
+
+`yarn add @abp/ng.theme.lepton-x@preview`
+
+* Install `bootstrap-icons`
+
+`yarn add bootstrap-icons`
+
+
+* Then, we need to edit the styles array in `angular.json` to replace the existing style with the new one.
+
+Add the following style 
+
+```json
+"node_modules/bootstrap-icons/font/bootstrap-icons.css",
+```
+
+* Finally, remove `ThemeBasicModule` from `app.module.ts`, and import the related modules in `app.module.ts`
+
+```js
+import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
+import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
+
+@NgModule({
+  imports: [
+    // ...
+
+    // do not forget to remove ThemeBasicModule
+    //  ThemeBasicModule.forRoot(),
+    ThemeLeptonXModule.forRoot(),
+    SideMenuLayoutModule.forRoot(),
+  ],
+  // ...
+})
+export class AppModule {}
+```
+
+Note: If you employ [Resource Owner Password Flow](https://docs.abp.io/en/abp/latest/UI/Angular/Authorization#resource-owner-password-flow) for authorization, you should import the following module as well:
+
+```js
+import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
+
+@NgModule({
+  // ...
+  imports: [
+    // ...
+    AccountLayoutModule.forRoot(),
+    // ...
+  ],
+  // ...
+})
+export class AppModule {}
+```
+
+To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss`
+
+```css
+:root {
+  --lpx-logo: url('/assets/images/logo.png');
+  --lpx-logo-icon: url('/assets/images/logo-icon.png');
+  --lpx-brand: #edae53;
+}
+```
+
+- `--lpx-logo` is used to place the logo in the menu.
+- `--lpx-logo-icon` is a square icon used when the menu is collapsed. 
+- `--lpx-brand` is a color used throughout the application, especially on active elements. 
+
+### Server Side
+
+In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow the [Server Side Migration](mvc.md) document.

docs/en/Themes/LeptonXLite/blazor.md

@@ -0,0 +1,130 @@
+# LeptonX Lite Blazor UI
+
+````json
+//[doc-params]
+{
+    "UI": ["Blazor", "BlazorServer"]
+}
+````
+
+LeptonX Lite has implementation for the ABP Framework Blazor WebAssembly & Blazor Server. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/).
+
+>   If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/).
+
+> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes.
+
+## Installation
+
+{{if UI == "Blazor"}}
+- Complete the [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and if identity server is separated, install to the **IdentityServer**_.
+
+- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application.
+  ```bash
+  dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme
+  ```
+
+- Remove the old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute.
+
+```diff
+[DependsOn(
+-    typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeModule),
++    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule)
+)]
+```
+
+- Change startup App component with the LeptonX one.
+
+```csharp
+// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace.
+builder.RootComponents.Add<App>("#ApplicationContainer");
+```
+
+- Run the `abp bundle` command in your **Blazor** application folder.
+
+{{end}}
+
+
+{{if UI == "BlazorServer"}}
+
+- Complete the [MVC Razor Pages Installation](mvc.md#installation) first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and **IdentityServer**_.
+
+- Add **Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme** package to your **Blazor server** application.
+  ```bash
+  dotnet add package Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme
+  ```
+
+- Remove old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute.
+
+  ```diff
+  [DependsOn(
+  -    typeof(AbpAspNetCoreComponentsServerBasicThemeModule),
+  +    typeof(AbpAspNetCoreComponentsServerLeptonXLiteThemeModule)
+  )]
+  ```
+
+- Update AbpBundlingOptions
+  ```diff
+  options.StyleBundles.Configure(
+  - BlazorBasicThemeBundles.Styles.Global,
+  + BlazorLeptonXLiteThemeBundles.Styles.Global,
+    bundle =>
+    {
+        bundle.AddFiles("/blazor-global-styles.css");
+        //You can remove the following line if you don't use Blazor CSS isolation for components
+        bundle.AddFiles("/MyProjectName.Blazor.styles.css");
+    });
+  ```
+
+- Update `_Host.cshtml` file. _(located under **Pages** folder by default.)_
+
+  - Add following usings to Locate **App** and **BlazorLeptonXLiteThemeBundles** classes.
+    ```csharp
+    @using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite
+    @using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Bundling
+    ```
+  - Then replace script & style bundles as following:
+    ```diff
+    - <abp-style-bundle name="@BlazorBasicThemeBundles.Styles.Global" />
+    + <abp-style-bundle name="@BlazorLeptonXLiteThemeBundles.Styles.Global" />
+    ```
+
+    ```diff
+    - <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" />
+    + <abp-script-bundle name="@BlazorLeptonXLiteThemeBundles.Scripts.Global" />
+    ```
+
+{{end}}
+
+
+---
+
+## Customization
+
+### Toolbars
+LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXLiteToolbars** class.
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
+
+```csharp
+public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+{
+    if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+    }
+
+    if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+    }
+
+    return Task.CompletedTask;
+}
+```
+
+{{if UI == "BlazorServer"}}
+
+> _You can visit the [Toolbars Documentation](https://docs.abp.io/en/abp/latest/UI/Blazor/Toolbars) for better understanding._
+
+{{end}}

docs/en/Themes/LeptonXLite/mvc.md

@@ -0,0 +1,67 @@
+# LeptonX Lite MVC UI
+LeptonX Lite has implementation for the ABP Framework Razor Pages. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/).
+
+>   If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/).
+
+> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes.
+
+## Installation
+
+- Add **Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite** package to your **Web** application.
+
+```bash
+abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite
+```
+
+- Make sure the old theme is removed and LeptonX is added in your Module class.
+
+```diff
+[DependsOn(
+-    typeof(AbpAspNetCoreMvcUiBasicThemeModule),
++    typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule)
+)]
+```
+
+- Update AbpBundlingOptions
+
+```diff
+Configure<AbpBundlingOptions>(options =>
+{
+    options.StyleBundles.Configure(
+-       BasicThemeBundles.Styles.Global,
++       LeptonXLiteThemeBundles.Styles.Global
+        bundle =>
+        {
+            bundle.AddFiles("/global-styles.css");
+        }
+    );
+});
+```
+
+---
+
+## Customization
+
+### Toolbars
+LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXLiteToolbars** class.
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
+
+```csharp
+public class MyProjectNameMainToolbarContributor : IToolbarContributor
+{
+    public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+    {
+        if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+        }
+
+        if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+        }
+    }
+}
+```

docs/en/docs-nav.json

@@ -704,6 +704,10 @@
                 {
                   "text": "The Basic Theme",
                   "path": "UI/AspNetCore/Basic-Theme.md"
+                },
+                {
+                  "text": "LeptonX Lite",
+                  "path": "Themes/LeptonXLite/mvc.md"
                 }
               ]
             },
@@ -817,6 +821,10 @@
                   "text": "The Basic Theme",
                   "path": "UI/Blazor/Basic-Theme.md"
                 },
+                {
+                  "text": "The Basic Theme",
+                  "path": "Themes/LeptonXLite/blazor.md"
+                },
                 {
                   "text": "Branding",
                   "path": "UI/Blazor/Branding.md"
@@ -1071,6 +1079,10 @@
                     {
                       "text": "The Basic Theme",
                       "path": "UI/Angular/Basic-Theme.md"
+                    },
+                    {
+                      "text": "LeptonX Lite",
+                      "path": "Themes/LeptonXLite/angular.md"
                     }
                   ]
                 },