Merge pull request #15585 from abpframework/issue/15467

Angular UI minor improvements
4 years ago · e236d910f0
8 changed files with 163 additions and 180 deletions
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@ -1,48 +1,38 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
+<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
+  <div id="identity-roles-wrapper" class="card">
+    <div class="card-body">
+      <abp-extensible-table
+        [data]="data.items"
+        [recordsTotal]="data.totalCount"
+        [list]="list"
+      ></abp-extensible-table>
    </div>
  </div>

-  <div class="card-body">
-    <abp-extensible-table
-      [data]="data.items"
-      [recordsTotal]="data.totalCount"
-      [list]="list"
-    ></abp-extensible-table>
-  </div>
-</div>
-
-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
-  </ng-template>
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
+    </ng-template>

-  <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
-      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-    </form>
-  </ng-template>
+    <ng-template #abpBody>
+      <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+      </form>
+    </ng-template>

-  <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" abpClose>
-      {{ 'AbpIdentity::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
-      'AbpIdentity::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-secondary" abpClose>
+        {{ 'AbpIdentity::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
+        'AbpIdentity::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>

-<abp-permission-management
-  #abpPermissionManagement="abpPermissionManagement"
-  *abpReplaceableTemplate="
+  <abp-permission-management
+    #abpPermissionManagement="abpPermissionManagement"
+    *abpReplaceableTemplate="
    {
      inputs: {
        providerName: { value: 'R' },
@ -55,6 +45,7 @@
    };
    let init = initTemplate
  "
-  (abpInit)="init(abpPermissionManagement)"
->
-</abp-permission-management>
+    (abpInit)="init(abpPermissionManagement)"
+  >
+  </abp-permission-management>
+</abp-page>
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@ -1,89 +1,83 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
-  <div class="card-body">
-    <div id="data-tables-table-filter" class="data-tables-filter">
-      <div class="input-group">
-        <input
-          type="search"
-          class="form-control"
-          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          [(ngModel)]="list.filter"
-        />
+<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
+
+  <div id="identity-roles-wrapper" class="card">
+    <div class="card-body">
+      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
+        <div class="input-group">
+          <input
+            type="search"
+            class="form-control"
+            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+            [(ngModel)]="list.filter"
+          />
+        </div>
      </div>
-    </div>

-    <abp-extensible-table
-      [data]="data.items"
-      [recordsTotal]="data.totalCount"
-      [list]="list"
-    ></abp-extensible-table>
+      <abp-extensible-table
+        [data]="data.items"
+        [recordsTotal]="data.totalCount"
+        [list]="list"
+      ></abp-extensible-table>
+    </div>
  </div>
-</div>

-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
-  </ng-template>
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
+    </ng-template>

-  <ng-template #abpBody>
-    <ng-template #loaderRef
-      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
-    ></ng-template>
+    <ng-template #abpBody>
+      <ng-template #loaderRef
+      >
+        <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+        >
+      </ng-template>

-    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
-      <ul ngbNav #nav="ngbNav" class="nav-tabs">
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-          </ng-template>
-        </li>
+      <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
+        <ul ngbNav #nav="ngbNav" class="nav-tabs">
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+            </ng-template>
+          </li>

-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <div
-              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="form-check mb-2"
-            >
-              <input
-                type="checkbox"
-                class="form-check-input"
-                [attr.id]="'roles-' + i"
-                [formControl]="roleGroup.controls[roles[i].name]"
-              />
-              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
-            </div>
-          </ng-template>
-        </li>
-      </ul>
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <div
+                *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
+                class="form-check mb-2"
+              >
+                <input
+                  type="checkbox"
+                  class="form-check-input"
+                  [attr.id]="'roles-' + i"
+                  [formControl]="roleGroup.controls[roles[i].name]"
+                />
+                <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
+              </div>
+            </ng-template>
+          </li>
+        </ul>

-      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
-    </form>
-  </ng-template>
+        <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+      </form>
+    </ng-template>

-  <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" abpClose>
-      {{ 'AbpIdentity::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
-      'AbpIdentity::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-secondary" abpClose>
+        {{ 'AbpIdentity::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
+        'AbpIdentity::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>

-<abp-permission-management
-  #abpPermissionManagement="abpPermissionManagement"
-  *abpReplaceableTemplate="
+  <abp-permission-management
+    #abpPermissionManagement="abpPermissionManagement"
+    *abpReplaceableTemplate="
    {
      inputs: {
        providerName: { value: 'U' },
@ -95,7 +89,8 @@
    };
    let init = initTemplate
  "
-  [entityDisplayName]="entityDisplayName"
-  (abpInit)="init(abpPermissionManagement)"
->
-</abp-permission-management>
+    [entityDisplayName]="entityDisplayName"
+    (abpInit)="init(abpPermissionManagement)"
+  >
+  </abp-permission-management>
+</abp-page>
--- a/npm/ng-packs/packages/identity/src/lib/identity.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
@ -17,6 +17,7 @@ import {
  IDENTITY_ENTITY_PROP_CONTRIBUTORS,
  IDENTITY_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';

@NgModule({
  declarations: [RolesComponent, UsersComponent],
@ -30,6 +31,7 @@ import {
    NgbDropdownModule,
    PermissionManagementModule,
    NgxValidateCoreModule,
+    PageModule,
  ],
 })
 export class IdentityModule {
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@ -1,63 +1,55 @@
-<div id="wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h5>
-      </div>
-      <div class="text-end col col-md-6">
-        <abp-page-toolbar [record]="data.items"></abp-page-toolbar>
-      </div>
-    </div>
-  </div>
+<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">

-  <div class="card-body">
-    <div id="data-tables-table-filter" class="data-tables-filter">
-      <div class="input-group">
-        <input
-          type="search"
-          class="form-control"
-          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          [(ngModel)]="list.filter"
-        />
+
+  <div id="wrapper" class="card">
+    <div class="card-body">
+      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
+        <div class="input-group">
+          <input
+            type="search"
+            class="form-control"
+            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+            [(ngModel)]="list.filter"
+          />
+        </div>
      </div>
-    </div>

-    <abp-extensible-table
-      [data]="data.items || []"
-      [recordsTotal]="data.totalCount || 0"
-      [list]="list"
-    ></abp-extensible-table>
+      <abp-extensible-table
+        [data]="data.items || []"
+        [recordsTotal]="data.totalCount || 0"
+        [list]="list"
+      ></abp-extensible-table>
+    </div>
  </div>
-</div>

-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
-  <ng-template #abpHeader>
-    <h3>
-      {{
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>
+        {{
        (selected?.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant')
          | abpLocalization
-      }}
-    </h3>
-  </ng-template>
+        }}
+      </h3>
+    </ng-template>

-  <ng-template #abpBody>
-    <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
-      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-    </form>
-  </ng-template>
+    <ng-template #abpBody>
+      <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
+        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+      </form>
+    </ng-template>

-  <ng-template #abpFooter>
-    <button abpClose type="button" class="btn btn-secondary">
-      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
-    </button>
-    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
-      'AbpTenantManagement::Save' | abpLocalization
-    }}</abp-button>
-  </ng-template>
-</abp-modal>
+    <ng-template #abpFooter>
+      <button abpClose type="button" class="btn btn-secondary">
+        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+      </button>
+      <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
+        'AbpTenantManagement::Save' | abpLocalization
+        }}</abp-button>
+    </ng-template>
+  </abp-modal>

-<abp-feature-management
-  *abpReplaceableTemplate="{
+  <abp-feature-management
+    *abpReplaceableTemplate="{
    inputs: {
      providerName: { value: 'T' },
      providerKey: { value: providerKey },
@ -66,8 +58,9 @@
    outputs: { visibleChange: $any(onVisibleFeaturesChange) },
    componentKey: featureManagementKey
  }"
-  [(visible)]="visibleFeatures"
-  providerName="T"
-  [providerKey]="providerKey"
->
-</abp-feature-management>
+    [(visible)]="visibleFeatures"
+    providerName="T"
+    [providerKey]="providerKey"
+  >
+  </abp-feature-management>
+</abp-page>
--- a/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/tenant-management.module.ts
@ -16,6 +16,7 @@ import {
  TENANT_MANAGEMENT_ENTITY_PROP_CONTRIBUTORS,
  TENANT_MANAGEMENT_TOOLBAR_ACTION_CONTRIBUTORS,
 } from './tokens/extensions.token';
+import { PageModule } from '@abp/ng.components/page';

@NgModule({
  declarations: [TenantsComponent],
@ -28,6 +29,7 @@ import {
    NgbDropdownModule,
    FeatureManagementModule,
    UiExtensionsModule,
+    PageModule,
  ],
 })
 export class TenantManagementModule {
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
@ -1,6 +1,6 @@
 <div class="row justify-content-end mx-0 gap-2" id="AbpContentToolbar">
  <div
-    class="col-auto px-0 pt-0 pt-md-2"
+    class="col-auto px-0 pt-0 "
    [class.pe-0]="last"
    *ngFor="let action of actionList; trackBy: trackByFn; let last = last"
  >
--- a/templates/app-nolayers/angular/package.json
+++ b/templates/app-nolayers/angular/package.json
@ -20,7 +20,7 @@
    "@abp/ng.setting-management": "~7.0.1",
    "@abp/ng.tenant-management": "~7.0.1",
    "@abp/ng.theme.shared": "~7.0.1",
-    "@abp/ng.theme.lepton-x": "~2.0.0-rc.4",
+    "@abp/ng.theme.lepton-x": "~2.0.2",
    "@angular/animations": "^15.0.1",
    "@angular/common": "^15.0.1",
    "@angular/compiler": "^15.0.1",
--- a/templates/app/angular/package.json
+++ b/templates/app/angular/package.json
@ -20,7 +20,7 @@
    "@abp/ng.setting-management": "~7.0.1",
    "@abp/ng.tenant-management": "~7.0.1",
    "@abp/ng.theme.shared": "~7.0.1",
-    "@abp/ng.theme.lepton-x": "~2.0.0-rc.4",
+    "@abp/ng.theme.lepton-x": "~2.0.2",
    "@angular/animations": "^15.0.1",
    "@angular/common": "^15.0.1",
    "@angular/compiler": "^15.0.1",