diff --git a/docs/en/Themes/LeptonXLite/angular.md b/docs/en/Themes/LeptonXLite/angular.md new file mode 100644 index 0000000000..6e4cbef317 --- /dev/null +++ b/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. diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md new file mode 100644 index 0000000000..ddea346585 --- /dev/null +++ b/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("#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 + - + + + ``` + + ```diff + - + + + ``` + +{{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}} diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md new file mode 100644 index 0000000000..b5575cba49 --- /dev/null +++ b/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(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))); + } + } +} +``` diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index b2061920a8..a4d34ad292 100644 --- a/docs/en/docs-nav.json +++ b/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" } ] },