diff --git a/docs/en/Themes/LeptonXLite/angular.md b/docs/en/Themes/LeptonXLite/angular.md new file mode 100644 index 0000000000..431a4d07f2 --- /dev/null +++ b/docs/en/Themes/LeptonXLite/angular.md @@ -0,0 +1,75 @@ +# Client Side + +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 the `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 [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..a20d3436de --- /dev/null +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -0,0 +1,124 @@ +# LeptonX Lite MVC UI + +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + +LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server. + +## Installation + + +## Installation + +{{if UI == "Blazor"}} + +- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme** package to your **Blazor wasm** application. + ```bash + dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme + ``` + +- Remove old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule** type to **DependsOn** attribute. + +```diff +[DependsOn( +- typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeModule), ++ typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule) +)] +``` + +- Change startup App component with LeptonX one. + +```csharp +// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace. +builder.RootComponents.Add("#ApplicationContainer"); + +``` + +- Run `abp bundle` command in your **Blazor** application folder. + +{{end}} + + +{{if UI == "BlazorServer"}} + +- Complete [MVC Razor Pages Installation](mvc.md#installation) first. + +- 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 **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule** type to **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 bunles 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 **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))); + } + } +} +``` \ No newline at end of file diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md new file mode 100644 index 0000000000..7a4519585b --- /dev/null +++ b/docs/en/Themes/LeptonXLite/mvc.md @@ -0,0 +1,63 @@ +# LeptonX Lite MVC UI +LeptonX Lite has implementation for ABP Framework Razor Pages. + +## Installation + +- Add **Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite** package to your **Web** application. + +```bash +dotnet add package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite +``` + +- Make sure 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 **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))); + } + } +} +``` \ No newline at end of file