You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by kd...@apache.org on 2018/01/16 21:10:21 UTC
nifi-registry git commit: [NIFIREG-116] update New Policy dialog
checkbox UI/UX
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 <kd...@apache.org>
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 <sc...@gmail.com>
Authored: Thu Jan 11 21:27:46 2018 -0500
Committer: Kevin Doran <kd...@apache.org>
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;
}
};