New Headers Implementation

src/app/data/icons.ts

@@ -0,0 +1,44 @@
+export const fileDownloadIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
+  <path
+    fill="black"
+    d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z" />
+  <path
+    fill="black"
+    d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z" />
+</svg>`;
+
+export const viewMoreIcon = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 17L17 7" />
+  <path d="M17 7H7" />
+  <path d="M17 7V17" />
+</svg>
+`;
+
+export const fullScreenIcon = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+     stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+     xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4h-6M20 4v6M4 20h6M4 20v-6"/>
+</svg>
+`;
+
+export const exitFullScreenIcon = `
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none"
+     stroke="black" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"
+     xmlns="http://www.w3.org/2000/svg">
+  <!-- Top-left corner -->
+  <line x1="5.5" y1="2" x2="5.5" y2="6.5" />
+  <line x1="5.5" y1="6.5" x2="1" y2="6.5" />
+  <!-- Top-right corner -->
+  <line x1="14.5" y1="2" x2="14.5" y2="6.5" />
+  <line x1="14.5" y1="6.5" x2="19" y2="6.5" />
+  <!-- Bottom-left corner -->
+  <line x1="5.5" y1="17" x2="5.5" y2="12.5" />
+  <line x1="5.5" y1="12.5" x2="1" y2="12.5" />
+  <!-- Bottom-right corner -->
+  <line x1="14.5" y1="17" x2="14.5" y2="12.5" />
+  <line x1="14.5" y1="12.5" x2="19" y2="12.5" />
+</svg>
+`;

src/app/views/home/home.component.html

@@ -1,42 +1,85 @@
-<div class="demo-container">
-  <div class="tab-container ">
-    <div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
-    </div>
-    <div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive"  >
-      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
+<div class="demo-container" #fullscreenElement>
+  <div class="tabs-info-wrapper-element">
+    <div class="tab-container" [class.hidden]="isFullscreen">
+      <div
+        class="tab-item-container"
+        *ngFor="let tab of tabs"
+        [routerLink]="tab.key"
+        routerLinkActive
+        #rla="routerLinkActive"
+      >
+        <ng-container
+          [ngTemplateOutlet]="tabItemTemplate"
+          [ngTemplateOutletContext]="{
+            enabled: rla.isActive,
+            tabName: tab.key
+          }"
+        ></ng-container>
+      </div>
     </div>
+
+
+    <ng-container *ngFor="let tab of tabs">
+      <ng-container
+        *ngIf="router.url.includes(tab.key)"
+        [ngTemplateOutlet]="tabItemInfoTemplate"
+        [ngTemplateOutletContext]="{ tabName: tab.key }"
+      ></ng-container>
+    </ng-container>
+
   </div>
+
   <div class="router-container">
     <router-outlet></router-outlet>
   </div>
 </div>
 
-<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
-  <div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
-    <div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
-      {{ tabInfo.get(tabName)?.title }}
-      <igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
+<ng-template #tabItemInfoTemplate let-tabName="tabName">
+  <div #tabItemInfo class="current-tab-info">
+    <div class="sample-info">
+      <div class="tab-header">{{ tabInfo.get(tabName)?.title }}</div>
+      <div class="tab-description">{{ tabInfo.get(tabName)?.content }}</div>
     </div>
-    <div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
-      <span>{{ tabInfo.get(tabName)?.content }}</span>
-    </div>
-    <div class="tab-actions">
-      <a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
-      <button igxRipple [igxIconButton]="'contained'" [ngClass]="{'button--disabled': !enabled}" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
+
+    <div class="sample-actions">
+      <div class="theme-info">Theme: {{ tabInfo.get(tabName)?.theme }}</div>
+      <div class="theme-info">Mode: {{ tabInfo.get(tabName)?.themeMode }}</div>
+      <div class="action-buttons">
+        <button
+          igxButton="outlined"
+          class="custom-button"
+          (click)="onDownloadClick($event, tabName)"
+        >
+          <igx-icon family="custom" name="file_download"></igx-icon>
+          Download
+        </button>
+
+        <button
+          igxButton="outlined"
+          class="custom-button"
+          (click)="onViewMoreClick($event, tabName)"
+        >
+          <igx-icon family="custom" name="view_more"></igx-icon>
+          View More
+        </button>
+
+        <button
+          igxButton="outlined"
+          class="custom-button"
+          (click)="onToggleFullscreen()"
+        >
+          <igx-icon family="custom" [name]="isFullscreen ? 'exit_fullscreen' : 'fullscreen'"></igx-icon>
+          <span>{{ isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }}</span>
+        </button>
+      </div>
     </div>
   </div>
 </ng-template>
 
-<div #tooltipRef="tooltip" igxTooltip>
-  Download sample.
-</div>
+<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
+  <div #tabItem class="tab-item" [ngClass]="{ 'tab-item--selected': enabled }">
+    <div class="tab-header" [ngClass]="{ 'tab-header--disabled': !enabled }">
+      {{ tabInfo.get(tabName)?.title?.toUpperCase() }}
+    </div>
+  </div>
+</ng-template>

src/app/views/home/home.component.scss

@@ -26,6 +26,7 @@ $custom-icon-button-theme: icon-button-theme(
 }
 
 .router-container {
+  height: 100%;
   width: 100%;
   overflow: hidden;
   display: flex;
@@ -35,7 +36,6 @@ $custom-icon-button-theme: icon-button-theme(
 
 .tab-container {
   width: 100%;
-  min-height: 132px;
   flex-shrink: 0;
   padding: 16px;
   display: flex;
@@ -45,11 +45,13 @@ $custom-icon-button-theme: icon-button-theme(
 }
 
 .tab-item-container {
+  width: 100%;
   height: 100%;
   display: inline-flex;
 }
 
 .tab-item {
+  align-items: center;
   height: 100%;
   display: flex;
   flex-grow: 1;
@@ -60,7 +62,6 @@ $custom-icon-button-theme: icon-button-theme(
   padding: 12px;
   cursor: pointer;
   user-select: none;
-  border-bottom: 1px solid var(--ig-gray-300);
 
   &--selected {
     border-bottom: 3px solid var(--ig-primary-500);
@@ -161,3 +162,87 @@ $custom-icon-button-theme: icon-button-theme(
   font-family: "aktiv-grotesk", sans-serif;
   line-height: 20px;
 }
+
+.current-tab-info {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+
+  width: 100%;
+  height: 90px;
+  padding: 20px 24px;
+  border: 1px solid #D6D6D6;
+
+
+  .sample-info {
+    height: 58px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+  }
+
+  .tab-description {
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 100%;
+    letter-spacing: 0%;
+  }
+
+  .sample-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    line-height: 100%;
+    font-size: 14px;
+
+    .theme-info {
+      font-weight: 600;
+      letter-spacing: 0.15px;
+      height: 40px;
+      padding-right: 16px;
+      border-right: 1px solid #D6D6D6;
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+
+      .custom-button {
+        color: black !important;
+        border-color: #D6D6D6;
+        text-transform: unset;
+
+        igx-icon {
+          color: black;
+        }
+      }
+    }
+
+
+  }
+
+  .sample-actions > div {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+}
+
+:fullscreen {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  display: block;
+}
+
+:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background: white;
+}
+
+.hidden {
+  display: none !important;
+}