Close facet groups on click out instead of hover out. Resolves #1169.

frano-m · web-flow · commit 694f0e60712e · 2020-05-06T12:59:21.000-07:00
diff --git a/spa/src/app/files/facet/facet-menu-content/facet-menu-content.component.html b/spa/src/app/files/facet/facet-menu-content/facet-menu-content.component.html
diff --git a/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.html b/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.scss b/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.scss
@@ -8,7 +8,8 @@
 @import "../../../site/theme/cgl.vars";
 
 /* Facet widget wrapper */
-.facet-content {
+:host {
+    display: block;
     margin: 8px -8px 0;
     max-height: 229.5px; /* For display of 8.5 terms at 229.5px total */
     -ms-overflow-style: none; // IE 10+, scrollbar hidden
diff --git a/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.ts b/spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.ts
@@ -10,9 +10,9 @@
 import { Component } from "@angular/core";
 
 @Component({
-    selector: "facet-menu-content",
-    templateUrl: "./facet-menu-content.component.html",
-    styleUrls: ["./facet-menu-content.component.scss"],
+    selector: "facet-menu-option-content",
+    templateUrl: "./facet-menu-option-content.component.html",
+    styleUrls: ["./facet-menu-option-content.component.scss"],
 })
-export class FacetMenuContentComponent {
+export class FacetMenuOptionContentComponent {
 }
diff --git a/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.html b/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.scss b/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.scss
@@ -7,7 +7,7 @@
 @import "../../../site/theme/cgl.vars";
 
 /* Facet menu title */
-.facet-menu-title {
+:host {
     align-items: flex-start;
     border-bottom: 1px solid $hca-gray-lightest;
     display: flex;
diff --git a/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.ts b/spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.ts
@@ -9,9 +9,9 @@
 import { Component } from "@angular/core";
 
 @Component({
-    selector: "facet-menu-title",
-    templateUrl: "./facet-menu-title.component.html",
-    styleUrls: ["./facet-menu-title.component.scss"],
+    selector: "facet-menu-option-title",
+    templateUrl: "./facet-menu-option-title.component.html",
+    styleUrls: ["./facet-menu-option-title.component.scss"],
 })
-export class FacetMenuTitleComponent {
+export class FacetMenuOptionTitleComponent {
 }
diff --git a/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.html b/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.scss b/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.scss
@@ -0,0 +1,34 @@
+/*!
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Styles or displaying a facet's title and widget (term selector, age range selector) when contained
+ * inside a menu.
+ */
+
+:host {
+    display: flex; /* Scroll content */
+    flex-direction: column; /* Scroll content */
+    padding: 18px;
+    width: 180px;
+}
+
+/* Facet - organism age range */
+:host-context(.organism-age-range) {
+    width: 282px; /* Min width for facet organism age range */
+}
+
+/* Double wide facet */
+:host-context(.facet-double-wide) {
+    width: 396px;
+}
+
+/**
+ * HCA specific breakpoint
+ */
+@media screen and (min-width: 1200px) {
+
+    :host {
+        width: 220px;
+    }
+}
diff --git a/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.ts b/spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.ts
@@ -0,0 +1,18 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Component responsible for displaying a facet's title and widget (term selector, age range selector) when contained
+ * inside a menu.
+ */
+
+// Core dependencies
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "facet-menu-option",
+    templateUrl: "./facet-menu-option.component.html",
+    styleUrls: ["./facet-menu-option.component.scss"],
+})
+export class FacetMenuOptionComponent {
+}
diff --git a/spa/src/app/files/facet/facet-menu-title/facet-menu-title.component.html b/spa/src/app/files/facet/facet-menu-title/facet-menu-title.component.html
diff --git a/spa/src/app/files/facet/facet-menu/facet-menu.component.html b/spa/src/app/files/facet/facet-menu/facet-menu.component.html
@@ -1 +1,2 @@
+<mat-icon>close</mat-icon>
 <ng-content></ng-content>
diff --git a/spa/src/app/files/facet/facet-menu/facet-menu.component.scss b/spa/src/app/files/facet/facet-menu/facet-menu.component.scss
@@ -2,33 +2,43 @@
  * Human Cell Atlas
  * https://www.humancellatlas.org/
  *
- * Styles or displaying a facet's title and widget (term selector, age range selector) when contained
- * inside a menu.
+ * Styles for displaying a group of facets when contained inside a menu.
  */
+@import "../../../site/theme/cgl.vars";
 
+/* Facet group */
 :host {
-    display: flex; /* Scroll content */
-    flex-direction: column; /* Scroll content */
-    padding: 18px;
-    width: 180px;
+    background-color: $hca-white;
+    border: 1px solid $hca-gray-light;
+    border-radius: 1px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    -ms-overflow-style: none; // IE 10+, scrollbar hidden
+    overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
+    padding: 6px;
+    position: absolute;
+    top: 44px; /* 38px for select field + 6px below select field */
+    z-index: 11;
 }
 
-/* Facet - organism age range */
-:host-context(.organism-age-range) {
-    width: 282px; /* Min width for facet organism age range */
+// Safari and Chrome, scrollbar hidden
+:host::-webkit-scrollbar {
+    display: none;
 }
 
-/* Double wide facet */
-:host-context(.facet-double-wide) {
-    width: 396px;
+/* Close icon */
+:host mat-icon {
+    font-size: 16px;
+    height: 16px;
+    opacity: 0.5;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    transition: opacity 280ms cubic-bezier(.4, 0, .2, 1);
+    width: 16px;
 }
 
-/**
- * HCA specific breakpoint
- */
-@media screen and (min-width: 1200px) {
-
-    :host {
-        width: 220px;
-    }
+:host mat-icon:hover {
+    opacity: 1;
 }
diff --git a/spa/src/app/files/facet/facet-menu/facet-menu.component.ts b/spa/src/app/files/facet/facet-menu/facet-menu.component.ts
@@ -2,17 +2,44 @@
  * Human Cell Atlas
  * https://www.humancellatlas.org/
  *
- * Component responsible for displaying a facet's title and widget (term selector, age range selector) when contained
- * inside a menu.
+ * Component responsible for displaying a group of facets when contained inside a menu.
  */
 
 // Core dependencies
-import { Component } from "@angular/core";
+import { Component, ElementRef, EventEmitter, HostListener, Output, ViewChild } from "@angular/core";
+import { MatIcon } from "@angular/material";
+
+// App dependencies
 
 @Component({
     selector: "facet-menu",
     templateUrl: "./facet-menu.component.html",
     styleUrls: ["./facet-menu.component.scss"],
 })
 export class FacetMenuComponent {
+
+    // Output
+    @Output() menuOpen = new EventEmitter<boolean>();
+    
+    // View child/ren
+    @ViewChild(MatIcon, {read: ElementRef, static: false}) closeElRef: ElementRef;
+
+    /**
+     * Prevents event propagation when click event is inside facet group.
+     * Method will allow the menu to remain open when a click event is inside the card, by
+     * stopping the propagation of click event to @HostListener. A click event on the close icon closes card.
+     *
+     * @param event
+     */
+    @HostListener("click", ['$event'])
+    public onClickFacetGroup(event) {
+
+        if ( !this.closeElRef ) {
+            return;
+        }
+
+        if ( this.closeElRef.nativeElement !== event.target ) {
+            event.stopPropagation();
+        }
+    }
 }
diff --git a/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.html b/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.html
@@ -2,49 +2,48 @@
     <div id="filter" [ngClass]="{'filter': true, 'small': (isDeviceMobile() || isWindowWidthSmall())}">
         <hca-search [searchTerms]="searchTerms" [selectedSearchTerms]="selectedSearchTerms"></hca-search>
         <ng-container [ngSwitch]="isDeviceMobile() || isWindowWidthSmall()">
-            <div id="select" class="view-all-options" *ngSwitchDefault>
+            <div id="facet-group-menus" class="view-all-options" *ngSwitchDefault>
                 <ng-container *ngFor="let fileFacetGroup of fileFacetGroups; let i = index; trackBy: trackFileFacetGroupsByFn">
                     <div class="facet-group-menu"
                          [ngClass]="{'active': selectIndex === i}"
-                         (click)="onFacetMenuOpened(i)">
+                         (click)="onToggleFacetMenu(i)">
                         <span>{{fileFacetGroup.facetGroupName}}</span>
                         <mat-icon>keyboard_arrow_down</mat-icon>
-                        <ng-container *ngIf="facets.length && selectIndex === i">
-                            <div id="options" [ngClass]="getOptionsClass(i)"
-                                 [ngStyle]="getFacetStyles(i, fileFacetGroup.facetNames.length, fileFacetGroups.length, fileFacetGroup.facetNames)"
-                                 (mouseleave)="onFacetMenuClosed()">
+                        <facet-menu *ngIf="isFacetGroupActive(i)"
+                                     id="facet-group"
+                                     [ngStyle]="getFacetGroupStyles(fileFacetGroup, i)"
+                                     (menuOpen)="onFacetMenuOpen($event)">
                                 <ng-container *ngFor="let facetName of fileFacetGroup.facetNames; trackBy: trackFileFacetByFn">
                                     <ng-container [ngSwitch]="isFacetOrganismAge(facetName)">
-                                        <facet-menu *ngSwitchCase="true"
+                                        <facet-menu-option *ngSwitchCase="true"
                                                     [ngClass]="{'facet-double-wide': facetDoubleWideOrganismAge, 'organism-age-range': true}">
-                                            <facet-menu-title>{{getFacetDisplayName(facetName)}}</facet-menu-title>
-                                            <facet-menu-content>
+                                            <facet-menu-option-title>{{getFacetDisplayName(facetName)}}</facet-menu-option-title>
+                                            <facet-menu-option-content>
                                                 <facet-age-range-form *ngSwitchCase="true"
                                                                       [ageRange]="getFacet(facetName).ageRange"
                                                                       (applyFacet)="onAgeRangeSelected(facetName, $event)"
                                                                       (clearFacet)="onAgeRangeCleared(facetName, $event)"></facet-age-range-form>
-                                            </facet-menu-content>
-                                        </facet-menu>
-                                        <facet-menu *ngSwitchDefault>
-                                            <facet-menu-title>{{getFacetDisplayName(facetName)}}</facet-menu-title>
-                                            <facet-menu-content>
+                                            </facet-menu-option-content>
+                                        </facet-menu-option>
+                                        <facet-menu-option *ngSwitchDefault>
+                                            <facet-menu-option-title>{{getFacetDisplayName(facetName)}}</facet-menu-option-title>
+                                            <facet-menu-option-content>
                                                 <file-facet [fileFacet]="getFacet(facetName)"
                                                             [facetName]="facetName"
                                                             [selectedEntity]="selectedEntity"
                                                             (facetTermSelected)="onFacetTermSelected($event)"></file-facet>
-                                            </facet-menu-content>
-                                        </facet-menu>
+                                            </facet-menu-option-content>
+                                        </facet-menu-option>
                                     </ng-container>
                                 </ng-container>
-                            </div>
-                        </ng-container>
+                        </facet-menu>
                     </div>
                 </ng-container>
             </div>
             <ng-container *ngSwitchCase="true">
                 <div class="facet-group-menu view-options"
                      [ngClass]="{'active': selectIndex === 1}"
-                     (click)="onFacetMenuOpened(1)">
+                     (click)="onToggleFacetMenu(1)">
                     <span>Filter</span>
                     <mat-icon>keyboard_arrow_down</mat-icon>
                 </div>
@@ -77,12 +76,12 @@
                             </ng-container>
                         </ng-container>
                         <div class="apply">
-                            <button class="button secondary" (click)="onFacetMenuClosed()">Apply</button>
+                            <button class="button secondary" (click)="onFacetMenuOpen(false)">Apply</button>
                         </div>
                     </div>
                 </div>
             </ng-container>
         </ng-container>
     </div>
 </div>
-<div *ngIf="selectIndex != null" class="facet-group-menu-overlay" (click)="onFacetMenuClosed()"></div>
+<div *ngIf="selectIndex != null" class="facet-group-menu-overlay" (click)="onFacetMenuOpen(false)"></div>
diff --git a/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.scss b/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.scss
@@ -98,31 +98,6 @@
             margin-right: -4px; /* For appearance of equal margins on facet-group-menu */
             width: 16px;
         }
-
-        /* Select options */
-        .hca-options {
-            background-color: $hca-white;
-            border: 1px solid $hca-gray-light;
-            border-radius: 1px;
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: wrap;
-            -ms-overflow-style: none; // IE 10+, scrollbar hidden
-            overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
-            padding: 6px;
-            position: absolute;
-            top: 44px; /* 38px for select field + 6px below select field */
-            z-index: 11;
-
-            // Safari and Chrome, scrollbar hidden
-            &::-webkit-scrollbar {
-                display: none;
-            }
-
-            &.hide {
-                display: none;
-            }
-        }
     }
 
     /* Mobile view select field */
diff --git a/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.ts b/spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.ts
diff --git a/spa/src/app/files/files.module.ts b/spa/src/app/files/files.module.ts
diff --git a/spa/src/app/modal/modal-layout/modal-layout.component.scss b/spa/src/app/modal/modal-layout/modal-layout.component.scss
