Merge pull request #2034 from asfadmin/yoreley-slider7

Yoreley slider7

src/app/components/header/header-buttons/header-buttons.component.html

@@ -57,10 +57,13 @@
      <ng-container *ngIf="searchType === searchTypes.DISPLACEMENT">
         <button
           class="spacing nav-icon-buttons" color="basic" mat-button>
-          <mat-icon class="large-icon">
-            description
-          </mat-icon>
-          <div class="text-under faint-text">{{ language.getName()}}</div>
+
+          <app-docs-modal class="icon-description"
+                          matTooltip="{{ 'DATASET_INFO' | translate }}"
+                          description="description"
+                          url="https://asf.alaska.edu/datasets/daac/opera/">
+          </app-docs-modal>
+          <div class="text-under faint-text">{{ 'INFO' | translate }}</div>
         </button>
       </ng-container>
 

src/app/components/header/header-buttons/header-buttons.component.scss

@@ -20,5 +20,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-}
 
+}

src/app/components/header/header-buttons/header-buttons.module.ts

@@ -17,6 +17,7 @@ import { CustomizeEnvComponent } from './customize-env/customize-env.component';
 import { OnlynumberDirective } from '@directives/onlynumber.directive';
 import { SharedModule } from '@shared';
 import { LanguageSelectorModule } from "@components/shared/selectors/language-selector/language-selector.module";
+import {DocsModalModule} from '@components/shared/docs-modal';
 
 @NgModule({
   declarations: [
@@ -25,20 +26,21 @@ import { LanguageSelectorModule } from "@components/shared/selectors/language-se
     CustomizeEnvComponent,
     OnlynumberDirective
   ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatBadgeModule,
-    MatMenuModule,
-    MatInputModule,
-    MatDialogModule,
-    MatSharedModule,
-    MatSelectModule,
-    DatasetSelectorModule,
-    MatFormFieldModule,
-    SharedModule,
-    LanguageSelectorModule,
-  ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatBadgeModule,
+        MatMenuModule,
+        MatInputModule,
+        MatDialogModule,
+        MatSharedModule,
+        MatSelectModule,
+        DatasetSelectorModule,
+        MatFormFieldModule,
+        SharedModule,
+        LanguageSelectorModule,
+        DocsModalModule,
+    ],
   exports: [ HeaderButtonsComponent ]
 })
 export class HeaderButtonsModule { }

src/app/components/shared/docs-modal/docs-modal.component.html

@@ -1,10 +1,17 @@
-<ng-container *ngIf="text; else elseBlock">
+<ng-container *ngIf="text">
   <a (click)="showDoc()" class="link-pointer text-link">
     {{ text }}
   </a>
 </ng-container>
-<ng-template #elseBlock>
+<ng-container *ngIf="description">
+  <a (click)="showDoc()" class="link-pointer" [matTooltip]="this.tooltip ?? ('DATASET_INFO' | translate)">
+    <mat-icon class="material-symbols-outlined large-icon">description</mat-icon>
+  </a>
+</ng-container>
+<ng-container *ngIf="!description && !text">
   <a (click)="showDoc()" class="link-pointer" matTooltip="{{this.tooltip ?? 'OPEN_LINK_TO_DOCUMENTATION' | translate}}">
     <mat-icon class="icon-size">{{ icon }}</mat-icon>
   </a>
-</ng-template>
+</ng-container>
+
+

src/app/components/shared/docs-modal/docs-modal.component.scss

@@ -14,4 +14,14 @@
     color: themed('blue-link');
   }
   text-decoration: underline;
+
+}
+
+.large-icon {
+  @include md-icon-size(30px);
+  min-height: 30px;
+  margin-right: 0;
+  @include themify($themes) {
+    color: themed('dark-primary-text');
+  }
 }

src/app/components/shared/docs-modal/docs-modal.component.ts

@@ -39,7 +39,9 @@ export class DocsModalComponent implements OnInit, OnDestroy {
   @Input() url: string;
   @Input() text: string;
   @Input() icon: string = 'read_more';
+  @Input() description: string;
   @Input() tooltip: string;
+
   public docURL: string;
   public safeDocURL: any;