Merge branch 'dev' of

https://github.com/sartography/cr-connect-bpmn into search-bar

src/app/app.module.ts

@@ -52,6 +52,7 @@ import {WorkflowSpecCardComponent} from './workflow-spec-card/workflow-spec-card
 import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component';
+import {MatExpansionModule} from '@angular/material/expansion';
 
 @Injectable()
 export class ThisEnvironment implements AppEnvironment {
@@ -103,34 +104,35 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     ReferenceFilesComponent,
     ConfirmDialogComponent,
   ],
-  imports: [
+    imports: [
-    BrowserAnimationsModule,
+        BrowserAnimationsModule,
-    BrowserModule,
+        BrowserModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    FormlyModule,
+        FormlyModule,
-    FormsModule,
+        FormsModule,
-    HttpClientModule,
+        HttpClientModule,
-    MatBottomSheetModule,
+        MatBottomSheetModule,
-    MatButtonModule,
+        MatButtonModule,
-    MatCardModule,
+        MatCardModule,
-    MatDialogModule,
+        MatDialogModule,
-    MatDividerModule,
+        MatDividerModule,
-    MatIconModule,
+        MatIconModule,
-    MatInputModule,
+        MatInputModule,
-    MatListModule,
+        MatListModule,
-    MatMenuModule,
+        MatMenuModule,
-    MatSnackBarModule,
+        MatSnackBarModule,
-    MatTabsModule,
+        MatTabsModule,
-    MatToolbarModule,
+        MatToolbarModule,
-    MatTooltipModule,
+        MatTooltipModule,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-    SartographyFormsModule,
+        SartographyFormsModule,
-    SartographyPipesModule,
+        SartographyPipesModule,
-    SartographyWorkflowLibModule,
+        SartographyWorkflowLibModule,
-    AppRoutingModule,
+        AppRoutingModule,
-    MatSidenavModule,
+        MatSidenavModule,
-    // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
+        MatExpansionModule,
-  ],
+        // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
+    ],
   bootstrap: [AppComponent],
   entryComponents: [
     DeleteFileDialogComponent,

src/app/workflow-spec-list/workflow-spec-list.component.html

@@ -27,13 +27,52 @@
       </ng-container>
       <mat-divider></mat-divider>
 
+
+      <mat-accordion class="example-headers-align" multi="false">
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
 
         <div *ngIf="!(searchField.value && cat.workflow_specs.length === 0)">
         <ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
-          <div class="category" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+          <mat-expansion-panel hideToggle [expanded]="selectedSpec.category_id == cat.id">
-            <h4>{{cat.display_name}} ({{cat.name}})</h4>
+            <mat-expansion-panel-header>
-            <div class="category-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
+              <mat-panel-title>
+                {{cat.display_name}}
+              </mat-panel-title>
+              <mat-panel-description>
+                ({{cat.name}})
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <mat-list>
+              <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+                <a [ngClass]="{'spec_menu_item':true, 'spec-selected': wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
+                <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
+                <button
+                  *ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
+                  mat-icon-button
+                  title="Move up"
+                  color="primary"
+                  (click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
+                  *ngIf="cat && cat.workflow_specs.length > 0 && (wfs.display_order < cat.workflow_specs.length - 1)"
+                  mat-icon-button
+                  title="Move down"
+                  color="primary"
+                  (click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+              </span>
+                <!--
+                <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
+                -->
+              </mat-list-item>
+            </mat-list>
+
+            <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
+            <mat-action-row>
               <button mat-mini-fab color="primary" (click)="editWorkflowSpecCategory(cat)">
                 <mat-icon>edit</mat-icon>
               </button>
@@ -59,41 +98,13 @@
                       (click)="confirmDeleteWorkflowSpecCategory(cat)">
                 <mat-icon>delete</mat-icon>
               </button>
-            </div>
+            </mat-action-row>
-          </div>
+          </mat-expansion-panel>
-          <mat-list>
-            <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-              <a class="spec_menu_item" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
-              <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
-                <button
-                  *ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
-                  mat-mini-fab
-                  title="Move up"
-                  color="primary"
-                  (click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
-                >
-                  <mat-icon>arrow_upward</mat-icon>
-                </button>
-                <button
-                  *ngIf="cat && cat.workflow_specs.length > 0 && (wfs.display_order < cat.workflow_specs.length - 1)"
-                  mat-mini-fab
-                  title="Move down"
-                  color="primary"
-                  (click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
-                >
-                  <mat-icon>arrow_downward</mat-icon>
-                </button>
-              </span>
-              <!--
-              <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
-              -->
-            </mat-list-item>
-          </mat-list>
 
-          <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
         </ng-container>
         </div>
       </ng-container>
+      </mat-accordion>
     </mat-drawer>
 
     <div class="content">

src/app/workflow-spec-list/workflow-spec-list.component.scss

@@ -35,8 +35,13 @@
 
 }
 
+.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
+  height: auto;
+}
+
 .workflow-spec {
   border-left: 4px solid $brand-gray-light;
+  font-size: 1em;
   &:hover {
     border-left: 4px solid $brand-primary;
     background-color: $brand-primary-tint-4;
@@ -50,6 +55,9 @@
     width: 300px;
     margin-left: 20px;
   }
+  .spec-selected {
+    font-weight: bold;
+  }
   .spec-actions {
     width: 100px;
     opacity: 0;