From 884d6460788d5f2a8e711e1af0d836fd650c99ee Mon Sep 17 00:00:00 2001 From: Dharan <14145706+dhrn@users.noreply.github.com> Date: Wed, 5 May 2021 18:43:34 +0530 Subject: [PATCH] [ACA-4361] Review permission list (#6974) * [ACA-4361] permission ux review * * fixed comments and lint * * remove space --- lib/content-services/src/lib/i18n/en.json | 9 +- .../add-permission-dialog.component.html | 112 +++++++++--------- .../add-permission-dialog.component.scss | 14 ++- .../add-permission-panel.component.html | 11 +- .../add-permission-panel.component.scss | 23 ++-- .../permission-container.component.html | 17 ++- .../permission-container.component.scss | 52 +++----- .../permission-container.component.ts | 8 +- .../permission-list.component.html | 21 ++-- .../permission-list.component.scss | 19 ++- .../permission-list.service.ts | 2 +- .../user-icon-column.component.scss | 14 ++- .../user-icon-column.component.spec.ts | 7 ++ .../user-icon-column.component.ts | 13 +- .../user-role-column.component.ts | 9 +- 15 files changed, 190 insertions(+), 141 deletions(-) diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index ce644bb928..d5f91d3c19 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -386,11 +386,12 @@ }, "ADD-PERMISSION": { "SEARCH": "Search for users or groups to add", - "TITLE": "Add user or group to", + "TITLE": "Add permission", "TYPE-MESSAGE": "Type something to start searching groups or people", "NO-RESULT": "No result found for this search", + "SELECT-ACTION": "SELECT", "ADD-ACTION": "ADD", - "CLOSE-ACTION": "CLOSE", + "CLOSE-ACTION": "CANCEL", "BASE-DIALOG-TITLE": "Search a group or people to add...", "EVERYONE": "EVERYONE" }, @@ -402,7 +403,7 @@ "LABELS": { "ON": "On", "OFF": "Off", - "DIRECT-PERMISSIONS": "Direct Applied Permission", + "DIRECT-PERMISSIONS": "Directly Applied Permission", "INHERITED-PERMISSIONS": "Inherited Permission", "INHERITED-SUBTITLE": "{{count}} users or groups are inheriting permission from a parent folder", "SELECT-ROLE": "Select role" @@ -414,7 +415,7 @@ "PERMISSION-BULK-UPDATE-SUCCESS": "Updated {{user}} user(s) {{group}} group(s)", "PERMISSION-UPDATE-SUCCESS": "User/Group updated", "PERMISSION-UPDATE-FAIL": "Failed to update user/group", - "PERMISSION-BULK-DELETE-SUCCESS": "Deleted {{user}} user(s_ {{group}} group(s)", + "PERMISSION-BULK-DELETE-SUCCESS": "Deleted {{user}} user(s) {{group}} group(s)", "PERMISSION-DELETE-SUCCESS": "User/Group deleted", "PERMISSION-DELETE-FAIL": "Failed to delete user/group", "PERMISSION-ADD-SUCCESS": "Added {{user}} user(s) {{group}} group(s)", diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html index 2eb11e6942..67ccf059a8 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html @@ -10,64 +10,66 @@ search - - - - - - - +
+ + + + + + + - - - - - + + + + + - - - - - - - - - + + + - - - - - - - - - + + + + + + + + + + + + + + + +
@@ -90,7 +92,7 @@ - + @@ -103,7 +105,7 @@ data-automation-id="add-permission-dialog-confirm-button" [disabled]="!currentSelection.length" (click)="onSearchAddClicked()"> - {{ "PERMISSION_MANAGER.ADD-PERMISSION.ADD-ACTION" | translate }} + {{ "PERMISSION_MANAGER.ADD-PERMISSION.SELECT-ACTION" | translate }} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss index ec9b1d1a9a..916a8a2b11 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss @@ -25,11 +25,21 @@ .mat-dialog-content { margin: 0; - overflow: auto; + overflow: hidden; + flex-grow: 1; + height: 80vh; + + .adf-new-permission-table { + height: 90%; + } + + .adf-search-container { + height: 100%; + } } .mat-dialog-actions { - padding: 8px; + padding: 0 24px; background-color: mat-color($background, background); display: flex; justify-content: flex-end; diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html index 928c07ca31..471d70d750 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html @@ -23,8 +23,9 @@ - +

{{'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate}}

@@ -46,8 +48,9 @@ - + id="result_option_{{idx}}" + #option> +

{{item.entry.properties['cm:authorityDisplayName']}} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index f154235ff9..339863aa75 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -5,12 +5,13 @@ $primary: map-get($theme, primary); $accent: map-get($theme, accent); $mat-menu-border-radius: 2px !default; + $search-result-height: calc(100% - 75px); .adf { &-permission-result-list { display: flex; - height: 300px; + height: $search-result-height; overflow: auto; border: 2px solid mat-color($foreground, base, 0.07); @@ -27,7 +28,7 @@ display: flex; align-items: center; justify-content: space-around; - height: 300px; + height: $search-result-height; overflow: auto; border: 2px solid mat-color($foreground, base, 0.07); } @@ -54,13 +55,19 @@ } } - &-list-option-item .mat-list-text { - display: flex; - flex-direction: row !important; - align-items: center; + &-list-option-item { + mat-pseudo-checkbox { + display: none; + } - .adf-result-name { - padding-left: 16px !important; + .mat-list-text { + display: flex; + flex-direction: row !important; + align-items: center; + + .adf-result-name { + padding-left: 16px !important; + } } } diff --git a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html index 82f9f651fb..30a8757a01 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html +++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html @@ -2,27 +2,24 @@ id="adf-permission-display-container" [rows]="permissions" stickyHeader="true" - selectionMode="multiple"> + [selectionMode]="selectionMode"> - + - - + d - @@ -32,7 +29,7 @@ @@ -59,7 +56,7 @@ - + + - - - - svg { + width: 40px; + height: 40px; + } + } } @@ -79,14 +91,15 @@ padding-right: 10px; } - .adf-permission-pop-over { padding-right: 15px; width: 100%; .adf-pop-over-card { width: 100%; - @include mat-elevation(16, mat-color($foreground, divider), 0.8); + overflow: hidden; + box-shadow: 0 8px 9px -5px mat-color($foreground, divider), + 0 15px 22px 2px mat-color($foreground, divider); } } } diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.service.ts b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.service.ts index 7b2ab88de7..27dfbbd32d 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.service.ts +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.service.ts @@ -102,7 +102,7 @@ export class PermissionListService { updateNodePermissionByDialog() { this.nodePermissionDialogService - .openAddPermissionDialog(this.node, this.roles) + .openAddPermissionDialog(this.node, this.roles, 'PERMISSION_MANAGER.ADD-PERMISSION.TITLE') .pipe( switchMap(selection => { const total = selection.length; diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss index 677acc387e..b984b55ad1 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss @@ -1,6 +1,6 @@ @mixin adf-user-icon-column-theme($theme) { $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); + $document-list-selection-color: mat-color($accent) !default; .adf { &-people-initial { @@ -11,7 +11,7 @@ align-items: center; width: 40px; height: 40px; - color: mat-color($foreground, text); + color: mat-color($primary, default-contrast) !important; font-weight: bolder; font-size: 18px; text-transform: uppercase; @@ -23,12 +23,18 @@ background: mat-color($primary); border-radius: 50%; padding: 10px; - color: mat-color($foreground, text); + color: mat-color($primary, default-contrast) !important; font-weight: bolder; font-size: 20px; } + &-people-select-icon { - padding: 10px; + margin: 0 !important; + svg { + fill: $document-list-selection-color; + width: 40px; + height: 40px; + } } } } diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts index b0ff0d9e7c..e344746a42 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts +++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts @@ -115,4 +115,11 @@ describe('UserIconColumnComponent', () => { }); }); + it('should render select icon', () => { + component.selected = true; + component.ngOnInit(); + fixture.detectChanges(); + expect(element.querySelector('mat-icon[svgIcon="selected"]')).toBeDefined(); + expect(component.isSelected).toBe(true); + }); }); diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts index 9de96ebaf6..99d6a1ee23 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts @@ -24,14 +24,14 @@ import { NodePermissionService } from '../../services/node-permission.service'; @Component({ selector: 'adf-user-icon-column', template: ` -

+
people_alt_outline
-
- +
+
`, styleUrls: ['./user-icon-column.component.scss'], @@ -44,9 +44,16 @@ export class UserIconColumnComponent implements OnInit { @Input() node: NodeEntry; + @Input() + selected: boolean = false; + displayText$ = new BehaviorSubject(null); group = false; + get isSelected(): boolean { + return this.context?.row?.isSelected || this.selected; + } + constructor(private nodePermissionService: NodePermissionService) {} ngOnInit() { diff --git a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts index 8cca527e2d..9902f5d916 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts @@ -33,7 +33,7 @@ import { RoleModel } from '../../models/role.model'; - + {{value | adfLocalizedRole}} `, @@ -41,6 +41,13 @@ import { RoleModel } from '../../models/role.model'; styles: [ `.adf-role-selector-field { width: 100%; + .mat-form-field { + width: 100%; + max-width: 200px; + } + } + .adf-readonly-role { + padding-left: 0 !important; } ` ]