Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/floating menu #337

Merged
merged 10 commits into from
Jul 18, 2024
Merged

Fix/floating menu #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0a95c8a
Set color scheme and taxonomy for semiconductors
chuanlin2018 Mar 14, 2024
42d9c46
Restructuring filters component to handle more collections
chuanlin2018 Mar 22, 2024
ffe6e35
Modified collection class; fixed unit test; code clean up
chuanlin2018 Mar 25, 2024
e3f354a
Made collection color scheme configurable
chuanlin2018 Mar 29, 2024
a6d1a40
Rewrote the floating menu
chuanlin2018 Apr 10, 2024
881076e
Some clean up
chuanlin2018 Apr 11, 2024
1f30008
Added metrics info to floating menu
chuanlin2018 Apr 11, 2024
c8135bc
Added metrics info to floating menu
chuanlin2018 Apr 15, 2024
e4f69bb
Merge branch 'feature/semiconductors' into fix/floating-menu
chuanlin2018 Apr 15, 2024
a7171ec
Merge from feature/semiconductors branch
chuanlin2018 Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions angular/src/app/landing/filters/filters.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
#filterHeader {
background-color: var(--science-theme-background-default);
border-bottom:.5px solid #e6e6e6;
width: 100%;
padding: .625em;
Expand All @@ -23,7 +22,7 @@

#activeFilter {
/* background-color: #F8F9F9; */
background-color: var(--science-theme-background-light);
/* background-color: var(--forensics-background-light); */
padding: 0px 0px 0px 0px;
}

Expand Down Expand Up @@ -63,8 +62,8 @@
.collapsedFilterBox {
/* text-align:center;
padding: 0px 5pxpx 0px 5px; */
/* background-color: var(--science-theme-background-default); */
background-image: linear-gradient( var(--science-theme-background-default), white);
/* background-color: var(--forensics-background-default); */
/* background-image: linear-gradient( var(--forensics-background-default), white); */
color: #fff;
width: 40px;
height: 300px;
Expand All @@ -73,20 +72,17 @@
}

.normalFilter {
/* float: left; */
width: 100%;
}

.lbl-filter {
margin-top:1em;
background-color: var(--science-theme-background-light);
width: 100%;
padding-left: 1em;
padding-top:1em;
}

.filter-input {
background-color: var(--science-theme-background-light);
padding-left:15px;
padding-right:1.0em;
}
Expand All @@ -103,7 +99,6 @@

.show-more-less {
color: #1E6BA1;
background-color: var(--science-theme-background-light);
text-align: right;
padding-right: 20px;
width: 100%;
Expand All @@ -116,7 +111,7 @@
}

.badge-style {
background-color: var(--science-theme-background-default);
/* background-color: var(--forensics-background-default); */
color: white;
border-radius: 100%;
padding: 2px 6px 2px 2px;
Expand Down
147 changes: 40 additions & 107 deletions angular/src/app/landing/filters/filters.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,78 @@
<div [@filterExpand]="mobileMode? 'expanded' : isActive? 'expanded' : 'collapsed'" [ngStyle]="{'width': mobileMode? '100%':filterWidthNum + 'px'}">
<div class="normalFilter" [hidden]="!isActive && !mobileMode" id="activeFilter" style="height:auto;padding-bottom: 1em;">
<div [@filterExpand]="mobileMode? 'expanded' : isActive? 'expanded' : 'collapsed'"
[ngStyle]="{'width': mobileMode? '100%':filterWidthNum + 'px'}">
<div class="normalFilter" [hidden]="!isActive && !mobileMode" id="activeFilter"
style="height:auto;padding-bottom: 1em;" [style.background-color]="lighterColor">
<div>
<!-- Filter header -->
<div id="filterHeader" *ngIf="isActive || mobileMode">
<a id="filtersLabel"
class="btn-sm collapsed in" (click)="this.isActive = !this.isActive;setFilterWidth()" data-toggle="collapse"
style="border-color: #025277; color: #FFF;padding: 0em;border: 0em"
data-target="#demo"><span *ngIf="filterWidthNum > 170">Filters </span><i [ngClass]="getFilterImgClass()"
style="zoom: 100%;color: #fff;cursor: pointer;"></i></a>
<div id="filterHeader" *ngIf="isActive || mobileMode" [style.background-color]=" defaultColor">
<a id="filtersLabel" class="btn-sm collapsed in"
(click)="this.isActive = !this.isActive;setFilterWidth()" data-toggle="collapse"
data-target="#demo"><span *ngIf="filterWidthNum > 170">Filters </span><i
[ngClass]="getFilterImgClass()" style="zoom: 100%;color: #fff;cursor: pointer;"></i></a>

<a href="#" id="clear-all" data-toggle="tooltip" title="Clear all filters"
(click)="$event.preventDefault();clearFilters()">
<i style="vertical-align: middle;zoom: 70%;margin-right: .3em;" class="faa faa-remove">
</i><span *ngIf="filterWidthNum > 170">Clear All</span></a>
</div>

<!-- Filter body -->
<!-- Display spinner while waiting for search result -->
<div class="spinner" *ngIf="searching">
<i class="faa faa-spinner faa-spin faa-stack-2x" style="color:#1E6BA1;" aria-hidden="true"></i>
<i class="faa faa-spinner faa-spin faa-stack-2x" [style.color]="defaultColor" aria-hidden="true"></i>
</div>

<div style="padding-left: -1em;" *ngIf="isActive && !searching">
<!-- Forensics Research topics -->
<div class="bottom-line" *ngIf="forensicsThemesTree.length > 0">
<div class="filter-checkbox">
<div [@expand]="forensicsNodeExpanded? forensicsShowMoreLink ? 'collapsed':'expanded':'closed'" >
<p-tree id="forensicsThemes" [value]="forensicsThemesTree" selectionMode="checkbox" [style]="researchTopicStyle" [(selection)]="forensicsSelectedThemesNode"
(onNodeUnselect)="filterResults()"
(onNodeSelect)="filterResults()"
(onNodeExpand)="forensicsNodeExpanded = true"
(onNodeCollapse)="forensicsNodeExpanded = false">
<ng-template let-node pTemplate="default">
<div class="text-nowrap" data-toggle="tooltip" [title]="filterTooltip(node)">
<span *ngIf="node.label.split('-')[1] !=''; else header1" class="invisible-scrollbar" > {{node.label.split("-")[0]}}&nbsp;</span>
<ng-template #header1>
<span><b> {{node.label.split("-")[0]}}&nbsp;</b></span>
</ng-template>

<span class="w3-badge badge-notify badge-style"
*ngIf="node.label.split('-')[1] !=''">
{{node.label.split("-")[1]}}</span>
</div>
</ng-template>
</p-tree>
</div>
</div>
<div class="show-more-less" (click)="$event.preventDefault(); forensicsShowMoreLink = false"
*ngIf="forensicsNodeExpanded == true && forensicsShowMoreLink == true && forensicsThemesTree[0]?.children.length > 5">Show More...
</div>
<div class="show-more-less" (click)="$event.preventDefault();forensicsShowMoreLink = true"
*ngIf="forensicsNodeExpanded == true && forensicsShowMoreLink == false && forensicsThemesTree[0]?.children.length > 5">Show Less
</div>
</div>

<!-- NIST Research topics -->
<div class="bottom-line">
<div class="filter-checkbox">
<div [@expand]="nodeExpanded? showMoreLink ? 'collapsed':'expanded':'closed'">
<p-tree id="themes" [value]="themesTree" selectionMode="checkbox" [style]="researchTopicStyle" [(selection)]="selectedThemesNode"
(onNodeUnselect)="filterResults()"
(onNodeSelect)="filterResults()"
(onNodeExpand)="nodeExpanded = true"
(onNodeCollapse)="nodeExpanded = false">
<ng-template let-node pTemplate="default">
<div class="text-nowrap" data-toggle="tooltip" [title]="filterTooltip(node)">
<span *ngIf="node.label.split('-')[1] !=''; else header1" class="invisible-scrollbar"> {{node.label.split("-")[0]}}&nbsp;</span>
<ng-template #header1>
<span><b> {{node.label.split("-")[0]}}&nbsp;</b></span>
</ng-template>

<span class="w3-badge badge-notify badge-style"
*ngIf="node.label.split('-')[1] !=''">
{{node.label.split("-")[1]}}</span>
</div>
</ng-template>
</p-tree>
</div>
</div>
<div class="show-more-less" (click)="$event.preventDefault(); showMoreLink = false"
*ngIf="nodeExpanded == true && showMoreLink == true && themesTree[0]?.children.length > 5">Show More...
</div>
<div class="show-more-less" (click)="$event.preventDefault();showMoreLink = true"
*ngIf="nodeExpanded == true && showMoreLink == false && themesTree[0]?.children.length > 5">Show Less
</div>
<!-- Loop through all themes -->
<div *ngFor="let collection of allCollections | keyvalue">
<app-taxonomy [collectionThemesTree]="allCollections[collection.key].theme?.collectionThemesTree"
[backgroundColor]="lighterColor" [defaultColor]="defaultColor"
(filterString)="updateFilterString($event, collection)">
</app-taxonomy>
</div>

<div *ngIf="theme=='ScienceTheme'" style="width: 100%;">
<span class="show-more-less" style="float: right;" (click)="toggleMoreOptions()">{{moreOptionsText}}</span>
<span class="show-more-less" style="float: right;"
(click)="toggleMoreOptions()">{{moreOptionsText}}</span>
</div>

<div style="width: 100%;">
<div [@expandOptions]="MoreOptionsDisplayed ? 'collapsed':'expanded'">
<!-- Resource type -->
<div class="filter-checkbox bottom-line">
<p-tree [value]="resourceTypeTree" selectionMode="checkbox" [style]="ResourceTypeStyle"
[(selection)]="selectedResourceTypeNode"
(onNodeUnselect)="filterResults()"
[(selection)]="selectedResourceTypeNode" (onNodeUnselect)="filterResults()"
(onNodeSelect)="filterResults()">
<ng-template let-node pTemplate="default">
<div class="text-nowrap" data-toggle="tooltip" [title]="filterTooltip(node)">
<span *ngIf="node.label.split('-')[1] !=''; else header2"> {{node.label.split("-")[0]}}&nbsp;</span>
<span *ngIf="node.label.split('-')[1] !=''; else header2">
{{node.label.split("-")[0]}}&nbsp;</span>
<ng-template #header2>
<span><b> {{node.label.split("-")[0]}}&nbsp;</b></span>
</ng-template>

<span class="w3-badge badge-notify badge-style"
<span class="w3-badge badge-notify badge-style"
*ngIf="node.label.split('-')[1] !=''">
{{node.label.split("-")[1]}}</span>
</div>
</ng-template>
</p-tree>
</div>

<!-- Components -->
<div class="filter-checkbox bottom-line" *ngIf="componentsTree.length > 0">
<p-tree [value]="componentsTree" selectionMode="checkbox" [style]="recordHasStyle"
[(selection)]="selectedComponentsNode" (onNodeUnselect)="filterResults()"
(onNodeSelect)="filterResults()">
<ng-template let-node pTemplate="default">
<div class="text-nowrap" data-toggle="tooltip" [title]="filterTooltip(node)">
<span *ngIf="node.label.split('-')[1] !=''; else header3"> {{node.label.split("-")[0]}}&nbsp;</span>
<span *ngIf="node.label.split('-')[1] !=''; else header3">
{{node.label.split("-")[0]}}&nbsp;</span>
<ng-template #header3>
<span><b> {{node.label.split("-")[0]}}&nbsp;</b></span>
</ng-template>

<span class="w3-badge badge-notify badge-style"
<span class="w3-badge badge-notify badge-style"
*ngIf="node.label.split('-')[1] !=''">
{{node.label.split("-")[1]}}</span>
</div>
Expand All @@ -136,23 +83,16 @@
</div>

<!-- Authors and Contributors -->
<div>
<div [style.background-color]="lighterColor">
<div class="lbl-filter">
<label><b>Authors and Contributors</b></label>
</div>
<div class="filter-input p-fluid">
<label for="suggestedauthor" class="hideLabel">Search Input</label>
<p-autoComplete
[(ngModel)]="selectedAuthor"
inputId="suggestedauthor"
[suggestions]="suggestedAuthors"
(completeMethod)="filterAuthors($event)"
(onSelect)="filterResults()"
(onUnselect)="filterResults()"
[multiple]="true"
[minLength]="1"
[maxlength]="30"
[style]="filterStyle">
<p-autoComplete [(ngModel)]="selectedAuthor" inputId="suggestedauthor"
[suggestions]="suggestedAuthors" (completeMethod)="filterAuthors($event)"
(onSelect)="filterResults()" (onUnselect)="filterResults()" [multiple]="true"
[minLength]="1" [maxlength]="30" [style]="filterStyle">
<ng-template let-author pTemplate="item">
<div data-toggle="tooltip" [title]="author">{{author}}</div>
</ng-template>
Expand All @@ -167,18 +107,10 @@
</div>
<div class="filter-input p-fluid">
<label for="keyword" class="hideLabel">Keyword</label>
<p-autoComplete
inputId="keyword"
[(ngModel)]="selectedKeywords"
[suggestions]="suggestedKeywords"
(completeMethod)="updateSuggestedKeywords($event)"
[multiple]="true"
(onSelect)="filterResults()"
(onUnselect)="filterResults()"
[minLength]="1"
[maxlength]="30"
[style]="filterStyle"
[inputStyle]="{'width':'100%'}">
<p-autoComplete inputId="keyword" [(ngModel)]="selectedKeywords"
[suggestions]="suggestedKeywords" (completeMethod)="updateSuggestedKeywords($event)"
[multiple]="true" (onSelect)="filterResults()" (onUnselect)="filterResults()"
[minLength]="1" [maxlength]="30" [style]="filterStyle" [inputStyle]="{'width':'100%'}">
<ng-template let-keyword pTemplate="item">
<div data-toggle="tooltip" [title]="suggestedKeywordsLkup[keyword]">{{keyword}}</div>
</ng-template>
Expand All @@ -189,10 +121,11 @@
</div>
</div>

<div *ngIf="!searching && !isActive && !mobileMode" class="collapsedFilterBox" (click)="this.isActive = !this.isActive;setFilterWidth()">

<div *ngIf="!searching && !isActive && !mobileMode" class="collapsedFilterBox"
[style.background-image]="collapedFilerColor" (click)="this.isActive = !this.isActive;setFilterWidth()">

<!-- Collapsed filters -->
<div >
<div>
<i class="faa faa-angle-double-right collapsedFilterIcon"></i>
</div>
<div class="rotate rotatedFilterText"> Filters </div>
Expand Down
9 changes: 7 additions & 2 deletions angular/src/app/landing/filters/filters.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { testdata } from '../../../environments/environment';
import { TaxonomyModule } from '../taxonomy/taxonomy.module';
import { TaxonomyComponent } from '../taxonomy/taxonomy.component';
import { CollectionService } from '../../shared/collection-service/collection.service';

describe('FiltersComponent', () => {
let component: FiltersComponent;
Expand All @@ -22,16 +25,18 @@ describe('FiltersComponent', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FiltersComponent ],
declarations: [ FiltersComponent, TaxonomyComponent ],
imports: [
HttpClientTestingModule,
BrowserTransferStateModule,
AutoCompleteModule,
FormsModule,
TreeModule,
BrowserAnimationsModule],
BrowserAnimationsModule,
TaxonomyModule],
providers: [
SearchService,
CollectionService,
{ provide: AppConfig, useValue: cfg }
]
})
Expand Down
Loading
Loading