Skip to content

Commit

Permalink
Merge branch 'andy/alternate-menu-2' into andy/displacement
Browse files Browse the repository at this point in the history
  • Loading branch information
@artisticlight
artisticlight committed Jul 25, 2024
2 parents 5eaa825 + 9359c78 commit 9e853b1
Show file tree
Hide file tree
Showing 16 changed files with 155 additions and 161 deletions.
2 changes: 1 addition & 1 deletion src/app/components/header/header.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<app-dataset-header *ngIf="searchType === searchTypes.DATASET">
</app-dataset-header>

<app-timeseries-header *ngIf="searchType === searchTypes.TIMESERIES">
<app-timeseries-header *ngIf="searchType === searchTypes.DISPLACEMENT">
</app-timeseries-header>

<app-list-header *ngIf="searchType === searchTypes.LIST">
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/results-menu/results-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@
searchType !== SearchTypes.BASELINE &&
searchType !== SearchTypes.SBAS &&
searchType !== SearchTypes.SARVIEWS_EVENTS &&
searchType !== SearchTypes.TIMESERIES
searchType !== SearchTypes.DISPLACEMENT
"
[class.small-size]="breakpoint === breakpoints.SMALL"
[resize$]="resize$">
</app-desktop-results-menu>

<app-timeseries-results-menu class="w100 h100 results-menu--layout" *ngIf="searchType === SearchTypes.TIMESERIES" [resize$]="resize$">
<app-timeseries-results-menu class="w100 h100 results-menu--layout" *ngIf="searchType === SearchTypes.DISPLACEMENT">

</app-timeseries-results-menu>
<app-sarviews-results-menu class="w100 h100 results-menu--layout"
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/results-menu/scenes-list/scenes-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
searchType === SearchTypes.BASELINE ||
searchType === SearchTypes.LIST ||
searchType === SearchTypes.CUSTOM_PRODUCTS ||
searchType === SearchTypes.TIMESERIES
searchType === SearchTypes.DISPLACEMENT
"
>
<div *cdkVirtualFor="let scene of scenes | slice:0:numberProductsInList">
Expand Down
2 changes: 1 addition & 1 deletion ...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<div class="toggle-group-wrapper--layout">
<mat-button-toggle class="control-mat-button-toggle ts-criteria-button-toggle"
(click)="onToggleFiltersMenu()">
{{ 'TIMESERIES FILTERS' | translate }}<mat-icon class="more-horiz">more_horiz</mat-icon>
{{ 'DISPLACEMENT FILTERS' | translate }}<mat-icon class="more-horiz">more_horiz</mat-icon>
</mat-button-toggle>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/shared/docs-modal/docs-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
</ng-container>
<ng-template #elseBlock>
<a (click)="showDoc()" class="link-pointer" matTooltip="{{this.tooltip ?? 'OPEN_LINK_TO_DOCUMENTATION' | translate}}">
<mat-icon>{{ icon }}</mat-icon>
<mat-icon class="icon-size">{{ icon }}</mat-icon>
</a>
</ng-template>
5 changes: 5 additions & 0 deletions src/app/components/shared/docs-modal/docs-modal.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
cursor: pointer;
}

.icon-size {
height: 16px !important;
line-height: 16px !important;
}

.text-link {
@include themify($themes) {
color: themed('blue-link');
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/shared/docs-modal/docs-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface DialogData {
export class DocsModalComponent implements OnInit, OnDestroy {
@Input() url: string;
@Input() text: string;
@Input() icon: string = 'info';
@Input() icon: string = 'read_more';
@Input() tooltip: string;
public docURL: string;
public safeDocURL: any;
Expand Down
172 changes: 47 additions & 125 deletions src/app/components/shared/selectors/search-type-selector/search-type-selector.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,86 +20,73 @@
<mat-menu #searchTypeMenu="matMenu" [(ngModel)]="searchType" name="searchType" id="searchMenu" ngDefaultControl>

<div>
<menu mat-menu-item class="menu-item mat-menu-item" [matMenuTriggerFor]="searchMenu" mat-menu-item>
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="item-title">
Search Types
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
A collection of different search types available for perusal.
@for(type of searchTypeSelectors.search; track type.nameKey; let last = $last) {
<menu class="menu-item mat-menu-item" mat-menu-item (click)="onSetSearchType(type.searchType)">
<div class="menu-item-inner">
<div class="fx-80 menu-item-content">
<div class="item-title">
{{ type.nameKey | translate}}
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
<span *ngFor="let key of type.descriptionKeys">
{{ key | translate }}
</span>
<app-docs-modal url="{{ type.helpUrl}}" class="read-more-icon"></app-docs-modal>
</div>
</div>
</div>
<div class="fx-25 menu-item-aside">
<span class="material-icons-outlined menu-item-icon">
search</span>

</div>
</div>
</menu>
<hr class="dataset-hr">

<menu mat-menu-item class="menu-item mat-menu-item" [matMenuTriggerFor]="toolMenu" mat-menu-item>
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="item-title">
Tools
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
A collection of different tools available for refining searches.
<div class="fx-20 menu-item-aside">
<span *ngIf="type.iconType === iconTypes.MATERIAL" class="material-icons-outlined menu-item-icon">
{{ type.icon}}
</span>
<img *ngIf="type.iconType === iconTypes.IMAGE" src="{{ type.icon }}" class="menu-item-icon">
</div>
</div>
<div class="fx-25 menu-item-aside">
<span class="material-icons-outlined menu-item-icon">
gear</span>

</div>
</div>
</menu>
</menu>
@if(!last) {
<hr class="dataset-hr">
}
}
<hr class="dataset-hr">

<menu class="menu-item mat-menu-item" mat-menu-item (click)="onSetSearchType(searchTypes.CUSTOM_PRODUCTS)"
[ngClass]="{'disable-search-type-on-demand' : !isLoggedIn}">
[ngClass]="{'disable-search-type-on-demand' : !isLoggedIn}">
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="fx-80 menu-item-content">
<div class="item-title">
{{'ON_DEMAND_PRODUCTS' | translate}}
<span class="login-prompt" [ngClass]="{'login-hidden' : isLoggedIn}">
{{'SIGN_IN_TO_ACCESS' | translate}}
</span>
{{'SIGN_IN_TO_ACCESS' | translate}}
</span>
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
{{'ON_DEMAND_SEARCH_ALLOWS_YOU_TO_VIEW_YOUR_SUBMITTED_ON_DEMAND_JOBS' | translate}}
</div>
<mat-card-actions (click)="onOpenDocs($event)">
<app-docs-modal class="info-text" text="{{ 'MORE_INFO' | translate }}"
url="https://docs.asf.alaska.edu/vertex/manual/#on-demand-products-search-options">
<app-docs-modal class="read-more-icon"
url="https://docs.asf.alaska.edu/vertex/manual/#on-demand-products-search-options">
</app-docs-modal>
</mat-card-actions>
</div>
</div>
<div class="fx-25 menu-item-aside">
<div class="fx-20 menu-item-aside">
<img src="assets/asf-logos/HyP3-graphic-only.png" class="menu-item-icon">
</div>
</div>
</menu>

<hr class="dataset-hr">

<menu mat-menu-item class="menu-item mat-menu-item" [matMenuTriggerFor]="derivedDatasetMenu" mat-menu-item>
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="item-title">
{{'DERIVED_DATASETS' | translate }}
<menu mat-menu-item class="menu-item mat-menu-item" [matMenuTriggerFor]="derivedDatasetMenu" mat-menu-item>
<div class="menu-item-inner">
<div class="fx-80 menu-item-content">
<div class="item-title">
{{'DERIVED_DATASETS' | translate }}
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
{{'DERIVED_DATASETS_CONTAIN_A_COLLECTION_OF_DATASETS_AVAILABLE_TO_VIEW_AND_DOWNLOAD'| translate }}
</div>
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
{{'DERIVED_DATASETS_CONTAIN_A_COLLECTION_OF_DATASETS_AVAILABLE_TO_VIEW_AND_DOWNLOAD'| translate }}
<div class="fx-20 menu-item-aside">
<span class="material-icons-outlined menu-item-icon">{{ 'DATASET_LINKED' | translate }}</span>
</div>
</div>
<div class="fx-25 menu-item-aside">
<span class="material-icons-outlined menu-item-icon">{{ 'DATASET_LINKED' | translate }}</span>
</div>
</div>
</menu>
</menu>

</div>
</mat-menu>

Expand All @@ -108,7 +95,7 @@
(click)="onOpenDerivedDataset(dataset.info_url, dataset.name); $event.stopPropagation();">
<div class="menu-item">
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="fx-80 menu-item-content">
<div class="item-title" (click)="onOpenDerivedDataset(dataset.info_url, dataset.name)">
{{ dataset.name | translate }}
</div>
Expand All @@ -122,7 +109,7 @@
mat-button>{{ 'DOWNLOAD' | translate }}</button>
</mat-card-actions>
</div>
<div class="fx-75 menu-item-aside">
<div class="fx-80 menu-item-aside">
<img [src]="dataset.picture" (click)="onOpenDerivedDataset(dataset.info_url, dataset.name)"
class="menu-item-icon">
</div>
Expand All @@ -131,70 +118,5 @@
<hr *ngIf="!isLast" class="dataset-hr">
</menu>
</mat-menu>

<mat-menu #searchMenu="matMenu">
@for(type of searchTypeSelectors.search; track type.nameKey; let last = $last) {
<menu class="menu-item mat-menu-item" mat-menu-item (click)="onSetSearchType(type.searchType)">
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="item-title">
{{ type.nameKey | translate}}
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
<span *ngFor="let key of type.descriptionKeys">
{{ key | translate }}
</span>
</div>
<mat-card-actions>
<app-docs-modal class="info-text" text="{{'MORE_INFO' | translate}}" url="{{ type.helpUrl}}">
</app-docs-modal>
</mat-card-actions>
</div>
<div class="fx-25 menu-item-aside">
<span *ngIf="type.iconType === iconTypes.MATERIAL" class="material-icons-outlined menu-item-icon">
{{ type.icon}}</span>

<img *ngIf="type.iconType === iconTypes.IMAGE" src="{{ type.icon }}" class="menu-item-icon">
</div>
</div>
@if(!last) {
<hr class="dataset-hr">
}
</menu>
}

</mat-menu>
<mat-menu #toolMenu="matMenu">
@for(type of searchTypeSelectors.tools; track type.nameKey; let last = $last) {
<menu class="menu-item mat-menu-item" mat-menu-item (click)="onSetSearchType(type.searchType)">
<div class="menu-item-inner">
<div class="fx-75 menu-item-content">
<div class="item-title">
{{ type.nameKey | translate}}
</div>
<div class="item-content" [ngClass]="{'limitTextHeight': isReadMore}">
<span *ngFor="let key of type.descriptionKeys">
{{ key | translate }}
</span>
</div>
<mat-card-actions>
<app-docs-modal class="info-text" text="{{'MORE_INFO' | translate}}" url="{{ type.helpUrl}}">
</app-docs-modal>
</mat-card-actions>
</div>
<div class="fx-25 menu-item-aside">
<span *ngIf="type.iconType === iconTypes.MATERIAL" class="material-icons-outlined menu-item-icon">
{{ type.icon}}</span>

<img *ngIf="type.iconType === iconTypes.IMAGE" src="{{ type.icon }}" class="menu-item-icon">
</div>
</div>
@if(!last) {
<hr class="dataset-hr">
}
</menu>
}

</mat-menu>
</div>
</div>
</div>
34 changes: 31 additions & 3 deletions src/app/components/shared/selectors/search-type-selector/search-type-selector.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@
.menu-item-icon {
@include themify($themes) {
color: themed("dark-primary-text");
font-size: 50px !important;
height: 50px !important;
width: 50px !important;
}

@include md-icon-size(70px);
@include md-icon-size(50px);

margin-right: 0;
}
Expand All @@ -20,6 +23,11 @@
padding: 0;
}

.category-hr {
padding: 0;
border-top: 2px solid;
}

.mat-mdc-menu-item {
padding: 0;
}
Expand All @@ -28,10 +36,26 @@
display: flex;
}

.menu-item-inner {
width: calc(100% - 20px) !important;
margin: 5px 5px 15px 15px;
}

.menu-item-content {
min-width: 400px;
}

.menu-item-aside {
//min-width: 130px;
}

.item-title {
font-weight: bold;
}

.item-content {
}

.mat-mdc-card-actions {
padding: 0;
margin: 0;
Expand All @@ -47,7 +71,7 @@
}

.limitTextHeight {
height: 37px;
height: 55px;
overflow: hidden;
}

Expand Down Expand Up @@ -182,11 +206,15 @@
}
}


.login-prompt {
font-style: italic;
}

.login-hidden {
display: none;
}

.read-more-icon {
position: relative;
top: 3px;
}
Loading

0 comments on commit 9e853b1

Please sign in to comment.