Repository: nifi-registry Updated Branches: refs/heads/master 800365dc9 -> 7720a7cc3
[NIFIREG-116] update New Policy dialog checkbox UI/UX This closes #84. Signed-off-by: Kevin Doran <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/nifi-registry/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi-registry/commit/7720a7cc Tree: http://git-wip-us.apache.org/repos/asf/nifi-registry/tree/7720a7cc Diff: http://git-wip-us.apache.org/repos/asf/nifi-registry/diff/7720a7cc Branch: refs/heads/master Commit: 7720a7cc3351b96d44624d9c121345b9a4d61b74 Parents: 800365d Author: Scott Aslan <[email protected]> Authored: Thu Jan 11 21:27:46 2018 -0500 Committer: Kevin Doran <[email protected]> Committed: Tue Jan 16 16:09:40 2018 -0500 ---------------------------------------------------------------------- .../core/common/styles/_checkboxes.scss | 4 -- .../platform/core/common/styles/_tables.scss | 2 + .../nf-registry-add-policy-to-bucket.html | 50 +++++++++----------- .../nf-registry-add-policy-to-bucket.js | 31 ++++++++++++ 4 files changed, 56 insertions(+), 31 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7720a7cc/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss index 4e5aeb2..353ec0a 100644 --- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss @@ -17,10 +17,6 @@ /* Checkboxes */ -body[fds] mat-checkbox { - margin-bottom: 3px; -} - body[fds] .mat-checkbox-inner-container { height: 10px !important; width: 10px !important; http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7720a7cc/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss index 02ab2bc..9bfec90 100644 --- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss @@ -24,6 +24,8 @@ body[fds] .td-data-table-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + height: 100%; + line-height: 30px; } body[fds] .td-data-table-column { http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7720a7cc/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html index 8c89010..8a2c7c5 100644 --- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html +++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.html @@ -36,38 +36,34 @@ limitations under the License. <div class="td-data-table-column"></div> </div> <div id="nifi-registry-add-selected-users-to-group-list-container"> - <div [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUserGroups" - (click)="userOrGroup = row; userOrGroup.type = 'group';"> - <div *ngFor="let column of nfRegistryService.userGroupsColumns" fxLayout="row" - fxLayoutAlign="space-between center" class="td-data-table-row"> - <div class="td-data-table-cell" fxFlex="{{column.width}}"> - <div> - <i class="fa fa-users push-right-sm" aria-hidden="true"></i>{{column.format ? - column.format(row[column.name]) : row[column.name]}} - </div> - </div> - <div class="td-data-table-cell"> - <mat-checkbox [checked]="row[column.name] === userOrGroup.identity" - (click)="userOrGroup = row; userOrGroup.type = 'group';"> - </mat-checkbox> + <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row" [ngClass]="{'selected' : (group.identity === userOrGroup.identity)}" + *ngFor="let group of filteredUserGroups" + (click)="select(group, 'group');"> + <div class="td-data-table-cell" *ngFor="let column of nfRegistryService.userGroupsColumns" + fxFlex="{{column.width}}"> + <div class="ellipsis" matTooltip="{{column.format ? column.format(group[column.name]) : group[column.name]}}"> + <i class="fa fa-users push-right-sm" aria-hidden="true"></i>{{column.format ? + column.format(group[column.name]) : group[column.name]}} </div> </div> + <div class="td-data-table-cell"> + <mat-checkbox [(checked)]="group.checked" (change)="change($event)"> + </mat-checkbox> + </div> </div> - <div [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUsers" - (click)="userOrGroup = row; userOrGroup.type = 'user';"> - <div *ngFor="let column of nfRegistryService.userGroupsColumns" fxLayout="row" - fxLayoutAlign="space-between center" class="td-data-table-row"> - <div class="td-data-table-cell" fxFlex="{{column.width}}"> - <div> - {{column.format ? column.format(row[column.name]) : row[column.name]}} - </div> - </div> - <div class="td-data-table-cell"> - <mat-checkbox [checked]="row[column.name] === userOrGroup.identity" - (click)="userOrGroup = row; userOrGroup.type = 'user';"> - </mat-checkbox> + <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row" [ngClass]="{'selected' : (user.identity === userOrGroup.identity)}" + *ngFor="let user of filteredUsers" + (click)="select(user, 'user');"> + <div class="td-data-table-cell" *ngFor="let column of nfRegistryService.userGroupsColumns" + fxFlex="{{column.width}}"> + <div class="ellipsis" matTooltip="{{column.format ? column.format(user[column.name]) : user[column.name]}}"> + {{column.format ? column.format(user[column.name]) : user[column.name]}} </div> </div> + <div class="td-data-table-cell"> + <mat-checkbox [(checked)]="user.checked" (change)="change($event)"> + </mat-checkbox> + </div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7720a7cc/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js index e2a0a98..b20bff2 100644 --- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js +++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js @@ -73,10 +73,12 @@ NfRegistryAddPolicyToBucket.prototype = { .subscribe(function (response) { self.users = response[0]; self.users = self.users.filter(function (user) { + user.checked = false; return (self.data.users.indexOf(user.identity) < 0) ? true : false; }); self.groups = response[1]; self.groups = self.groups.filter(function (group) { + group.checked = false; return (self.data.groups.indexOf(group.identity) < 0) ? true : false; }); @@ -355,6 +357,35 @@ NfRegistryAddPolicyToBucket.prototype = { */ cancel: function () { this.dialogRef.close(); + }, + + /** + * Select a user or group. + * + * @param userOrGroup The selected user or group. + * @param type + */ + select: function(userOrGroup, type) { + //deselect all + this.filteredUsers = this.filteredUsers.filter(function (user) { + user.checked = false; + return true; + }); + this.filteredUserGroups = this.filteredUserGroups.filter(function (group) { + group.checked = false; + return true; + }); + userOrGroup.checked = true; + this.userOrGroup = userOrGroup; + this.userOrGroup.type = type; + }, + + /** + * Change event handler for user or group checkboxes + * @param $event + */ + change: function($event){ + $event.source.checked = true; } };
