From 85c5691c598f8e5dadc7edd0266e0ded53524b62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20KILI=C3=87?= Date: Thu, 20 Oct 2022 16:31:02 +0300 Subject: [PATCH 1/9] Add footer document to leptonx-lite --- docs/en/Themes/LeptonXLite/Angular.md | 186 ++++++++++++++++---------- docs/en/images/angular-footer.png | Bin 0 -> 14659 bytes 2 files changed, 119 insertions(+), 67 deletions(-) create mode 100644 docs/en/images/angular-footer.png diff --git a/docs/en/Themes/LeptonXLite/Angular.md b/docs/en/Themes/LeptonXLite/Angular.md index 4079281f99..0da5a99058 100644 --- a/docs/en/Themes/LeptonXLite/Angular.md +++ b/docs/en/Themes/LeptonXLite/Angular.md @@ -1,7 +1,8 @@ # 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/). +> 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. @@ -11,28 +12,27 @@ This theme is **already installed** when you create a new solution using the sta To add `LeptonX-lite` into your project, -* Install `@abp/ng.theme.lepton-x` +- Install `@abp/ng.theme.lepton-x` `yarn add @abp/ng.theme.lepton-x@preview` -* Install `bootstrap-icons` +- 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. -* Then, we need to edit the styles array in `angular.json` to replace the existing style with the new one. - -Add the following style +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` +- 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'; +import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x"; +import { SideMenuLayoutModule } from "@abp/ng.theme.lepton-x/layouts"; @NgModule({ imports: [ @@ -51,7 +51,7 @@ 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'; +import { AccountLayoutModule } from "@abp/ng.theme.lepton-x/account"; @NgModule({ // ... @@ -69,15 +69,15 @@ To change the logos and brand color of `LeptonX`, simply add the following CSS t ```css :root { - --lpx-logo: url('/assets/images/logo.png'); - --lpx-logo-icon: url('/assets/images/logo-icon.png'); + --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. +- `--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 @@ -85,22 +85,18 @@ In order to migrate to LeptonX on your server side projects (Host and/or AuthSer ## Customization - ### Layouts -The Angular version of LeptonX Lite provides **layout components** for your **user interface** on [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/Angular/Theming). You can use layouts to **organize your user interface**. You can replace the **layout components** and some parts of the **layout components** with the [ABP replaceable component system](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement). - +The Angular version of LeptonX Lite provides **layout components** for your **user interface** on [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/Angular/Theming). You can use layouts to **organize your user interface**. You can replace the **layout components** and some parts of the **layout components** with the [ABP replaceable component system](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement). The main responsibility of a theme is to **provide** the layouts. There are **three pre-defined layouts that must be implemented by all the themes:** -* **ApplicationLayoutComponent:** The **default** layout which is used by the **main** application pages. - -* **AccountLayoutComponent:** Mostly used by the **account module** for **login**, **register**, **forgot password**... pages. - -* **EmptyLayoutComponent:** The **Minimal** layout that **has no layout components** at all. +- **ApplicationLayoutComponent:** The **default** layout which is used by the **main** application pages. +- **AccountLayoutComponent:** Mostly used by the **account module** for **login**, **register**, **forgot password**... pages. +- **EmptyLayoutComponent:** The **Minimal** layout that **has no layout components** at all. + +The **Layout components** and all the replacable components are predefined in `eThemeLeptonXComponents` as enum. - The **Layout components** and all the replacable components are predefined in `eThemeLeptonXComponents` as enum. - ### How to replace a component ```js @@ -122,8 +118,8 @@ export class AppComponent { } } ``` -See the [Component Replacement](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement) documentation for more information on how to replace components. +See the [Component Replacement](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement) documentation for more information on how to replace components. ### Brand Component @@ -131,16 +127,14 @@ The **brand component** is a simple component that can be used to display your b ```js ///... - this.replaceableComponents.add({ - component: YourNewLogoComponent, - key: eThemeLeptonXComponents.Logo, - }); +this.replaceableComponents.add({ + component: YourNewLogoComponent, + key: eThemeLeptonXComponents.Logo, +}); ///... ``` -![Brand component](../../images/leptonxlite-brand-component.png) - - +![Brand component](../../images/leptonxlite-brand-component.png) ## Breadcrumb Component @@ -148,14 +142,14 @@ On websites that have a lot of pages, **breadcrumb navigation** can greatly **en ```js ///... - this.replaceableComponents.add({ - component: YourNewSidebarComponent, - key: eThemeLeptonXComponents.Breadcrumb, - }); +this.replaceableComponents.add({ + component: YourNewSidebarComponent, + key: eThemeLeptonXComponents.Breadcrumb, +}); ///... ``` -![Breadcrumb component](../../images/leptonxlite-breadcrumb-component.png) +![Breadcrumb component](../../images/leptonxlite-breadcrumb-component.png) ## Sidebar Menu Component @@ -163,54 +157,61 @@ Sidebar menus have been used as a **directory for Related Pages** to a **Service ```js ///... - this.replaceableComponents.add({ - component: YourNewSidebarComponent, - key: eThemeLeptonXComponents.Sidebar, - }); +this.replaceableComponents.add({ + component: YourNewSidebarComponent, + key: eThemeLeptonXComponents.Sidebar, +}); ///... ``` -![Sidebar menu component](../../images/leptonxlite-sidebar-menu-component.png) + +![Sidebar menu component](../../images/leptonxlite-sidebar-menu-component.png) ## Page Alerts Component Provides contextual **feedback messages** for typical user actions with a handful of **available** and **flexible** **alert messages**. Alerts are available for any length of text, as well as an **optional dismiss button**. -![Page alerts component](../../images/leptonxlite-page-alerts-component.png) +![Page alerts component](../../images/leptonxlite-page-alerts-component.png) + ```js ///... - this.replaceableComponents.add({ - component: YourNewPageAlertContainerComponent, - key: eThemeLeptonXComponents.PageAlertContainer, - }); +this.replaceableComponents.add({ + component: YourNewPageAlertContainerComponent, + key: eThemeLeptonXComponents.PageAlertContainer, +}); ///... ``` + ## Toolbar Component + ![Breadcrumb component](../../images/leptonxlite-toolbar-component.png) Toolbar items are used to add **extra functionality to the toolbar**. The toolbar is a **horizontal bar** that **contains** a group of **toolbar items**. + ```js ///... - this.replaceableComponents.add({ - component: YourNewNavItemsComponent, - key: eThemeLeptonXComponents.NavItems, - }); +this.replaceableComponents.add({ + component: YourNewNavItemsComponent, + key: eThemeLeptonXComponents.NavItems, +}); ///... ``` ## Toolbar Items + There are two parts to the toolbar. The first is Language-Switch. The second is the User-Profile element. You can swap out each of these parts individually. ## Language Switch Component -Think about a **multi-lingual** website and the first thing that could **hit your mind** is **the language switch component**. A **navigation bar** is a **great place** to **embed a language switch**. By embedding the language switch in the navigation bar of your website, you would **make it simpler** for users to **find it** and **easily** switch the **language** **without trying to locate it across the website.** +Think about a **multi-lingual** website and the first thing that could **hit your mind** is **the language switch component**. A **navigation bar** is a **great place** to **embed a language switch**. By embedding the language switch in the navigation bar of your website, you would **make it simpler** for users to **find it** and **easily** switch the **language** **without trying to locate it across the website.** + +![Language switch component](../../images/leptonxlite-language-switch-component.png) -![Language switch component](../../images/leptonxlite-language-switch-component.png) ```js ///... - this.replaceableComponents.add({ - component: YourNewLanguagesComponent, - key: eThemeLeptonXComponents.Languages, - }); +this.replaceableComponents.add({ + component: YourNewLanguagesComponent, + key: eThemeLeptonXComponents.Languages, +}); ///... ``` @@ -219,33 +220,84 @@ Think about a **multi-lingual** website and the first thing that could **hit you The **User Menu** is the **menu** that **drops down** when you **click your name** or **profile picture** in the **upper right corner** of your page (**in the toolbar**). It drops down options such as **Settings**, **Logout**, etc. ![User menu component](../../images/leptonxlite-user-menu-component.png) + ```js ///... - this.replaceableComponents.add({ - component: YourNewCurrentUserComponent, - key: eThemeLeptonXComponents.CurrentUser, - }); +this.replaceableComponents.add({ + component: YourNewCurrentUserComponent, + key: eThemeLeptonXComponents.CurrentUser, +}); ///... ``` + Note: The language selection component in the Volo app is not replaceable. It is part of the settings menu. ## Mobile Navbar Component + The **mobile navbar component** is used to display the **navbar menu on mobile devices**. The mobile navbar component is a **dropdown menu** that contains language selection and user menu. -![Mobile user menu component](../../images/leptonxlite-mobile-user-menu-component.png) +![Mobile user menu component](../../images/leptonxlite-mobile-user-menu-component.png) + ```js ///... - this.replaceableComponents.add({ - component: YourNewMobileNavbarComponent, - key: eThemeLeptonXComponents.MobileNavbar, - }); +this.replaceableComponents.add({ + component: YourNewMobileNavbarComponent, + key: eThemeLeptonXComponents.MobileNavbar, +}); ///... ``` + ## Mobile Navbar Items. -There are two parts of the mobile navbar. The mobile navbar has Language-Switch and User-Profile. You can swap out each of these parts individually. + +There are two parts of the mobile navbar. The mobile navbar has Language-Switch and User-Profile. You can swap out each of these parts individually. The Mobile language-Selection component key is `eThemeLeptonXComponents.MobileLanguageSelection`. The Mobile User-Profile component key is `eThemeLeptonXComponents.MobileUserProfile`. +## Footer Component + +![Angular Footer Component](../../images/angular-footer.png) + +Footer is the section of content at the very bottom of the site. This section of the content can be modified. +Inject **FooterLinksService** and use **setFooterInfo** method of **FooterLinksService** +to assign path or link and description. +**descUrl** and **footerLinks** are nullable. Constant **footerLinks** is rigth side of footer. + + +```js +///... + +const footerLinks = [ + { + link: "/components/bootstrap/badge", + text: "Manage Your Profile", + }, + { + link: "/components/bootstrap/border", + text: "My Security Logs", + }, +]; + +const footerInfo: FooterNav = { + desc: "Home", + descUrl: "/components/home", + footerLinks: footerLinks, +}; + +this.footerLinksService.setFooterInfo(footerInfo); + +///... +``` +If you want to change logo component, the key is `eThemeLeptonXComponents.Footer` + +```js +///... +this.replaceableComponents.add({ + component: YourNewFooterComponent, + key: eThemeLeptonXComponents.Footer, +}); +///... +``` + diff --git a/docs/en/images/angular-footer.png b/docs/en/images/angular-footer.png new file mode 100644 index 0000000000000000000000000000000000000000..16be8194ab313f5256e6e8cc7d7a2471635ec5db GIT binary patch literal 14659 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 literal 0 HcmV?d00001 From b0618c12aa7779d0b6c3d2db3d721b75a426c2ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20KILI=C3=87?= Date: Fri, 21 Oct 2022 08:57:44 +0300 Subject: [PATCH 2/9] chabge footer document to leptonx-lite --- 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 0da5a99058..ca249bd34a 100644 --- a/docs/en/Themes/LeptonXLite/Angular.md +++ b/docs/en/Themes/LeptonXLite/Angular.md @@ -289,7 +289,7 @@ this.footerLinksService.setFooterInfo(footerInfo); ///... ``` -If you want to change logo component, the key is `eThemeLeptonXComponents.Footer` +If you want to change footer component, the key is `eThemeLeptonXComponents.Footer` ```js ///... From ae5d9b652ad9da2b8a2681ca1a083ebf56c3dc9b Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Mon, 24 Oct 2022 10:06:38 +0300 Subject: [PATCH 3/9] quick fix --- docs/en/Themes/LeptonXLite/Angular.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/en/Themes/LeptonXLite/Angular.md b/docs/en/Themes/LeptonXLite/Angular.md index ca249bd34a..950cd20c8b 100644 --- a/docs/en/Themes/LeptonXLite/Angular.md +++ b/docs/en/Themes/LeptonXLite/Angular.md @@ -87,7 +87,7 @@ In order to migrate to LeptonX on your server side projects (Host and/or AuthSer ### Layouts -The Angular version of LeptonX Lite provides **layout components** for your **user interface** on [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/Angular/Theming). You can use layouts to **organize your user interface**. You can replace the **layout components** and some parts of the **layout components** with the [ABP replaceable component system](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement). +The Angular version of LeptonX Lite provides **layout components** for your **user interface** on [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/Angular/Theming). You can use the layouts to **organize your user interface**. You can replace the **layout components** and some parts of the **layout components** with the [ABP replaceable component system](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement). The main responsibility of a theme is to **provide** the layouts. There are **three pre-defined layouts that must be implemented by all the themes:** @@ -259,10 +259,10 @@ The Mobile User-Profile component key is `eThemeLeptonXComponents.MobileUserProf ![Angular Footer Component](../../images/angular-footer.png) -Footer is the section of content at the very bottom of the site. This section of the content can be modified. -Inject **FooterLinksService** and use **setFooterInfo** method of **FooterLinksService** +The Footer is the section of content at the very bottom of the site. This section of the content can be modified. +Inject **FooterLinksService** and use the **setFooterInfo** method of **FooterLinksService** to assign path or link and description. -**descUrl** and **footerLinks** are nullable. Constant **footerLinks** is rigth side of footer. +**descUrl** and **footerLinks** are nullable. Constant **footerLinks** are on the right side of footer. ```js @@ -289,7 +289,7 @@ this.footerLinksService.setFooterInfo(footerInfo); ///... ``` -If you want to change footer component, the key is `eThemeLeptonXComponents.Footer` +If you want to change the footer component, the key is `eThemeLeptonXComponents.Footer` ```js ///... From c56ceced243ef2fcbd9497ae07154b4bdb7924d8 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 09:54:15 +0300 Subject: [PATCH 4/9] Fix #12213 --- .../packages/schematics/src/collection.json | 6 + .../src/commands/change-theme/index.ts | 86 +++++++ .../src/commands/change-theme/model.ts | 4 + .../src/commands/change-theme/schema.json | 30 +++ .../src/commands/change-theme/style-map.ts | 226 ++++++++++++++++++ .../change-theme/theme-options.enum.ts | 6 + .../src/commands/create-lib/schema.json | 2 +- npm/ng-packs/scripts/build-schematics.ts | 1 + 8 files changed, 360 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts create mode 100644 npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts create mode 100644 npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json create mode 100644 npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts create mode 100644 npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts diff --git a/npm/ng-packs/packages/schematics/src/collection.json b/npm/ng-packs/packages/schematics/src/collection.json index 8441a786b0..16f148d78a 100644 --- a/npm/ng-packs/packages/schematics/src/collection.json +++ b/npm/ng-packs/packages/schematics/src/collection.json @@ -29,6 +29,12 @@ "description": "ABP Create Library Schematics", "factory": "./commands/create-lib", "schema": "./commands/create-lib/schema.json" + }, + "change-theme": { + "description": "ABP Change Styles of Theme Schematics", + "factory": "./commands/change-theme", + "schema": "./commands/change-theme/schema.json" + } } } diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts new file mode 100644 index 0000000000..375c8ae97d --- /dev/null +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts @@ -0,0 +1,86 @@ +import { Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics'; +import { isLibrary, updateWorkspace, WorkspaceDefinition } from '../../utils'; +import { allStyles, StyleDefinition, styleMap } from './style-map'; +import { ProjectDefinition } from '@angular-devkit/core/src/workspace'; +import { JsonArray, JsonValue } from '@angular-devkit/core'; +import { ChangeThemeOptions } from './model'; + +export default function (_options: ChangeThemeOptions): Rule { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + return async (_: Tree, __: SchematicContext) => { + const targetThemeName = _options.name; + const selectedProject = _options.targetProject; + if (!targetThemeName) { + throw new SchematicsException('The theme name does not selected'); + } + + return updateWorkspace(storedWorkspace => { + updateProjectStyle(selectedProject, storedWorkspace, targetThemeName); + }); + }; +} + +function updateProjectStyle( + projectName: string, + workspace: WorkspaceDefinition, + targetThemeName: string, +) { + const project = workspace.projects.get(projectName); + + if (!project) { + throw new SchematicsException('The target project does not selected'); + } + + const isProjectLibrary = isLibrary(project); + if (isProjectLibrary) { + throw new SchematicsException('The library project does not supported'); + } + + const targetOption = getProjectTargetOptions(project, 'build'); + const styles = targetOption.styles as (string | { input: string })[]; + + const sanitizedStyles = removeThemeBasedStyles(styles); + + const newStyles = getStylesOfSelectedTheme(targetThemeName); + targetOption.styles = [...newStyles, ...sanitizedStyles] as JsonArray; +} + +export function getProjectTargetOptions( + project: ProjectDefinition, + buildTarget: string, +): Record { + const options = project.targets?.get(buildTarget)?.options; + + if (!options) { + throw new SchematicsException( + `Cannot determine project target configuration for: ${buildTarget}.`, + ); + } + + return options; +} + +export function removeThemeBasedStyles(styles: (string | object)[]) { + return styles.filter(s => !allStyles.some(x => styleCompareFn(s, x))); +} + +export const styleCompareFn = (item1: string | object, item2: string | object) => { + const type1 = typeof item1; + const type2 = typeof item1; + + if (type1 !== type2) { + return false; + } + + if (type1 === 'string') { + return item1 === item2; + } + const o1 = item1 as { bundleName?: string }; + const o2 = item2 as { bundleName?: string }; + + return o1.bundleName && o2.bundleName && o1.bundleName == o2.bundleName; +}; + +export function getStylesOfSelectedTheme(theme: string): StyleDefinition[] { + return styleMap[theme]; +} diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts new file mode 100644 index 0000000000..9bcda1d9b9 --- /dev/null +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts @@ -0,0 +1,4 @@ +export type ChangeThemeOptions = { + name: string; + targetProject: string; +}; diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json new file mode 100644 index 0000000000..bbf9080912 --- /dev/null +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json @@ -0,0 +1,30 @@ +{ + "$schema": "http://json-schema.org/schema", + "$id": "SchematicsABPModuleTemplateCreator", + "title": "ABP Theme Style Generator API Schema", + "type": "object", + "properties": { + "name": { + "description": "The file extension or preprocessor to use for style files.", + "type": "string", + "default": "basic", + "enum": ["basic", "lepton", "leptonx-lite", "leptonx"], + "x-prompt": { + "message": "Which theme would you like to use?", + "type": "list", + "items": [ + { "value": "basic", "label": "basic" }, + { "value": "lepton", "label": "lepton" }, + { "value": "leptonx-lite", "label": "leptonx-lite" }, + { "value": "leptonx", "label": "leptonx" } + ] + } + }, + "targetProject": { + "description": "The name of the project will change the style", + "type": "string", + "x-prompt": "Please enter the project name" + } + }, + "required": ["name"] +} diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts new file mode 100644 index 0000000000..06074dab78 --- /dev/null +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts @@ -0,0 +1,226 @@ +import { ThemeOptionsEnum } from './theme-options.enum'; + +export type StyleDefinition = + | { + input: string; + inject: boolean; + bundleName: string; + } + | string; + +export type StyleMapType = { + [key: string]: StyleDefinition[]; +}; + +export const styleMap: StyleMapType = { + [ThemeOptionsEnum.basic]: [ + { + input: 'node_modules/bootstrap/dist/css/bootstrap.rtl.min.css', + inject: false, + bundleName: 'bootstrap-rtl.min', + }, + { + input: 'node_modules/bootstrap/dist/css/bootstrap.min.css', + inject: true, + bundleName: 'bootstrap-ltr.min', + }, + ], + [ThemeOptionsEnum['leptonx-lite']]: [ + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.css', + inject: false, + bundleName: 'bootstrap-dim', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css', + inject: false, + bundleName: 'ng-bundle', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css', + inject: false, + bundleName: 'layout-bundle', + }, + { + input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css', + inject: false, + bundleName: 'abp-bundle', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css', + inject: false, + bundleName: 'bootstrap-dim.rtl', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css', + inject: false, + bundleName: 'ng-bundle.rtl', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css', + inject: false, + bundleName: 'layout-bundle.rtl', + }, + { + input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', + inject: false, + bundleName: 'abp-bundle.rtl', + }, + ], + [ThemeOptionsEnum.lepton]: [ + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css', + inject: false, + bundleName: 'lepton1', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css', + inject: false, + bundleName: 'lepton2', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css', + inject: false, + bundleName: 'lepton3', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css', + inject: false, + bundleName: 'lepton4', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css', + inject: false, + bundleName: 'lepton5', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css', + inject: false, + bundleName: 'lepton6', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css', + inject: false, + bundleName: 'lepton1.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css', + inject: false, + bundleName: 'lepton2.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css', + inject: false, + bundleName: 'lepton3.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css', + inject: false, + bundleName: 'lepton4.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css', + inject: false, + bundleName: 'lepton5.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css', + inject: false, + bundleName: 'lepton6.rtl', + }, + ], + [ThemeOptionsEnum.leptonx]: [ + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css', + inject: false, + bundleName: 'dark', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.css', + inject: false, + bundleName: 'light', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css', + inject: false, + bundleName: 'dim', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css', + inject: false, + bundleName: 'bootstrap-dim', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css', + inject: false, + bundleName: 'bootstrap-dark', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css', + inject: false, + bundleName: 'bootstrap-light', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css', + inject: false, + bundleName: 'ng-bundle', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css', + inject: false, + bundleName: 'layout-bundle', + }, + { + input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css', + inject: false, + bundleName: 'abp-bundle', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css', + inject: false, + bundleName: 'dark.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css', + inject: false, + bundleName: 'light.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css', + inject: false, + bundleName: 'dim.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css', + inject: false, + bundleName: 'bootstrap-dim.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css', + inject: false, + bundleName: 'bootstrap-dark.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css', + inject: false, + bundleName: 'bootstrap-light.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css', + inject: false, + bundleName: 'ng-bundle.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css', + inject: false, + bundleName: 'layout-bundle.rtl', + }, + { + input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', + inject: false, + bundleName: 'abp-bundle.rtl', + }, + ], +}; + +export const allStyles = Object.values(styleMap).reduce((acc, val) => [...acc, ...val], []); diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts new file mode 100644 index 0000000000..2904d99b8a --- /dev/null +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts @@ -0,0 +1,6 @@ +export const ThemeOptionsEnum = Object.freeze({ + basic: 'basic', + lepton: 'lepton', + 'leptonx-lite': 'leptonx-lite', + leptonx: 'leptonx', +}); diff --git a/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json b/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json index 64d64c1d80..38d7fb13a6 100644 --- a/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json @@ -15,7 +15,7 @@ }, "isSecondaryEntrypoint": { "description": "Is secondary entrypoint", - "type": "boolean", + "type": "boole∂an", "$default": false, "x-prompt": "Is secondary entrypoint?" }, diff --git a/npm/ng-packs/scripts/build-schematics.ts b/npm/ng-packs/scripts/build-schematics.ts index 8884ca9571..6690b272b3 100644 --- a/npm/ng-packs/scripts/build-schematics.ts +++ b/npm/ng-packs/scripts/build-schematics.ts @@ -21,6 +21,7 @@ class FileCopy { const PACKAGE_TO_BUILD = 'schematics'; const FILES_TO_COPY_AFTER_BUILD: (FileCopy | string)[] = [ { src: 'src/commands/create-lib/schema.json', dest: 'commands/create-lib/schema.json' }, + { src: 'src/commands/change-theme/schema.json', dest: 'commands/change-theme/schema.json' }, { src: 'src/commands/create-lib/files-package', dest: 'commands/create-lib/files-package' }, { src: 'src/commands/create-lib/files-secondary-entrypoint', From 527912444e20db0fcd3c94d5a9b8b9e7c8358755 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 10:09:56 +0300 Subject: [PATCH 5/9] fix typo --- .../packages/schematics/src/commands/create-lib/schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json b/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json index 38d7fb13a6..64d64c1d80 100644 --- a/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/create-lib/schema.json @@ -15,7 +15,7 @@ }, "isSecondaryEntrypoint": { "description": "Is secondary entrypoint", - "type": "boole∂an", + "type": "boolean", "$default": false, "x-prompt": "Is secondary entrypoint?" }, From 696f8a2a042f6adebe01739ebddddb3e96027853 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 12:05:02 +0300 Subject: [PATCH 6/9] Change input theme selection value to enum(number) --- .../src/commands/change-theme/index.ts | 15 +- .../src/commands/change-theme/model.ts | 4 +- .../src/commands/change-theme/schema.json | 14 +- .../src/commands/change-theme/style-map.ts | 425 +++++++++--------- .../change-theme/theme-options.enum.ts | 14 +- 5 files changed, 236 insertions(+), 236 deletions(-) diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts index 375c8ae97d..22f32be353 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts @@ -1,12 +1,12 @@ import { Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics'; import { isLibrary, updateWorkspace, WorkspaceDefinition } from '../../utils'; -import { allStyles, StyleDefinition, styleMap } from './style-map'; +import { allStyles, styleMap } from './style-map'; import { ProjectDefinition } from '@angular-devkit/core/src/workspace'; import { JsonArray, JsonValue } from '@angular-devkit/core'; import { ChangeThemeOptions } from './model'; +import { ThemeOptionsEnum } from './theme-options.enum'; export default function (_options: ChangeThemeOptions): Rule { - // eslint-disable-next-line @typescript-eslint/no-unused-vars return async (_: Tree, __: SchematicContext) => { const targetThemeName = _options.name; const selectedProject = _options.targetProject; @@ -23,7 +23,7 @@ export default function (_options: ChangeThemeOptions): Rule { function updateProjectStyle( projectName: string, workspace: WorkspaceDefinition, - targetThemeName: string, + targetThemeName: ThemeOptionsEnum, ) { const project = workspace.projects.get(projectName); @@ -41,7 +41,10 @@ function updateProjectStyle( const sanitizedStyles = removeThemeBasedStyles(styles); - const newStyles = getStylesOfSelectedTheme(targetThemeName); + const newStyles = styleMap.get(targetThemeName); + if (!newStyles) { + throw new SchematicsException('The theme does not found'); + } targetOption.styles = [...newStyles, ...sanitizedStyles] as JsonArray; } @@ -80,7 +83,3 @@ export const styleCompareFn = (item1: string | object, item2: string | object) = return o1.bundleName && o2.bundleName && o1.bundleName == o2.bundleName; }; - -export function getStylesOfSelectedTheme(theme: string): StyleDefinition[] { - return styleMap[theme]; -} diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts index 9bcda1d9b9..ca553c50c7 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts @@ -1,4 +1,6 @@ +import { ThemeOptionsEnum } from './theme-options.enum'; + export type ChangeThemeOptions = { - name: string; + name: ThemeOptionsEnum; targetProject: string; }; diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json index bbf9080912..1544620881 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json @@ -6,17 +6,17 @@ "properties": { "name": { "description": "The file extension or preprocessor to use for style files.", - "type": "string", - "default": "basic", - "enum": ["basic", "lepton", "leptonx-lite", "leptonx"], + "type": "integer", + "default": 1, + "enum": [1, 2, 3, 4], "x-prompt": { "message": "Which theme would you like to use?", "type": "list", "items": [ - { "value": "basic", "label": "basic" }, - { "value": "lepton", "label": "lepton" }, - { "value": "leptonx-lite", "label": "leptonx-lite" }, - { "value": "leptonx", "label": "leptonx" } + { "value": 1, "label": "Basic" }, + { "value": 2, "label": "Lepton" }, + { "value": 3, "label": "LeptonXLite" }, + { "value": 4, "label": "LeptonX" } ] } }, diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts index 06074dab78..aa5f17b21a 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts @@ -8,219 +8,216 @@ export type StyleDefinition = } | string; -export type StyleMapType = { - [key: string]: StyleDefinition[]; -}; +export const styleMap = new Map(); -export const styleMap: StyleMapType = { - [ThemeOptionsEnum.basic]: [ - { - input: 'node_modules/bootstrap/dist/css/bootstrap.rtl.min.css', - inject: false, - bundleName: 'bootstrap-rtl.min', - }, - { - input: 'node_modules/bootstrap/dist/css/bootstrap.min.css', - inject: true, - bundleName: 'bootstrap-ltr.min', - }, - ], - [ThemeOptionsEnum['leptonx-lite']]: [ - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.css', - inject: false, - bundleName: 'bootstrap-dim', - }, - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css', - inject: false, - bundleName: 'ng-bundle', - }, - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css', - inject: false, - bundleName: 'layout-bundle', - }, - { - input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css', - inject: false, - bundleName: 'abp-bundle', - }, - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css', - inject: false, - bundleName: 'bootstrap-dim.rtl', - }, - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css', - inject: false, - bundleName: 'ng-bundle.rtl', - }, - { - input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css', - inject: false, - bundleName: 'layout-bundle.rtl', - }, - { - input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', - inject: false, - bundleName: 'abp-bundle.rtl', - }, - ], - [ThemeOptionsEnum.lepton]: [ - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css', - inject: false, - bundleName: 'lepton1', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css', - inject: false, - bundleName: 'lepton2', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css', - inject: false, - bundleName: 'lepton3', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css', - inject: false, - bundleName: 'lepton4', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css', - inject: false, - bundleName: 'lepton5', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css', - inject: false, - bundleName: 'lepton6', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css', - inject: false, - bundleName: 'lepton1.rtl', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css', - inject: false, - bundleName: 'lepton2.rtl', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css', - inject: false, - bundleName: 'lepton3.rtl', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css', - inject: false, - bundleName: 'lepton4.rtl', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css', - inject: false, - bundleName: 'lepton5.rtl', - }, - { - input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css', - inject: false, - bundleName: 'lepton6.rtl', - }, - ], - [ThemeOptionsEnum.leptonx]: [ - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css', - inject: false, - bundleName: 'dark', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.css', - inject: false, - bundleName: 'light', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css', - inject: false, - bundleName: 'dim', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css', - inject: false, - bundleName: 'bootstrap-dim', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css', - inject: false, - bundleName: 'bootstrap-dark', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css', - inject: false, - bundleName: 'bootstrap-light', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css', - inject: false, - bundleName: 'ng-bundle', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css', - inject: false, - bundleName: 'layout-bundle', - }, - { - input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css', - inject: false, - bundleName: 'abp-bundle', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css', - inject: false, - bundleName: 'dark.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css', - inject: false, - bundleName: 'light.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css', - inject: false, - bundleName: 'dim.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css', - inject: false, - bundleName: 'bootstrap-dim.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css', - inject: false, - bundleName: 'bootstrap-dark.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css', - inject: false, - bundleName: 'bootstrap-light.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css', - inject: false, - bundleName: 'ng-bundle.rtl', - }, - { - input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css', - inject: false, - bundleName: 'layout-bundle.rtl', - }, - { - input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', - inject: false, - bundleName: 'abp-bundle.rtl', - }, - ], -}; +styleMap.set(ThemeOptionsEnum.Basic, [ + { + input: 'node_modules/bootstrap/dist/css/bootstrap.rtl.min.css', + inject: false, + bundleName: 'bootstrap-rtl.min', + }, + { + input: 'node_modules/bootstrap/dist/css/bootstrap.min.css', + inject: true, + bundleName: 'bootstrap-ltr.min', + }, +]); -export const allStyles = Object.values(styleMap).reduce((acc, val) => [...acc, ...val], []); +styleMap.set(ThemeOptionsEnum.Lepton, [ + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css', + inject: false, + bundleName: 'lepton1', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css', + inject: false, + bundleName: 'lepton2', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css', + inject: false, + bundleName: 'lepton3', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css', + inject: false, + bundleName: 'lepton4', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css', + inject: false, + bundleName: 'lepton5', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css', + inject: false, + bundleName: 'lepton6', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css', + inject: false, + bundleName: 'lepton1.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css', + inject: false, + bundleName: 'lepton2.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css', + inject: false, + bundleName: 'lepton3.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css', + inject: false, + bundleName: 'lepton4.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css', + inject: false, + bundleName: 'lepton5.rtl', + }, + { + input: 'node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css', + inject: false, + bundleName: 'lepton6.rtl', + }, +]); +styleMap.set(ThemeOptionsEnum.LeptonX, [ + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css', + inject: false, + bundleName: 'dark', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.css', + inject: false, + bundleName: 'light', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css', + inject: false, + bundleName: 'dim', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css', + inject: false, + bundleName: 'bootstrap-dim', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css', + inject: false, + bundleName: 'bootstrap-dark', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css', + inject: false, + bundleName: 'bootstrap-light', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css', + inject: false, + bundleName: 'ng-bundle', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css', + inject: false, + bundleName: 'layout-bundle', + }, + { + input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css', + inject: false, + bundleName: 'abp-bundle', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css', + inject: false, + bundleName: 'dark.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css', + inject: false, + bundleName: 'light.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css', + inject: false, + bundleName: 'dim.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css', + inject: false, + bundleName: 'bootstrap-dim.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css', + inject: false, + bundleName: 'bootstrap-dark.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css', + inject: false, + bundleName: 'bootstrap-light.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css', + inject: false, + bundleName: 'ng-bundle.rtl', + }, + { + input: 'node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css', + inject: false, + bundleName: 'layout-bundle.rtl', + }, + { + input: 'node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', + inject: false, + bundleName: 'abp-bundle.rtl', + }, +]); +styleMap.set(ThemeOptionsEnum.LeptonXLite, [ + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.css', + inject: false, + bundleName: 'bootstrap-dim', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css', + inject: false, + bundleName: 'ng-bundle', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css', + inject: false, + bundleName: 'layout-bundle', + }, + { + input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css', + inject: false, + bundleName: 'abp-bundle', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css', + inject: false, + bundleName: 'bootstrap-dim.rtl', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css', + inject: false, + bundleName: 'ng-bundle.rtl', + }, + { + input: 'node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css', + inject: false, + bundleName: 'layout-bundle.rtl', + }, + { + input: 'node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css', + inject: false, + bundleName: 'abp-bundle.rtl', + }, +]); +// the code written by Github co-pilot. thank go-pilot. You are the best sidekick. +export const allStyles = Array.from(styleMap.values()).reduce((acc, val) => [...acc, ...val], []); diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts b/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts index 2904d99b8a..6e2f863674 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts @@ -1,6 +1,8 @@ -export const ThemeOptionsEnum = Object.freeze({ - basic: 'basic', - lepton: 'lepton', - 'leptonx-lite': 'leptonx-lite', - leptonx: 'leptonx', -}); +// this enum create by https://raw.githubusercontent.com/abpframework/abp/rel-6.0/framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Building/Theme.cs + +export enum ThemeOptionsEnum { + Basic = 1, + Lepton = 2, + LeptonXLite = 3, + LeptonX = 4, +} From 178f9392ce37ac769bfa3cc8a950b9e82f9f8752 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 12:17:28 +0300 Subject: [PATCH 7/9] Change package-name --- .../packages/schematics/src/commands/change-theme/schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json index 1544620881..327e052635 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json @@ -1,6 +1,6 @@ { "$schema": "http://json-schema.org/schema", - "$id": "SchematicsABPModuleTemplateCreator", + "$id": "SchematicsABPThemeChanger", "title": "ABP Theme Style Generator API Schema", "type": "object", "properties": { From 8a36e890cb399d2382eecee737433229b8763c18 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 13:17:29 +0300 Subject: [PATCH 8/9] Change description --- .../packages/schematics/src/commands/change-theme/schema.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json index 327e052635..f38cc0037b 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json @@ -5,7 +5,7 @@ "type": "object", "properties": { "name": { - "description": "The file extension or preprocessor to use for style files.", + "description": "The name of theme will change.", "type": "integer", "default": 1, "enum": [1, 2, 3, 4], @@ -21,7 +21,7 @@ } }, "targetProject": { - "description": "The name of the project will change the style", + "description": "The name of the project will change the style.The project type must be 'application'", "type": "string", "x-prompt": "Please enter the project name" } From ae166d426266354800e3c587fb08dc8e0e047ee6 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 26 Oct 2022 17:27:05 +0300 Subject: [PATCH 9/9] minor fix --- .../src/commands/change-theme/schema.json | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json index f38cc0037b..6eb6bc71a5 100644 --- a/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json +++ b/npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json @@ -6,8 +6,11 @@ "properties": { "name": { "description": "The name of theme will change.", - "type": "integer", - "default": 1, + "type": "number", + "$default": { + "$source": "argv", + "index": 0 + }, "enum": [1, 2, 3, 4], "x-prompt": { "message": "Which theme would you like to use?", @@ -23,7 +26,11 @@ "targetProject": { "description": "The name of the project will change the style.The project type must be 'application'", "type": "string", - "x-prompt": "Please enter the project name" + "x-prompt": "Please enter the project name", + "$default": { + "$source": "argv", + "index": 1 + } } }, "required": ["name"]