[ui] vertical align the buttons inside button group

Signed-off-by: Jeeyun Lim <[email protected]>
vmware-archive · Aug 13, 2018 · d8bdb2b · d8bdb2b
1 parent 46d5ee1
commit d8bdb2b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/src/clr-angular/button/button-group/_button-group.clarity.scss b/src/clr-angular/button/button-group/_button-group.clarity.scss
@@ -9,6 +9,7 @@
 
     .btn {
       margin: 0;
+      vertical-align: top;
 
       &:not(:first-child) {
         border-top-left-radius: 0;

diff --git a/src/dev/src/app/datagrid/kitchen-sink/kitchen-sink.html b/src/dev/src/app/datagrid/kitchen-sink/kitchen-sink.html
@@ -156,16 +156,35 @@ <h3>Multi selection</h3>
             <em *ngIf="!toEdit">No user selected.</em>
             <span class="username" *ngIf="toEdit">{{toEdit.name}}</span>
         </p>
+
+        <p class="card-text username-list">
+          Users to be exported:
+          <em *ngIf="toExport.length == 0">No user selected.</em>
+          <span class="username" *ngFor="let user of toExport">{{user.name}}</span>
+        </p>
     </div>
 
     <clr-datagrid [(clrDgSelected)]="selected">
         <clr-dg-action-bar>
             <div class="btn-group" role="group" aria-label="Available Actions" *ngIf="selected.length > 0">
-                <button type="button" class="btn btn-sm btn-secondary" (click)="onAdd()"><clr-icon shape="plus"></clr-icon> Add
-                    to
-                    group</button>
-                <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" ><clr-icon shape="close"></clr-icon> Delete</button>
-                <button type="button" class="btn btn-sm btn-secondary" (click)="onEdit()" *ngIf="selected.length == 1"><clr-icon shape="pencil"></clr-icon> Edit</button>
+                <button type="button" class="btn btn-sm btn-secondary" (click)="onAdd()">
+                  Add to group
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()">Delete</button>
+                <button type="button" class="btn btn-sm btn-secondary" (click)="onEdit()" *ngIf="selected.length == 1">Edit</button>
+            </div>
+
+            <div class="btn-group">
+              <clr-dropdown>
+                <button type="button" class="btn btn-sm btn-secondary" clrDropdownTrigger>
+                  Export
+                  <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
+                  <button type="button" (click)="onExportAll()" clrDropdownItem>Export All</button>
+                  <button type="button" (click)="onExportSelected()" [disabled]="selected.length === 0" clrDropdownItem>Export Selected Items</button>
+                </clr-dropdown-menu>
+              </clr-dropdown>
             </div>
         </clr-dg-action-bar>
 

diff --git a/src/dev/src/app/datagrid/kitchen-sink/kitchen-sink.ts b/src/dev/src/app/datagrid/kitchen-sink/kitchen-sink.ts
@@ -32,6 +32,7 @@ export class DatagridKitchenSinkDemo {
   toAdd: User[] = [];
   toDelete: User[] = [];
   toEdit: User;
+  toExport: User[] = [];
   detail = 'default';
   replace = false;
   fixedHeight = false;
@@ -77,6 +78,7 @@ export class DatagridKitchenSinkDemo {
     this.toAdd = [];
     this.toDelete = [];
     this.toEdit = null;
+    this.toExport = [];
   }
 
   onDelete(user: User) {
@@ -102,6 +104,16 @@ export class DatagridKitchenSinkDemo {
     this.toAdd = this.selected.slice();
   }
 
+  onExportAll() {
+    this.cleanUp();
+    this.toExport = this.users.slice();
+  }
+
+  onExportSelected() {
+    this.cleanUp();
+    this.toExport = this.selected.slice();
+  }
+
   toggleId() {
     this.showId = !this.showId;
   }