From 2da4e5486f28e255d9a93cd264bb0eda206dcf14 Mon Sep 17 00:00:00 2001 From: Masum ULU Date: Tue, 8 Aug 2023 14:04:05 +0300 Subject: [PATCH 1/4] Add class & style property to EntityAction --- .../lib/components/grid-actions/grid-actions.component.html | 4 +++- .../theme-shared/extensions/src/lib/models/actions.ts | 2 ++ .../theme-shared/extensions/src/lib/models/entity-actions.ts | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html index 49cca7d326..2b43dceab5 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html @@ -52,7 +52,9 @@ *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button" - class="btn btn-primary text-center" + class="btn text-center" + [class]="action.btnClass" + [style]="action.btnStyle" > { public readonly permission: string, public readonly visible: ActionPredicate = () => true, public readonly action: ActionCallback = () => {}, + public readonly btnClass?: string, + public readonly btnStyle?: string, ) {} } diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts index 99253c0da8..cb17b9f645 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts @@ -22,11 +22,15 @@ export class EntityActionsFactory extends ActionsFactory extends Action { readonly text: string; readonly icon: string; + readonly btnClass?: string; + readonly btnStyle?: string; constructor(options: EntityActionOptions) { super(options.permission || '', options.visible, options.action); this.text = options.text; this.icon = options.icon || ''; + this.btnClass = options.btnClass || 'btn-primary'; + this.btnStyle = options.btnStyle; } static create(options: EntityActionOptions) { From 74275a17ddbaa3944aa8904b69d473365d16d76c Mon Sep 17 00:00:00 2001 From: Masum ULU Date: Tue, 8 Aug 2023 15:14:15 +0300 Subject: [PATCH 2/4] Update doc. for entity-action-extensions --- docs/en/UI/Angular/Entity-Action-Extensions.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/en/UI/Angular/Entity-Action-Extensions.md b/docs/en/UI/Angular/Entity-Action-Extensions.md index 1ee0a3b70a..6a9df909fb 100644 --- a/docs/en/UI/Angular/Entity-Action-Extensions.md +++ b/docs/en/UI/Angular/Entity-Action-Extensions.md @@ -312,6 +312,8 @@ type EntityActionOptions = { icon?: string, permission?: string, visible?: ActionPredicate, + btnClass?: string, + btnStyle?: string, }; ``` @@ -322,6 +324,8 @@ As you see, passing `action` and `text` is enough to create an entity action. He - **icon** is the classes that define an icon to be placed before the text. (_default:_ `''`) - **permission** is the permission context which will be used to decide if this type of grid action should be displayed to the user or not. (_default:_ `undefined`) - **visible** is a predicate that will be used to decide if the current record should have this grid action or not. (_default:_ `() => true`) +- **btnClass** is the classes that will be applied to the button. (_default:_ `'btn btn-primary'`) +- **btnStyle** is the styles that will be applied to the button. (_default:_ `''`) You may find a full example below. @@ -339,6 +343,8 @@ const options: EntityActionOptions = { icon: 'fa fa-unlock', permission: 'AbpIdentity.Users.Update', visible: data => data.record.isLockedOut, + btnClass:'btn-warning', + btnStyle: 'margin-right: 5px;', }; const action = new EntityAction(options); From 5aed1b9a730560a96ecfb31925ad3b9a2cf64320 Mon Sep 17 00:00:00 2001 From: Masum ULU Date: Wed, 9 Aug 2023 09:50:04 +0300 Subject: [PATCH 3/4] Add icon property to NavItem model --- npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts index c673bc74e2..3afce94a0c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts @@ -18,6 +18,7 @@ export class NavItem { order?: number; requiredPolicy?: string; visible?: NavBarPropPredicate; + icon?: string; constructor(props: Partial) { Object.assign(this, props); } From eb51ad91a7508ebc6947f7629e62af5792f5c13b Mon Sep 17 00:00:00 2001 From: Masum ULU Date: Thu, 10 Aug 2023 14:46:05 +0300 Subject: [PATCH 4/4] Update btnClass default value in EntityAction --- .../src/lib/components/grid-actions/grid-actions.component.html | 1 - .../theme-shared/extensions/src/lib/models/entity-actions.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html index 2b43dceab5..9f567271a4 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html @@ -52,7 +52,6 @@ *abpPermission="action.permission; runChangeDetection: false" (click)="action.action(data)" type="button" - class="btn text-center" [class]="action.btnClass" [style]="action.btnStyle" > diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts index cb17b9f645..4a801e841e 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-actions.ts @@ -29,7 +29,7 @@ export class EntityAction extends Action { super(options.permission || '', options.visible, options.action); this.text = options.text; this.icon = options.icon || ''; - this.btnClass = options.btnClass || 'btn-primary'; + this.btnClass = options.btnClass || 'btn btn-primary text-center'; this.btnStyle = options.btnStyle; }