From 03f071fd27c2e7e003655d534a8affe28d48b871 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 15 Dec 2020 00:57:31 -0800
Subject: [PATCH] Styled, organized button UI

---
 .../bulk-editor/bulk-editor.component.html    | 101 +++++++++++++++---
 .../bulk-editor/bulk-editor.component.scss    |   6 ++
 .../bulk-editor/bulk-editor.component.ts      |   2 +-
 .../document-list.component.html              |   2 +-
 4 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index a1574f6f7..54212923a 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,16 +1,89 @@
-<div class="btn-group mr-lg-2" role="group" aria-label="Select">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectPage.next()">Select page</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectAll.next()">Select all</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectNone.next()">Select none</button>
+<div class="card bg-light">
+<div class="card-body px-2 py-2 d-flex justify-content-between flex-wrap align-items-end">
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Select">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Select:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
+        </svg>
+        Page
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#check-all" />
+        </svg>
+        All
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
+        </svg>
+        None
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Tags">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Tags:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="addTag.next()">
+        <ng-container *ngTemplateOutlet="add"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeTag.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Correspondent">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Correspondent:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="setCorrespondent.next()">
+        <ng-container *ngTemplateOutlet="edit"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeCorrespondent.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Document Type">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Document Type:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="setDocumentType.next()">
+        <ng-container *ngTemplateOutlet="edit"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeDocumentType.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Delete">
+    <button class="btn btn-sm btn-outline-danger ml-auto" (click)="delete.next()">
+      <svg viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+      </svg>
+      Delete
+    </button>
+  </div>
 </div>
-<div class="btn-group mr-lg-2" role="group" aria-label="Actions">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.setCorrespondent.next()">Set correspondent</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeCorrespondent.next()">Remove correspondent</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.setDocumentType.next()">Set document type</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeDocumentType.next()">Remove document type</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.addTag.next()">Add tag</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeTag.next()">Remove tag</button>
-</div>
-<div class="btn-group mr-lg-2" role="group" aria-label="Delete">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.delete.next()">Delete</button>
 </div>
+
+<ng-template #add>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+  </svg>
+  Add
+</ng-template>
+
+<ng-template #edit>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#pencil" />
+  </svg>
+  Edit
+</ng-template>
+
+<ng-template #remove>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#x-circle" />
+  </svg>
+  Remove
+</ng-template>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
index e69de29bb..3868e7a02 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
@@ -0,0 +1,6 @@
+.btn svg {
+  width: 0.9em;
+  height: 0.9em;
+  margin-right: 2px;
+  margin-top: -1px;
+}
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
index 7459d62dc..5c1ad01ae 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -24,7 +24,7 @@ export class BulkEditorComponent {
   setCorrespondent = new EventEmitter()
 
   @Output()
-  removeCorresponden = new EventEmitter()
+  removeCorrespondent = new EventEmitter()
 
   @Output()
   setDocumentType = new EventEmitter()
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 36e9ff8fd..a88ad65b7 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -87,7 +87,7 @@
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
-<div class="w-100 mb-2" [ngbCollapse]="!isBulkEditing">
+<div class="w-100 mb-3" [ngbCollapse]="!isBulkEditing">
   <app-bulk-editor
     (selectPage)="list.selectPage()"
     (selectAll)="list.selectAll()"