Skip to content

Commit 694f0e6

Browse files
frano-mfrano-m
authored
Close facet groups on click out instead of hover out. Resolves #1169.
1 parent 95fdc88 commit 694f0e6

19 files changed

+214
-152
lines changed

‎spa/src/app/files/facet/facet-menu-content/facet-menu-content.component.html

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎spa/src/app/files/facet/facet-menu-content/facet-menu-content.component.scss renamed to ‎spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@import "../../../site/theme/cgl.vars";
99

1010
/* Facet widget wrapper */
11-
.facet-content {
11+
:host {
12+
display: block;
1213
margin: 8px -8px 0;
1314
max-height: 229.5px; /* For display of 8.5 terms at 229.5px total */
1415
-ms-overflow-style: none; // IE 10+, scrollbar hidden

‎spa/src/app/files/facet/facet-menu-content/facet-menu-content.component.ts renamed to ‎spa/src/app/files/facet/facet-menu-option-content/facet-menu-option-content.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
import { Component } from "@angular/core";
1111

1212
@Component({
13-
selector: "facet-menu-content",
14-
templateUrl: "./facet-menu-content.component.html",
15-
styleUrls: ["./facet-menu-content.component.scss"],
13+
selector: "facet-menu-option-content",
14+
templateUrl: "./facet-menu-option-content.component.html",
15+
styleUrls: ["./facet-menu-option-content.component.scss"],
1616
})
17-
export class FacetMenuContentComponent {
17+
export class FacetMenuOptionContentComponent {
1818
}

‎spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎spa/src/app/files/facet/facet-menu-title/facet-menu-title.component.scss renamed to ‎spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@import "../../../site/theme/cgl.vars";
88

99
/* Facet menu title */
10-
.facet-menu-title {
10+
:host {
1111
align-items: flex-start;
1212
border-bottom: 1px solid $hca-gray-lightest;
1313
display: flex;

‎spa/src/app/files/facet/facet-menu-title/facet-menu-title.component.ts renamed to ‎spa/src/app/files/facet/facet-menu-option-title/facet-menu-option-title.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
import { Component } from "@angular/core";
1010

1111
@Component({
12-
selector: "facet-menu-title",
13-
templateUrl: "./facet-menu-title.component.html",
14-
styleUrls: ["./facet-menu-title.component.scss"],
12+
selector: "facet-menu-option-title",
13+
templateUrl: "./facet-menu-option-title.component.html",
14+
styleUrls: ["./facet-menu-option-title.component.scss"],
1515
})
16-
export class FacetMenuTitleComponent {
16+
export class FacetMenuOptionTitleComponent {
1717
}

‎spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*!
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Styles or displaying a facet's title and widget (term selector, age range selector) when contained
6+
* inside a menu.
7+
*/
8+
9+
:host {
10+
display: flex; /* Scroll content */
11+
flex-direction: column; /* Scroll content */
12+
padding: 18px;
13+
width: 180px;
14+
}
15+
16+
/* Facet - organism age range */
17+
:host-context(.organism-age-range) {
18+
width: 282px; /* Min width for facet organism age range */
19+
}
20+
21+
/* Double wide facet */
22+
:host-context(.facet-double-wide) {
23+
width: 396px;
24+
}
25+
26+
/**
27+
* HCA specific breakpoint
28+
*/
29+
@media screen and (min-width: 1200px) {
30+
31+
:host {
32+
width: 220px;
33+
}
34+
}

‎spa/src/app/files/facet/facet-menu-option/facet-menu-option.component.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Component responsible for displaying a facet's title and widget (term selector, age range selector) when contained
6+
* inside a menu.
7+
*/
8+
9+
// Core dependencies
10+
import { Component } from "@angular/core";
11+
12+
@Component({
13+
selector: "facet-menu-option",
14+
templateUrl: "./facet-menu-option.component.html",
15+
styleUrls: ["./facet-menu-option.component.scss"],
16+
})
17+
export class FacetMenuOptionComponent {
18+
}

‎spa/src/app/files/facet/facet-menu-title/facet-menu-title.component.html

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎spa/src/app/files/facet/facet-menu/facet-menu.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
<mat-icon>close</mat-icon>
12
<ng-content></ng-content>

‎spa/src/app/files/facet/facet-menu/facet-menu.component.scss

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,43 @@
22
* Human Cell Atlas
33
* https://www.humancellatlas.org/
44
*
5-
* Styles or displaying a facet's title and widget (term selector, age range selector) when contained
6-
* inside a menu.
5+
* Styles for displaying a group of facets when contained inside a menu.
76
*/
7+
@import "../../../site/theme/cgl.vars";
88

9+
/* Facet group */
910
:host {
10-
display: flex; /* Scroll content */
11-
flex-direction: column; /* Scroll content */
12-
padding: 18px;
13-
width: 180px;
11+
background-color: $hca-white;
12+
border: 1px solid $hca-gray-light;
13+
border-radius: 1px;
14+
box-sizing: border-box;
15+
display: flex;
16+
flex-wrap: wrap;
17+
-ms-overflow-style: none; // IE 10+, scrollbar hidden
18+
overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
19+
padding: 6px;
20+
position: absolute;
21+
top: 44px; /* 38px for select field + 6px below select field */
22+
z-index: 11;
1423
}
1524

16-
/* Facet - organism age range */
17-
:host-context(.organism-age-range) {
18-
width: 282px; /* Min width for facet organism age range */
25+
// Safari and Chrome, scrollbar hidden
26+
:host::-webkit-scrollbar {
27+
display: none;
1928
}
2029

21-
/* Double wide facet */
22-
:host-context(.facet-double-wide) {
23-
width: 396px;
30+
/* Close icon */
31+
:host mat-icon {
32+
font-size: 16px;
33+
height: 16px;
34+
opacity: 0.5;
35+
position: absolute;
36+
right: 8px;
37+
top: 8px;
38+
transition: opacity 280ms cubic-bezier(.4, 0, .2, 1);
39+
width: 16px;
2440
}
2541

26-
/**
27-
* HCA specific breakpoint
28-
*/
29-
@media screen and (min-width: 1200px) {
30-
31-
:host {
32-
width: 220px;
33-
}
42+
:host mat-icon:hover {
43+
opacity: 1;
3444
}

‎spa/src/app/files/facet/facet-menu/facet-menu.component.ts

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,44 @@
22
* Human Cell Atlas
33
* https://www.humancellatlas.org/
44
*
5-
* Component responsible for displaying a facet's title and widget (term selector, age range selector) when contained
6-
* inside a menu.
5+
* Component responsible for displaying a group of facets when contained inside a menu.
76
*/
87

98
// Core dependencies
10-
import { Component } from "@angular/core";
9+
import { Component, ElementRef, EventEmitter, HostListener, Output, ViewChild } from "@angular/core";
10+
import { MatIcon } from "@angular/material";
11+
12+
// App dependencies
1113

1214
@Component({
1315
selector: "facet-menu",
1416
templateUrl: "./facet-menu.component.html",
1517
styleUrls: ["./facet-menu.component.scss"],
1618
})
1719
export class FacetMenuComponent {
20+
21+
// Output
22+
@Output() menuOpen = new EventEmitter<boolean>();
23+
24+
// View child/ren
25+
@ViewChild(MatIcon, {read: ElementRef, static: false}) closeElRef: ElementRef;
26+
27+
/**
28+
* Prevents event propagation when click event is inside facet group.
29+
* Method will allow the menu to remain open when a click event is inside the card, by
30+
* stopping the propagation of click event to @HostListener. A click event on the close icon closes card.
31+
*
32+
* @param event
33+
*/
34+
@HostListener("click", ['$event'])
35+
public onClickFacetGroup(event) {
36+
37+
if ( !this.closeElRef ) {
38+
return;
39+
}
40+
41+
if ( this.closeElRef.nativeElement !== event.target ) {
42+
event.stopPropagation();
43+
}
44+
}
1845
}

‎spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.html

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,48 @@
22
<div id="filter" [ngClass]="{'filter': true, 'small': (isDeviceMobile() || isWindowWidthSmall())}">
33
<hca-search [searchTerms]="searchTerms" [selectedSearchTerms]="selectedSearchTerms"></hca-search>
44
<ng-container [ngSwitch]="isDeviceMobile() || isWindowWidthSmall()">
5-
<div id="select" class="view-all-options" *ngSwitchDefault>
5+
<div id="facet-group-menus" class="view-all-options" *ngSwitchDefault>
66
<ng-container *ngFor="let fileFacetGroup of fileFacetGroups; let i = index; trackBy: trackFileFacetGroupsByFn">
77
<div class="facet-group-menu"
88
[ngClass]="{'active': selectIndex === i}"
9-
(click)="onFacetMenuOpened(i)">
9+
(click)="onToggleFacetMenu(i)">
1010
<span>{{fileFacetGroup.facetGroupName}}</span>
1111
<mat-icon>keyboard_arrow_down</mat-icon>
12-
<ng-container *ngIf="facets.length && selectIndex === i">
13-
<div id="options" [ngClass]="getOptionsClass(i)"
14-
[ngStyle]="getFacetStyles(i, fileFacetGroup.facetNames.length, fileFacetGroups.length, fileFacetGroup.facetNames)"
15-
(mouseleave)="onFacetMenuClosed()">
12+
<facet-menu *ngIf="isFacetGroupActive(i)"
13+
id="facet-group"
14+
[ngStyle]="getFacetGroupStyles(fileFacetGroup, i)"
15+
(menuOpen)="onFacetMenuOpen($event)">
1616
<ng-container *ngFor="let facetName of fileFacetGroup.facetNames; trackBy: trackFileFacetByFn">
1717
<ng-container [ngSwitch]="isFacetOrganismAge(facetName)">
18-
<facet-menu *ngSwitchCase="true"
18+
<facet-menu-option *ngSwitchCase="true"
1919
[ngClass]="{'facet-double-wide': facetDoubleWideOrganismAge, 'organism-age-range': true}">
20-
<facet-menu-title>{{getFacetDisplayName(facetName)}}</facet-menu-title>
21-
<facet-menu-content>
20+
<facet-menu-option-title>{{getFacetDisplayName(facetName)}}</facet-menu-option-title>
21+
<facet-menu-option-content>
2222
<facet-age-range-form *ngSwitchCase="true"
2323
[ageRange]="getFacet(facetName).ageRange"
2424
(applyFacet)="onAgeRangeSelected(facetName, $event)"
2525
(clearFacet)="onAgeRangeCleared(facetName, $event)"></facet-age-range-form>
26-
</facet-menu-content>
27-
</facet-menu>
28-
<facet-menu *ngSwitchDefault>
29-
<facet-menu-title>{{getFacetDisplayName(facetName)}}</facet-menu-title>
30-
<facet-menu-content>
26+
</facet-menu-option-content>
27+
</facet-menu-option>
28+
<facet-menu-option *ngSwitchDefault>
29+
<facet-menu-option-title>{{getFacetDisplayName(facetName)}}</facet-menu-option-title>
30+
<facet-menu-option-content>
3131
<file-facet [fileFacet]="getFacet(facetName)"
3232
[facetName]="facetName"
3333
[selectedEntity]="selectedEntity"
3434
(facetTermSelected)="onFacetTermSelected($event)"></file-facet>
35-
</facet-menu-content>
36-
</facet-menu>
35+
</facet-menu-option-content>
36+
</facet-menu-option>
3737
</ng-container>
3838
</ng-container>
39-
</div>
40-
</ng-container>
39+
</facet-menu>
4140
</div>
4241
</ng-container>
4342
</div>
4443
<ng-container *ngSwitchCase="true">
4544
<div class="facet-group-menu view-options"
4645
[ngClass]="{'active': selectIndex === 1}"
47-
(click)="onFacetMenuOpened(1)">
46+
(click)="onToggleFacetMenu(1)">
4847
<span>Filter</span>
4948
<mat-icon>keyboard_arrow_down</mat-icon>
5049
</div>
@@ -77,12 +76,12 @@
7776
</ng-container>
7877
</ng-container>
7978
<div class="apply">
80-
<button class="button secondary" (click)="onFacetMenuClosed()">Apply</button>
79+
<button class="button secondary" (click)="onFacetMenuOpen(false)">Apply</button>
8180
</div>
8281
</div>
8382
</div>
8483
</ng-container>
8584
</ng-container>
8685
</div>
8786
</div>
88-
<div *ngIf="selectIndex != null" class="facet-group-menu-overlay" (click)="onFacetMenuClosed()"></div>
87+
<div *ngIf="selectIndex != null" class="facet-group-menu-overlay" (click)="onFacetMenuOpen(false)"></div>

‎spa/src/app/files/facet/facet-toolbar/facet-toolbar.component.scss

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -98,31 +98,6 @@
9898
margin-right: -4px; /* For appearance of equal margins on facet-group-menu */
9999
width: 16px;
100100
}
101-
102-
/* Select options */
103-
.hca-options {
104-
background-color: $hca-white;
105-
border: 1px solid $hca-gray-light;
106-
border-radius: 1px;
107-
box-sizing: border-box;
108-
display: flex;
109-
flex-wrap: wrap;
110-
-ms-overflow-style: none; // IE 10+, scrollbar hidden
111-
overflow-y: auto; // Firefox, scrollbar hidden unless actively scrolling
112-
padding: 6px;
113-
position: absolute;
114-
top: 44px; /* 38px for select field + 6px below select field */
115-
z-index: 11;
116-
117-
// Safari and Chrome, scrollbar hidden
118-
&::-webkit-scrollbar {
119-
display: none;
120-
}
121-
122-
&.hide {
123-
display: none;
124-
}
125-
}
126101
}
127102

128103
/* Mobile view select field */

0 commit comments

Comments
 (0)