imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14445 from abpframework/issue/12213

Browse Source 
Add Change-Theme schematic
pull/14460/head
Muhammed Altuğ 3 years ago committed by GitHub
parent 757901abe3 ae166d4262
commit 829844942d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 366 additions and 0 deletions
Show Stats Download Patch File Download Diff File

6
npm/ng-packs/packages/schematics/src/collection.json
Unescape View File

@ -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"
}
}
}

85
npm/ng-packs/packages/schematics/src/commands/change-theme/index.ts
Unescape View File

@ -0,0 +1,85 @@
import { Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics';
import { isLibrary, updateWorkspace, WorkspaceDefinition } from '../../utils';
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 {
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: ThemeOptionsEnum,
) {
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 = styleMap.get(targetThemeName);
if (!newStyles) {
throw new SchematicsException('The theme does not found');
}
targetOption.styles = [...newStyles, ...sanitizedStyles] as JsonArray;
}
export function getProjectTargetOptions(
project: ProjectDefinition,
buildTarget: string,
): Record<string, JsonValue | undefined> {
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;
};

6
npm/ng-packs/packages/schematics/src/commands/change-theme/model.ts
Unescape View File

@ -0,0 +1,6 @@
import { ThemeOptionsEnum } from './theme-options.enum';
export type ChangeThemeOptions = {
name: ThemeOptionsEnum;
targetProject: string;
};

37
npm/ng-packs/packages/schematics/src/commands/change-theme/schema.json
Unescape View File

@ -0,0 +1,37 @@
{
"$schema": "http://json-schema.org/schema",
"$id": "SchematicsABPThemeChanger",
"title": "ABP Theme Style Generator API Schema",
"type": "object",
"properties": {
"name": {
"description": "The name of theme will change.",
"type": "number",
"$default": {
"$source": "argv",
"index": 0
},
"enum": [1, 2, 3, 4],
"x-prompt": {
"message": "Which theme would you like to use?",
"type": "list",
"items": [
{ "value": 1, "label": "Basic" },
{ "value": 2, "label": "Lepton" },
{ "value": 3, "label": "LeptonXLite" },
{ "value": 4, "label": "LeptonX" }
]
}
},
"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",
"$default": {
"$source": "argv",
"index": 1
}
}
},
"required": ["name"]
}

223
npm/ng-packs/packages/schematics/src/commands/change-theme/style-map.ts
Unescape View File

@ -0,0 +1,223 @@
import { ThemeOptionsEnum } from './theme-options.enum';
export type StyleDefinition =
| {
input: string;
inject: boolean;
bundleName: string;
}
| string;
export const styleMap = new Map<ThemeOptionsEnum, StyleDefinition[]>();
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',
},
]);
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], []);

8
npm/ng-packs/packages/schematics/src/commands/change-theme/theme-options.enum.ts
Unescape View File

@ -0,0 +1,8 @@
// 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,
}

1
npm/ng-packs/scripts/build-schematics.ts
Unescape View File

@ -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',

Write Preview
Loading…
Cancel
Save