From 4ddd966eeb40341a26cb539be3bf630d2dca2d6a Mon Sep 17 00:00:00 2001
From: Yoreley <yvillafanez@unicon-intl.com>
Date: Fri, 22 Nov 2024 10:26:09 -0800
Subject: [PATCH 1/4] Buttom WIP

---
 .../header/header-buttons/header-buttons.component.html    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/components/header/header-buttons/header-buttons.component.html b/src/app/components/header/header-buttons/header-buttons.component.html
index f3a95dee3..12e633088 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.html
+++ b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -56,11 +56,10 @@
 
      <ng-container *ngIf="searchType === searchTypes.DISPLACEMENT">
         <button
+          matTooltip="{{ 'Dataset Info' | translate }}"
           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>
+          <mat-icon class="large-icon">info</mat-icon>
+          <div class="text-under faint-text">{{ 'Info' | translate }}</div>
         </button>
       </ng-container>
 

From 9c8687c979ed5e8b4a3182f466fa0567f6dccb82 Mon Sep 17 00:00:00 2001
From: Andrew Anderson <raanderson9@alaska.edu>
Date: Fri, 22 Nov 2024 11:08:27 -0800
Subject: [PATCH 2/4] WIP Test button in place

---
 .../header-buttons.component.html             | 17 ++++++-----
 .../header-buttons/header-buttons.module.ts   | 30 ++++++++++---------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/app/components/header/header-buttons/header-buttons.component.html b/src/app/components/header/header-buttons/header-buttons.component.html
index f3a95dee3..238ab1d8e 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.html
+++ b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -55,13 +55,16 @@
       </ng-container>
 
      <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>
-        </button>
+<!--        <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>-->
+<!--        </button>-->
+       <app-docs-modal url="https://docs.asf.alaska.edu/vertex/baseline/"
+                       text="{{'WHAT_IS_BASELINE' | translate}}?">
+       </app-docs-modal>
       </ng-container>
 
         <button
diff --git a/src/app/components/header/header-buttons/header-buttons.module.ts b/src/app/components/header/header-buttons/header-buttons.module.ts
index 371b3188c..e314fda7d 100644
--- a/src/app/components/header/header-buttons/header-buttons.module.ts
+++ b/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 { }

From fcb01621e599cdeea50d5b9d66491e8f0f668451 Mon Sep 17 00:00:00 2001
From: Yoreley <yvillafanez@unicon-intl.com>
Date: Mon, 25 Nov 2024 13:51:23 -0800
Subject: [PATCH 3/4] Icon WIP

---
 .../header-buttons.component.html              | 18 ++++++++----------
 .../header-buttons.component.scss              |  2 +-
 .../docs-modal/docs-modal.component.html       | 13 ++++++++++---
 .../docs-modal/docs-modal.component.scss       | 10 ++++++++++
 .../shared/docs-modal/docs-modal.component.ts  |  2 ++
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/app/components/header/header-buttons/header-buttons.component.html b/src/app/components/header/header-buttons/header-buttons.component.html
index 238ab1d8e..6de6c5d47 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.html
+++ b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -55,16 +55,14 @@
       </ng-container>
 
      <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>-->
-<!--        </button>-->
-       <app-docs-modal url="https://docs.asf.alaska.edu/vertex/baseline/"
-                       text="{{'WHAT_IS_BASELINE' | translate}}?">
-       </app-docs-modal>
+        <button
+          class="spacing nav-icon-buttons" color="basic" mat-button>
+          <app-docs-modal class="icon-description"
+                          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>
 
         <button
diff --git a/src/app/components/header/header-buttons/header-buttons.component.scss b/src/app/components/header/header-buttons/header-buttons.component.scss
index af379597e..4455c0c8d 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.scss
+++ b/src/app/components/header/header-buttons/header-buttons.component.scss
@@ -20,5 +20,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-}
 
+}
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.html b/src/app/components/shared/docs-modal/docs-modal.component.html
index 24770f6ab..02c19a3d0 100644
--- a/src/app/components/shared/docs-modal/docs-modal.component.html
+++ b/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>
+
+
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.scss b/src/app/components/shared/docs-modal/docs-modal.component.scss
index 1db25789d..7b5db041a 100644
--- a/src/app/components/shared/docs-modal/docs-modal.component.scss
+++ b/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');
+  }
 }
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.ts b/src/app/components/shared/docs-modal/docs-modal.component.ts
index 5b53f4821..808387d42 100644
--- a/src/app/components/shared/docs-modal/docs-modal.component.ts
+++ b/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 = 'description';
   @Input() tooltip: string;
+
   public docURL: string;
   public safeDocURL: any;
 

From 47764766d229726dc6b89f42e17ec90c86fa2170 Mon Sep 17 00:00:00 2001
From: Yoreley <yvillafanez@unicon-intl.com>
Date: Tue, 26 Nov 2024 09:09:45 -0800
Subject: [PATCH 4/4] Dataset Info button

---
 .../header/header-buttons/header-buttons.component.html         | 2 ++
 src/app/components/shared/docs-modal/docs-modal.component.ts    | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/header/header-buttons/header-buttons.component.html b/src/app/components/header/header-buttons/header-buttons.component.html
index 6de6c5d47..fefa6ff1c 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.html
+++ b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -57,7 +57,9 @@
      <ng-container *ngIf="searchType === searchTypes.DISPLACEMENT">
         <button
           class="spacing nav-icon-buttons" color="basic" mat-button>
+
           <app-docs-modal class="icon-description"
+                          matTooltip="{{ 'DATASET_INFO' | translate }}"
                           description="description"
                           url="https://asf.alaska.edu/datasets/daac/opera/">
           </app-docs-modal>
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.ts b/src/app/components/shared/docs-modal/docs-modal.component.ts
index 808387d42..697dec0b3 100644
--- a/src/app/components/shared/docs-modal/docs-modal.component.ts
+++ b/src/app/components/shared/docs-modal/docs-modal.component.ts
@@ -39,7 +39,7 @@ export class DocsModalComponent implements OnInit, OnDestroy {
   @Input() url: string;
   @Input() text: string;
   @Input() icon: string = 'read_more';
-  @Input() description: string = 'description';
+  @Input() description: string;
   @Input() tooltip: string;
 
   public docURL: string;