From 92df204e1c0a5627d146aebcb8cc69bd35d5d35c Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Thu, 3 Sep 2020 12:43:54 +0300
Subject: [PATCH 1/3] fix: resolve margin problem in permissions modal

---
 .../lib/components/permission-management.component.html    | 2 +-
 .../src/lib/components/permission-management.component.ts  | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index a34d674970..60b145b9f9 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -63,7 +63,7 @@
                 let i = index;
                 trackBy: trackByFn
               "
-              [style.margin-left]="permission.margin + 'px'"
+              [ngStyle]="getMarginStyle(permission.margin)"
               class="custom-checkbox custom-control mb-2"
             >
               <input
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index c2220a30d2..eb66a576f1 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -6,6 +6,7 @@ import { finalize, map, pluck, switchMap, take, tap } from 'rxjs/operators';
 import { GetPermissions, UpdatePermissions } from '../actions/permission-management.actions';
 import { PermissionManagement } from '../models/permission-management';
 import { PermissionManagementState } from '../states/permission-management.state';
+import { LocaleDirection } from '@abp/ng.theme.shared';
 
 type PermissionWithMargin = PermissionManagement.Permission & {
   margin: number;
@@ -286,6 +287,12 @@ export class PermissionManagementComponent
 
     return false;
   }
+
+  getMarginStyle(margin: number) {
+    return {
+      [`margin-${(document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'}.px`]: margin,
+    };
+  }
 }
 
 function findMargin(

From 104ce39c4158277778aca2f31475089b97f7e55a Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Thu, 3 Sep 2020 12:44:09 +0300
Subject: [PATCH 2/3] style: change abp-loading background opacity

---
 npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
index 03fae58229..b98bed6790 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
@@ -72,7 +72,7 @@ export default `
     border: 1px solid #c8c8c8;
   }
 .abp-loading {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
 }
 .modal-backdrop {
 background-color: rgba(0, 0, 0, 0.6);

From 37ffdfe5f1e32f2615578d3a112d75c9e53b46a0 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Thu, 3 Sep 2020 13:30:37 +0300
Subject: [PATCH 3/3] refactor: get style from permission object

---
 .../permission-management.component.html      |  2 +-
 .../permission-management.component.ts        | 24 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 60b145b9f9..148b4ab1b5 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -63,7 +63,7 @@
                 let i = index;
                 trackBy: trackByFn
               "
-              [ngStyle]="getMarginStyle(permission.margin)"
+              [ngStyle]="permission.style"
               class="custom-checkbox custom-control mb-2"
             >
               <input
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index eb66a576f1..8d034de1d5 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -1,4 +1,5 @@
 import { ApplicationConfiguration, ConfigState, GetAppConfiguration } from '@abp/ng.core';
+import { LocaleDirection } from '@abp/ng.theme.shared';
 import { Component, EventEmitter, Input, Output, Renderer2, TrackByFunction } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { Observable, of } from 'rxjs';
@@ -6,10 +7,9 @@ import { finalize, map, pluck, switchMap, take, tap } from 'rxjs/operators';
 import { GetPermissions, UpdatePermissions } from '../actions/permission-management.actions';
 import { PermissionManagement } from '../models/permission-management';
 import { PermissionManagementState } from '../states/permission-management.state';
-import { LocaleDirection } from '@abp/ng.theme.shared';
 
-type PermissionWithMargin = PermissionManagement.Permission & {
-  margin: number;
+type PermissionWithStyle = PermissionManagement.Permission & {
+  style: string;
 };
 
 @Component({
@@ -80,21 +80,25 @@ export class PermissionManagementComponent
 
   trackByFn: TrackByFunction<PermissionManagement.Group> = (_, item) => item.name;
 
-  get selectedGroupPermissions$(): Observable<PermissionWithMargin[]> {
+  get selectedGroupPermissions$(): Observable<PermissionWithStyle[]> {
+    const margin = `margin-${
+      (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
+    }.px`;
+
     return this.groups$.pipe(
       map(groups =>
         this.selectedGroup
           ? groups.find(group => group.name === this.selectedGroup.name).permissions
           : [],
       ),
-      map<PermissionManagement.Permission[], PermissionWithMargin[]>(permissions =>
+      map<PermissionManagement.Permission[], PermissionWithStyle[]>(permissions =>
         permissions.map(
           permission =>
             (({
               ...permission,
-              margin: findMargin(permissions, permission),
+              style: { [margin]: findMargin(permissions, permission) },
               isGranted: this.permissions.find(per => per.name === permission.name).isGranted,
-            } as any) as PermissionWithMargin),
+            } as any) as PermissionWithStyle),
         ),
       ),
     );
@@ -287,12 +291,6 @@ export class PermissionManagementComponent
 
     return false;
   }
-
-  getMarginStyle(margin: number) {
-    return {
-      [`margin-${(document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'}.px`]: margin,
-    };
-  }
 }
 
 function findMargin(