From d3b23682d742cd2c0d4c4556326c5284b178670a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 16:26:54 +0300 Subject: [PATCH 1/9] create card component --- .../components/card/card-body.component.ts | 7 +++++ .../components/card/card-title.component.ts | 7 +++++ .../src/lib/components/card/card.component.ts | 27 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts new file mode 100644 index 0000000000..fc540e0002 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'abp-card-body', + template: ``, +}) +export class CardBodyComponent {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts new file mode 100644 index 0000000000..b40e5b1767 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'abp-card-title', + template: ``, +}) +export class CardTitleComponent {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts new file mode 100644 index 0000000000..9a97fa33b2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts @@ -0,0 +1,27 @@ +import { Component, ContentChild, Input } from '@angular/core'; +import { CardBodyComponent } from './card-body.component'; +import { CardTitleComponent } from './card-title.component'; + +@Component({ + selector: 'abp-card', + template: ` +
+
+ +
+
+ +
+
`, +}) +export class CardComponent { + @Input() class:string + + @Input() style:string + + @ContentChild(CardBodyComponent) + cardBodyTemplate?: CardBodyComponent; + + @ContentChild(CardTitleComponent) + cardTitleTemplate?: CardTitleComponent; +} From bb9f29a5a7ca341dc5ebc5be7c49bdf708d01c4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 16:27:52 +0300 Subject: [PATCH 2/9] import card component to theme-shared module --- .../theme-shared/src/lib/components/index.ts | 3 +++ .../theme-shared/src/lib/theme-shared.module.ts | 13 +++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 810d5a991a..09ae029a7e 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts @@ -11,3 +11,6 @@ export * from './modal/modal.component'; export * from './toast-container/toast-container.component'; export * from './toast/toast.component'; export * from './password/password.component'; +export * from './card/card.component'; +export * from './card/card-title.component'; +export * from './card/card-body.component'; \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index fd9a0cd236..492cff0aa8 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -36,6 +36,9 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t import { DateParserFormatter } from './utils/date-parser-formatter'; import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token'; import { PasswordComponent } from './components/password/password.component'; +import { CardComponent } from './components/card/card.component'; +import { CardTitleComponent } from './components/card/card-title.component'; +import { CardBodyComponent } from './components/card/card-body.component'; const declarationsWithExports = [ BreadcrumbComponent, @@ -52,6 +55,9 @@ const declarationsWithExports = [ NgxDatatableListDirective, LoadingDirective, ModalCloseDirective, + CardComponent, + CardTitleComponent, + CardBodyComponent, ]; @NgModule({ @@ -62,11 +68,14 @@ const declarationsWithExports = [ NgbPaginationModule, EllipsisModule, ], - declarations: [...declarationsWithExports, HttpErrorWrapperComponent], + declarations: [ + ...declarationsWithExports, + HttpErrorWrapperComponent, + ], exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports], providers: [DatePipe], }) -export class BaseThemeSharedModule {} +export class BaseThemeSharedModule { } @NgModule({ imports: [BaseThemeSharedModule], From efc71e3ec7868e3c6ddc453ab4f53b5ec2869e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 16:31:56 +0300 Subject: [PATCH 3/9] use abp-card component instead of card class --- .../dev-app/src/app/home/home.component.html | 156 ++++++------------ 1 file changed, 54 insertions(+), 102 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html index 2d249da3d8..ae646f2b6b 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html +++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html @@ -10,15 +10,8 @@

{{ '::LongWelcomeMessage' | abpLocalization }}

- + {{ 'AbpAccount::Login' | abpLocalization }} @@ -26,11 +19,11 @@

Let's improve your application!

Here are some links to help you get started:

-
-
+ + +
- + "> - + "> - + ">
- + ">

- - + + "> - + style="width: 72px; height: 28px; border: none; display: inline-block">

- + "> - + ">
-
-
+ +

Meet the ABP Commercial

A Complete Web Application Platform Built on the ABP Framework

- -
-
+ +

ABP Commercial is a platform based on the open source ABP framework. It provides pre-built application modules, rapid @@ -199,8 +174,7 @@

- + "> - + "> - + "> - + "> - + "> - + ">
-
-
+ + +

- Abp Framework - Abp Commercial - abpframework + Abp Framework + Abp Commercial + abpframework

@@ -295,17 +256,9 @@ {{ context.title }}

- - {{ link.label }} + + {{ link.label + }} @@ -316,9 +269,8 @@
- Details + Details
@@ -338,4 +290,4 @@ border-left: 0 !important; } } - + \ No newline at end of file From a9651a14910dd98232323617fb5526dd8e035d1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 17:38:33 +0300 Subject: [PATCH 4/9] lint html --- npm/ng-packs/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index e45e1d255c..72c8ffd062 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -131,8 +131,8 @@ }, "dependencies": {}, "lint-staged": { - "**/*.{js,jsx,ts,tsx}": [ + "**/*.{js,jsx,ts,tsx,html,css,scss}": [ "npx prettier --write --config .prettierrc " ] } -} +} \ No newline at end of file From bbd2ad99f3e3be857507f3a0d70333e04b4b7e9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 17:59:10 +0300 Subject: [PATCH 5/9] move card components to card module --- .../components/card/card-body.component.ts | 4 +++- .../components/card/card-title.component.ts | 4 +++- .../src/lib/components/card/card.component.ts | 17 ++++++----------- .../src/lib/components/card/card.module.ts | 14 ++++++++++++++ .../src/lib/theme-shared.module.ts | 19 +++++++++---------- 5 files changed, 35 insertions(+), 23 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts index fc540e0002..b7efd90236 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts @@ -2,6 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'abp-card-body', - template: ``, + template: `
+ +
`, }) export class CardBodyComponent {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts index b40e5b1767..f629636854 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts @@ -2,6 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'abp-card-title', - template: ``, + template: `
+ +
`, }) export class CardTitleComponent {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts index 9a97fa33b2..317e5800b9 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts @@ -4,20 +4,15 @@ import { CardTitleComponent } from './card-title.component'; @Component({ selector: 'abp-card', - template: ` -
-
- -
-
- -
-
`, + template: `
+ + +
`, }) export class CardComponent { - @Input() class:string + @Input() cardClass: string; - @Input() style:string + @Input() cardStyle: string; @ContentChild(CardBodyComponent) cardBodyTemplate?: CardBodyComponent; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts new file mode 100644 index 0000000000..d8050a40cd --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { CardBodyComponent } from './card-body.component'; +import { CardTitleComponent } from './card-title.component'; +import { CardComponent } from './card.component'; + +const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent]; + +@NgModule({ + declarations: [...declarationsWithExports], + imports: [CommonModule], + exports: [...declarationsWithExports], +}) +export class CardModule {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 492cff0aa8..58f93b1bda 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -36,9 +36,7 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t import { DateParserFormatter } from './utils/date-parser-formatter'; import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token'; import { PasswordComponent } from './components/password/password.component'; -import { CardComponent } from './components/card/card.component'; -import { CardTitleComponent } from './components/card/card-title.component'; -import { CardBodyComponent } from './components/card/card-body.component'; +import { CardModule } from './components/card/card.module'; const declarationsWithExports = [ BreadcrumbComponent, @@ -55,9 +53,6 @@ const declarationsWithExports = [ NgxDatatableListDirective, LoadingDirective, ModalCloseDirective, - CardComponent, - CardTitleComponent, - CardBodyComponent, ]; @NgModule({ @@ -67,15 +62,19 @@ const declarationsWithExports = [ NgxValidateCoreModule, NgbPaginationModule, EllipsisModule, + CardModule, ], - declarations: [ + declarations: [...declarationsWithExports, HttpErrorWrapperComponent], + exports: [ + NgxDatatableModule, + EllipsisModule, + NgxValidateCoreModule, ...declarationsWithExports, - HttpErrorWrapperComponent, + CardModule, ], - exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports], providers: [DatePipe], }) -export class BaseThemeSharedModule { } +export class BaseThemeSharedModule {} @NgModule({ imports: [BaseThemeSharedModule], From b486e2619d3b25919536a7b344e7efb66e78b2ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 18:00:09 +0300 Subject: [PATCH 6/9] use cardClass --- .../dev-app/src/app/home/home.component.html | 144 ++++++++++++------ 1 file changed, 96 insertions(+), 48 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html index ae646f2b6b..7024ab69e5 100644 --- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html +++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html @@ -10,8 +10,15 @@

{{ '::LongWelcomeMessage' | abpLocalization }}

- + {{ 'AbpAccount::Login' | abpLocalization }} @@ -19,11 +26,11 @@

Let's improve your application!

Here are some links to help you get started:

- - +
- + " + > - + " + > - + " + >
- + " + >

- - + + " + > - + style="width: 72px; height: 28px; border: none; display: inline-block" + >

- + " + > - + " + >
@@ -165,7 +189,7 @@

Meet the ABP Commercial

A Complete Web Application Platform Built on the ABP Framework

- +

ABP Commercial is a platform based @@ -174,7 +198,8 @@

- + " + > - + " + > - + " + > - + " + > - + " + > - + " + >
- +

- Abp Framework - Abp Commercial - abpframework + Abp Framework + Abp Commercial + abpframework

@@ -256,9 +295,17 @@ {{ context.title }}

- - {{ link.label - }} + + {{ link.label }} @@ -269,8 +316,9 @@
- Details + Details
@@ -290,4 +338,4 @@ border-left: 0 !important; } } - \ No newline at end of file + From 9c7efc346cc21046e989317e0f385d51538c2fe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 18:12:32 +0300 Subject: [PATCH 7/9] export card module --- .../packages/theme-shared/src/lib/components/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 09ae029a7e..095af5ef26 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts @@ -11,6 +11,4 @@ export * from './modal/modal.component'; export * from './toast-container/toast-container.component'; export * from './toast/toast.component'; export * from './password/password.component'; -export * from './card/card.component'; -export * from './card/card-title.component'; -export * from './card/card-body.component'; \ No newline at end of file +export * from './card/index'; From de5a33026e8981efe22060520564583ee8465141 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Thu, 2 Feb 2023 18:13:28 +0300 Subject: [PATCH 8/9] export card components from input --- .../packages/theme-shared/src/lib/components/card/index.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts new file mode 100644 index 0000000000..8d6bbd86d8 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts @@ -0,0 +1,4 @@ +export * from './card.module'; +export * from './card.component'; +export * from './card-body.component'; +export * from './card-title.component'; From f940c0c4d5d44224540f1caf8f1e44092b2a6341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?= <30300440+bariscanyilmaz@users.noreply.github.com> Date: Wed, 15 Feb 2023 14:01:41 +0300 Subject: [PATCH 9/9] fix lint --- .../theme-shared/src/lib/directives/visible.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts index 9c2c408d0e..9613779472 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts @@ -8,7 +8,7 @@ export class AbpVisibleDirective implements OnDestroy, OnInit { conditionSubscription: Subscription | undefined; isVisible: boolean | undefined; - @Input('abpVisible') set abpVisible( + @Input() set abpVisible( value: boolean | Promise | Observable | undefined | null, ) { this.condition$ = checkType(value);