nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From kdo...@apache.org
Subject nifi-registry git commit: [NIFIREG-116] update New Policy dialog checkbox UI/UX
Date Tue, 16 Jan 2018 21:10:21 GMT
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 <kdoran@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 <scottyaslan@gmail.com>
Authored: Thu Jan 11 21:27:46 2018 -0500
Committer: Kevin Doran <kdoran@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;
     }
 };
 


Mime
View raw message