feat: update ui design

#2024

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -1,23 +1,23 @@
-<div class="row entry-row">
-  <div class="col-auto">
-    <h1 class="content-header-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h1>
-  </div>
-  <div class="col">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar">
-      <button
-        [abpPermission]="'AbpIdentity.Roles.Create'"
-        id="create-role"
-        class="btn btn-primary"
-        type="button"
-        (click)="onAdd()"
-      >
-        <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
-      </button>
+<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-right col col-md-6">
+        <button
+          [abpPermission]="'AbpIdentity.Roles.Create'"
+          id="create-role"
+          class="btn btn-primary"
+          type="button"
+          (click)="add()"
+        >
+          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
+        </button>
+      </div>
     </div>
   </div>
-</div>
 
-<div id="identity-roles-wrapper" class="card">
   <div class="card-body">
     <p-table
       *ngIf="[150, 0] as columnWidths"
@@ -73,7 +73,7 @@
                 <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
               </button>
               <div ngbDropdownMenu>
-                <button [abpPermission]="'AbpIdentity.Roles.Update'" ngbDropdownItem (click)="onEdit(data.id)">
+                <button [abpPermission]="'AbpIdentity.Roles.Update'" ngbDropdownItem (click)="edit(data.id)">
                   {{ 'AbpIdentity::Edit' | abpLocalization }}
                 </button>
                 <button

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -65,12 +65,12 @@ export class RolesComponent implements OnInit {
     this.isModalVisible = true;
   }
 
-  onAdd() {
+  add() {
     this.selected = {} as Identity.RoleItem;
     this.openModal();
   }
 
-  onEdit(id: string) {
+  edit(id: string) {
     this.store
       .dispatch(new GetRoleById(id))
       .pipe(pluck('IdentityState', 'selectedRole'))

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -1,23 +1,22 @@
-<div class="row entry-row">
-  <div class="col-auto">
-    <h1 class="content-header-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h1>
-  </div>
-  <div class="col">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar">
-      <button
-        [abpPermission]="'AbpIdentity.Users.Create'"
-        id="create-role"
-        class="btn btn-primary"
-        type="button"
-        (click)="onAdd()"
-      >
-        <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
-      </button>
+<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-right col col-md-6">
+        <button
+          [abpPermission]="'AbpIdentity.Users.Create'"
+          id="create-role"
+          class="btn btn-primary"
+          type="button"
+          (click)="add()"
+        >
+          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
+        </button>
+      </div>
     </div>
   </div>
-</div>
-
-<div id="identity-roles-wrapper" class="card">
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
       <label
@@ -87,11 +86,7 @@
                 <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
               </button>
               <div ngbDropdownMenu>
-                <button
-                  [abpPermission]="'AbpIdentity.Users.Update'"
-                  ngbDropdownItem
-                  (click)="onEdit(data.id)"
-                >
+                <button [abpPermission]="'AbpIdentity.Users.Update'" ngbDropdownItem (click)="edit(data.id)">
                   {{ 'AbpIdentity::Edit' | abpLocalization }}
                 </button>
                 <button

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -105,13 +105,13 @@ export class UsersComponent implements OnInit {
     this.isModalVisible = true;
   }
 
-  onAdd() {
+  add() {
     this.selected = {} as Identity.UserItem;
     this.selectedUserRoles = [] as Identity.RoleItem[];
     this.openModal();
   }
 
-  onEdit(id: string) {
+  edit(id: string) {
     this.store
       .dispatch(new GetUserById(id))
       .pipe(

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -1,24 +1,23 @@
-<div class="row entry-row">
-  <div class="col-auto">
-    <h1 class="content-header-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h1>
-  </div>
-  <div class="col">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar">
-      <button
-        [abpPermission]="'AbpTenantManagement.Tenants.Create'"
-        id="create-tenants"
-        class="btn btn-primary"
-        type="button"
-        (click)="onAddTenant()"
-      >
-        <i class="fa fa-plus mr-1"></i>
-        <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
-      </button>
+<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-right col col-md-6">
+        <button
+          [abpPermission]="'AbpTenantManagement.Tenants.Create'"
+          id="create-tenants"
+          class="btn btn-primary"
+          type="button"
+          (click)="addTenant()"
+        >
+          <i class="fa fa-plus mr-1"></i>
+          <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
+        </button>
+      </div>
     </div>
   </div>
-</div>
-
-<div id="wrapper" class="card">
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
       <label
@@ -82,7 +81,7 @@
                 <button
                   [abpPermission]="'AbpTenantManagement.Tenants.Update'"
                   ngbDropdownItem
-                  (click)="onEditTenant(data.id)"
+                  (click)="editTenant(data.id)"
                 >
                   {{ 'AbpTenantManagement::Edit' | abpLocalization }}
                 </button>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -131,13 +131,13 @@ export class TenantsComponent implements OnInit {
       });
   }
 
-  onAddTenant() {
+  addTenant() {
     this.selected = {} as ABP.BasicItem;
     this.createTenantForm();
     this.openModal('AbpTenantManagement::NewTenant', this.tenantModalTemplate, 'saveTenant');
   }
 
-  onEditTenant(id: string) {
+  editTenant(id: string) {
     this.store
       .dispatch(new GetTenantById(id))
       .pipe(pluck('TenantManagementState', 'selectedItem'))