From a32a77fcbc88101f6d867b1967111046cd4c954d Mon Sep 17 00:00:00 2001
From: Kelly McDonald <kelly@fammcdonald.net>
Date: Wed, 18 Aug 2021 09:24:42 -0400
Subject: [PATCH] Allow libraries in the left hand side to be collapsed by
 default. Fixes #411

---
 .../workflow-spec-list.component.html         | 44 +++++++------------
 .../workflow-spec-list.component.scss         |  5 +++
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.html b/src/app/workflow-spec-list/workflow-spec-list.component.html
index 89eaf9c..a63c729 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.html
@@ -10,7 +10,7 @@
       Add category
     </button>
       <mat-form-field class="search-field">
-        <input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField">
+        <label><input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField"></label>
       </mat-form-field>
   </div>
   <mat-drawer-container class="example-container" autosize>
@@ -26,38 +26,26 @@
         </div>
       </ng-container>
       <mat-divider></mat-divider>
+
       <ng-container>
         <div class="category">
-          <h4>Libraries</h4>
-          <mat-list>
-            <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-              <span [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
-              <span class="spec-actions" fxLayout="row" fxLayoutGap="10px">
-                <button
-                  mat-icon-button
-                  title="Move up"
-                  color="primary"
-                >
-                  <mat-icon>arrow_upward</mat-icon>
-                </button>
-                <button
-
-                  mat-icon-button
-                  title="Move down"
-                  color="primary"
-
-                >
-                  <mat-icon>arrow_downward</mat-icon>
-                </button>
-              </span>
-              <!--
-              <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
-              -->
-            </mat-list-item>
-          </mat-list>
+          <mat-accordion class="example-headers-align">
+            <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+              <h4>Libraries</h4>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+              <ng-container *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+                <span [ngClass]="{'spec_menu_item':true, 'library-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
+              </ng-container>
+            </mat-expansion-panel>
+          </mat-accordion>
 
         </div>
       </ng-container>
+
+
       <mat-divider></mat-divider>
 
       <ng-container>
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.scss b/src/app/workflow-spec-list/workflow-spec-list.component.scss
index c8ec597..1ff9743 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.scss
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.scss
@@ -75,6 +75,11 @@
 }
 
 
+.library-selected {
+  font-weight: bold;
+}
+
+
 .workflow-spec-actions {
   button {
     margin-right: 1em;