From c61abfed2ffe15c54b0c6fab1296be3b5df4be3d Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 27 Apr 2022 16:10:13 +0300 Subject: [PATCH 01/14] Add LeptonX Lite Docs --- docs/en/Themes/LeptonXLite/angular.md | 75 ++++++++++++++++ docs/en/Themes/LeptonXLite/blazor.md | 124 ++++++++++++++++++++++++++ docs/en/Themes/LeptonXLite/mvc.md | 63 +++++++++++++ 3 files changed, 262 insertions(+) create mode 100644 docs/en/Themes/LeptonXLite/angular.md create mode 100644 docs/en/Themes/LeptonXLite/blazor.md create mode 100644 docs/en/Themes/LeptonXLite/mvc.md 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 From a9d3c032d8e8ededc286f3f2cb7f94149faaa96f Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 27 Apr 2022 16:10:30 +0300 Subject: [PATCH 02/14] Add LeptonX docs to menu --- docs/en/docs-nav.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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" } ] }, From 8313cb5f6d44dc0f6ce87d2bbbb831ac0fb9ce56 Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 27 Apr 2022 16:47:46 +0300 Subject: [PATCH 03/14] Update blazor.md --- docs/en/Themes/LeptonXLite/blazor.md | 38 +++++++++++++++------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md index a20d3436de..07d0bb68eb 100644 --- a/docs/en/Themes/LeptonXLite/blazor.md +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -1,4 +1,4 @@ -# LeptonX Lite MVC UI +# LeptonX Lite Blazor UI ````json //[doc-params] @@ -9,12 +9,10 @@ LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server. -## Installation - - ## Installation {{if UI == "Blazor"}} +- Complete [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete 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.LeptonXTheme** package to your **Blazor wasm** application. ```bash @@ -35,7 +33,6 @@ LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Se ```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. @@ -45,7 +42,7 @@ builder.RootComponents.Add("#ApplicationContainer"); {{if UI == "BlazorServer"}} -- Complete [MVC Razor Pages Installation](mvc.md#installation) first. +- Complete [MVC Razor Pages Installation](mvc.md#installation) first. _If the solution is tiered/micro-service, complete 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 @@ -106,19 +103,24 @@ LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage to - `LeptonXLiteToolbars.MainMobile` ```csharp -public class MyProjectNameMainToolbarContributor : IToolbarContributor +public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context) { - 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) { - 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))); - } + context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent))); } + + return Task.CompletedTask; } -``` \ No newline at end of file +``` + +{{if UI == "BlazorServer"}} + +> _You can visit the [Toolbars Documentation](https://docs.abp.io/en/abp/latest/UI/Blazor/Toolbars) for better understanding._ + +{{end}} From b3ff72681f5e657a1e1253e0a10d3280c4a16d37 Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 27 Apr 2022 16:48:14 +0300 Subject: [PATCH 04/14] Update mvc.md --- docs/en/Themes/LeptonXLite/mvc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md index 7a4519585b..74218b5381 100644 --- a/docs/en/Themes/LeptonXLite/mvc.md +++ b/docs/en/Themes/LeptonXLite/mvc.md @@ -6,7 +6,7 @@ LeptonX Lite has implementation for ABP Framework Razor Pages. - Add **Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite** package to your **Web** application. ```bash -dotnet add package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite +abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite ``` - Make sure old theme is removed and LeptonX is added in your Module class. From 5720a882f41e562100448de87036b452249159fc Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Thu, 28 Apr 2022 09:59:19 +0300 Subject: [PATCH 05/14] Update docs/en/Themes/LeptonXLite/blazor.md Co-authored-by: Qingxiao Ren --- docs/en/Themes/LeptonXLite/blazor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md index 07d0bb68eb..7994f080b2 100644 --- a/docs/en/Themes/LeptonXLite/blazor.md +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -14,7 +14,7 @@ LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Se {{if UI == "Blazor"}} - Complete [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete 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.LeptonXTheme** package to your **Blazor wasm** application. +- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application. ```bash dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme ``` From cbdef0960c31ee4c779794da04c286cd7647890d Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Thu, 28 Apr 2022 10:00:16 +0300 Subject: [PATCH 06/14] Fix typo for LeptonXLiteTheme Co-authored-by: Qingxiao Ren --- docs/en/Themes/LeptonXLite/blazor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md index 7994f080b2..f57f1a8268 100644 --- a/docs/en/Themes/LeptonXLite/blazor.md +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -19,7 +19,7 @@ LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Se 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. +- Remove old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to **DependsOn** attribute. ```diff [DependsOn( @@ -49,7 +49,7 @@ builder.RootComponents.Add("#ApplicationContainer"); 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. +- Remove old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to **DependsOn** attribute. ```diff [DependsOn( From 34ec342b79fdaf121d3d2d5259fd0bf6042937e9 Mon Sep 17 00:00:00 2001 From: enisn Date: Thu, 28 Apr 2022 10:58:43 +0300 Subject: [PATCH 07/14] Add Introduction section to mvc --- docs/en/Themes/LeptonXLite/mvc.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md index 74218b5381..d46c8a82d0 100644 --- a/docs/en/Themes/LeptonXLite/mvc.md +++ b/docs/en/Themes/LeptonXLite/mvc.md @@ -1,5 +1,9 @@ # LeptonX Lite MVC UI -LeptonX Lite has implementation for ABP Framework Razor Pages. +LeptonX Lite has implementation for ABP Framework Razor Pages. It's a simplified version of [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 the [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 From 754c454c96abc8fbe4058f1b4d5ed0b64560889b Mon Sep 17 00:00:00 2001 From: enisn Date: Thu, 28 Apr 2022 11:00:48 +0300 Subject: [PATCH 08/14] Update mvc.md --- docs/en/Themes/LeptonXLite/mvc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md index d46c8a82d0..ea5843cd93 100644 --- a/docs/en/Themes/LeptonXLite/mvc.md +++ b/docs/en/Themes/LeptonXLite/mvc.md @@ -1,5 +1,5 @@ # LeptonX Lite MVC UI -LeptonX Lite has implementation for ABP Framework Razor Pages. It's a simplified version of [LeptonX Theme](https://x.leptontheme.com/). +LeptonX Lite has implementation for ABP Framework Razor Pages. It's a simplified variation of [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 the [ABP Commercial](https://commercial.abp.io/). From afbb552a83302269d62e746eff9d89c0aeb8ffa8 Mon Sep 17 00:00:00 2001 From: enisn Date: Thu, 28 Apr 2022 11:02:53 +0300 Subject: [PATCH 09/14] Add Introduction section to blazor --- docs/en/Themes/LeptonXLite/blazor.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md index f57f1a8268..3461a9ae42 100644 --- a/docs/en/Themes/LeptonXLite/blazor.md +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -7,7 +7,11 @@ } ```` -LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server. +LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server. It's a simplified variation of [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 the [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 From ce15f9d50ee1389b5528a11632c64627ade04815 Mon Sep 17 00:00:00 2001 From: enisn Date: Thu, 28 Apr 2022 11:13:03 +0300 Subject: [PATCH 10/14] Add Introduction section to angular --- docs/en/Themes/LeptonXLite/angular.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/angular.md b/docs/en/Themes/LeptonXLite/angular.md index 431a4d07f2..6610e68c8e 100644 --- a/docs/en/Themes/LeptonXLite/angular.md +++ b/docs/en/Themes/LeptonXLite/angular.md @@ -1,4 +1,11 @@ -# Client Side +# LeptonX Lite Angular UI +LeptonX Lite has implementation for ABP Framework Angular Client. It's a simplified variation of [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 the [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, @@ -70,6 +77,6 @@ To change the logos and brand color of the `LeptonX`, simply add the following C - `--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 +### 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. From 793cf8e530d09fc60efc30541ed4091489eb4bca Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Fri, 29 Apr 2022 12:59:26 +0300 Subject: [PATCH 11/14] Grammar fix --- docs/en/Themes/LeptonXLite/angular.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/angular.md b/docs/en/Themes/LeptonXLite/angular.md index 6610e68c8e..7b4a4fca68 100644 --- a/docs/en/Themes/LeptonXLite/angular.md +++ b/docs/en/Themes/LeptonXLite/angular.md @@ -1,7 +1,7 @@ # LeptonX Lite Angular UI -LeptonX Lite has implementation for ABP Framework Angular Client. It's a simplified variation of [LeptonX Theme](https://x.leptontheme.com/). +LeptonX Lite has implementation for the ABP Framework Angular Client. It's a simplified variation of [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 the [ABP Commercial](https://commercial.abp.io/). +> 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. @@ -63,7 +63,7 @@ import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account'; export class AppModule {} ``` -To change the logos and brand color of the `LeptonX`, simply add the following CSS to the `styles.scss` +To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss` ```css :root { @@ -79,4 +79,4 @@ To change the logos and brand color of the `LeptonX`, simply add the following C ### 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. +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. From c306f63f3d65199ceab628156f442d2bb3d84b1d Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:25:16 +0300 Subject: [PATCH 12/14] grammar and typo fix for blazor.md --- docs/en/Themes/LeptonXLite/blazor.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/blazor.md b/docs/en/Themes/LeptonXLite/blazor.md index 3461a9ae42..ddea346585 100644 --- a/docs/en/Themes/LeptonXLite/blazor.md +++ b/docs/en/Themes/LeptonXLite/blazor.md @@ -7,23 +7,23 @@ } ```` -LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server. It's a simplified variation of [LeptonX Theme](https://x.leptontheme.com/). +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 the [ABP Commercial](https://commercial.abp.io/). +> 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 [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete MVC steps for all MVC applications such as **HttpApi.Host** and if identity server is separated, install to the **IdentityServer**_. +- 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 old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to **DependsOn** attribute. +- Remove the old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute. ```diff [DependsOn( @@ -32,28 +32,28 @@ LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Se )] ``` -- Change startup App component with LeptonX one. +- 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 `abp bundle` command in your **Blazor** application folder. +- Run the `abp bundle` command in your **Blazor** application folder. {{end}} {{if UI == "BlazorServer"}} -- Complete [MVC Razor Pages Installation](mvc.md#installation) first. _If the solution is tiered/micro-service, complete MVC steps for all MVC applications such as **HttpApi.Host** and **IdentityServer**_. +- 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 **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to **DependsOn** attribute. +- Remove old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute. ```diff [DependsOn( @@ -82,7 +82,7 @@ builder.RootComponents.Add("#ApplicationContainer"); @using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite @using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Bundling ``` - - Then replace script & style bunles as following + - Then replace script & style bundles as following: ```diff - + @@ -101,7 +101,7 @@ builder.RootComponents.Add("#ApplicationContainer"); ## Customization ### Toolbars -LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in **LeptonXLiteToolbars** class. +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` From 51e0ab5f372f4f9dee79124b3486281ac284cb88 Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:25:30 +0300 Subject: [PATCH 13/14] Update angular.md --- docs/en/Themes/LeptonXLite/angular.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/Themes/LeptonXLite/angular.md b/docs/en/Themes/LeptonXLite/angular.md index 7b4a4fca68..6e4cbef317 100644 --- a/docs/en/Themes/LeptonXLite/angular.md +++ b/docs/en/Themes/LeptonXLite/angular.md @@ -1,5 +1,5 @@ # LeptonX Lite Angular UI -LeptonX Lite has implementation for the ABP Framework Angular Client. It's a simplified variation of [LeptonX Theme](https://x.leptontheme.com/). +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/). From 1b996d175539a952408a71d5815eaedd767c492b Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:35:46 +0300 Subject: [PATCH 14/14] Grammar fix for mvc.md --- docs/en/Themes/LeptonXLite/mvc.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/mvc.md b/docs/en/Themes/LeptonXLite/mvc.md index ea5843cd93..b5575cba49 100644 --- a/docs/en/Themes/LeptonXLite/mvc.md +++ b/docs/en/Themes/LeptonXLite/mvc.md @@ -1,7 +1,7 @@ # LeptonX Lite MVC UI -LeptonX Lite has implementation for ABP Framework Razor Pages. It's a simplified variation of [LeptonX Theme](https://x.leptontheme.com/). +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 the [ABP Commercial](https://commercial.abp.io/). +> 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. @@ -13,7 +13,7 @@ LeptonX Lite has implementation for ABP Framework Razor Pages. It's a simplified abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite ``` -- Make sure old theme is removed and LeptonX is added in your Module class. +- Make sure the old theme is removed and LeptonX is added in your Module class. ```diff [DependsOn( @@ -43,7 +43,7 @@ Configure(options => ## Customization ### Toolbars -LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in **LeptonXLiteToolbars** class. +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` @@ -64,4 +64,4 @@ public class MyProjectNameMainToolbarContributor : IToolbarContributor } } } -``` \ No newline at end of file +```