single mechanism for dropbox menu and product page

open-template-hub · Sep 5, 2021 · 712582b · 712582b
1 parent fb51ca4
commit 712582b
Show file tree

Hide file tree

Showing 11 changed files with 283 additions and 383 deletions.
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -11,30 +11,31 @@
     </div>
 
     <div class="section-column-wrapper" [style]="'min-width: ' + (330 * calculatedColumns) + 'px;'">
-      <div class="section-column" *ngFor="let column of options; last as isLastColumn"
+      <div class="section-column" *ngFor="let column of productLines; last as isLastColumn"
            [class.section-column-right-border]="true"
-           [class]="column.sectionColor ? column.sectionColor + '-theme' : ''"
+           [class]="column.color ? column.color + '-theme' : ''"
            [style]="'max-height: ' + ((80  + (150 * calculatedRows)) + 1) + 'px;'">
-        <div *ngIf="column.sectionTitle" class="section-header">
+        <div *ngIf="column.name" class="section-header">
           <h4>
-            {{ column.sectionTitle }}
+            {{ column.name }}
           </h4>
           <hr [style.border-color]="'var(--brand-color)'"/>
           <p>
-            {{ column.sectionDescription }}
+            {{ column.description }}
           </p>
         </div>
 
-        <a *ngFor="let option of column.menus; last as isLast; first as isFirst" class="dropdown-item"
-           [class]="option.itemColor ? option.itemColor + '-theme' : ''"
-           [routerLink]="option.link.url" [queryParams]="option.link.queryParam" (click)="closeDropDownInternal()">
+        <a *ngFor="let option of column.products; last as isLast; first as isFirst" class="dropdown-item"
+           [class]="option.color ? option.color + '-theme' : ''"
+           [routerLink]="URLS.product" [queryParams]="{productLineName: column.key, productName: option.key}"
+           (click)="closeDropDownInternal()">
 
-          <img [src]="option.brand.brandLogo" alt="logo" class="dropdown-item-logo" height="55"/>
+          <img [src]="option.logo" alt="logo" class="dropdown-item-logo" height="55"/>
 
           <div class="dropdown-item-content">
-          <h6>
-            {{ option.header }}
-          </h6>
+            <h6>
+              {{ option.name }}
+            </h6>
             <p>
               {{ option.description }}
             </p>

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -1,26 +1,8 @@
 import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
+import { ProductLine, URLS } from '../../../data/constant';
 import { ThemeService } from '../../../service/theme/theme.service';
 import { UtilService } from '../../../service/util/util.service';
 
-export interface DropdownColumnOption {
-  sectionTitle?: string,
-  sectionDescription?: string,
-  sectionColor?: string,
-  menus: DropdownMenuOption[]
-}
-
-export interface DropdownMenuOption {
-  itemColor?: string,
-  brand: { brandLogo: string },
-  header: string,
-  description: string,
-  link: {
-    url: string,
-    queryParam: any
-  },
-  hover?: boolean // this property only use on this class, do not set it from outside
-}
-
 @Component( {
   selector: 'app-dropdown-menu',
   templateUrl: './dropdown-menu.component.html',
@@ -31,14 +13,16 @@ export class DropdownMenuComponent {
     brandLogo: '',
   };
 
+  URLS = URLS;
+
   @Input() isDropdownOpen = false;
   @Input() minimumColumns = 1;
   @Input() minimumRows = 5;
 
   calculatedColumns;
   calculatedRows;
 
-  @Input() options: DropdownColumnOption[] = [];
+  @Input() productLines: ProductLine[] = [];
 
   closeDropdownInternalClicked = false;
 
@@ -57,7 +41,7 @@ export class DropdownMenuComponent {
   @HostListener( 'window:resize', [ '$event' ] )
   onResize() {
 
-    if ( this.isDropdownOpen && window.innerWidth > 999) {
+    if ( this.isDropdownOpen && window.innerWidth > 999 ) {
       let wantedColumns = this.minimumColumns;
 
       while ( wantedColumns * 330 > window.innerWidth - 255 ) {

diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.html b/src/app/component/nav/common/bottom-nav/bottom-nav.component.html
@@ -1,6 +1,6 @@
-<app-dropdown-menu #dropdownMenuProducts [options]="PRODUCT_LINES">
+<app-dropdown-menu #dropdownMenuProducts [productLines]="PRODUCT_LINES">
 </app-dropdown-menu>
-<app-dropdown-menu #dropdownMenuServices [options]="SERVICES">
+<app-dropdown-menu #dropdownMenuServices [productLines]="SERVICES">
 </app-dropdown-menu>
 <nav class="bottom-nav">
   <a (click)="closeSettings(); dropdownMenuProducts.closeDropdown(); dropdownMenuServices.closeDropdown()"

diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts b/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts
@@ -1,11 +1,10 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { PRODUCT_LINES, SERVICES, URLS } from '../../../../data/constant';
+import { PRODUCT_LINES, ProductLine, SERVICES, URLS } from '../../../../data/constant';
 import { AuthToken } from '../../../../model/AuthToken';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
 import { BasicInfoService } from '../../../../service/basic-info/basic-info.service';
 import { LoadingService } from '../../../../service/loading/loading.service';
-import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
   selector: 'app-bottom-nav',
@@ -22,8 +21,8 @@ export class BottomNavComponent {
 
   URLS = URLS;
 
-  PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
-  SERVICES: DropdownColumnOption[] = SERVICES;
+  PRODUCT_LINES: ProductLine[] = PRODUCT_LINES;
+  SERVICES: ProductLine[] = SERVICES;
 
   @ViewChild( 'dropdownMenuProducts' ) dropdownMenuProducts: ElementRef;
   @ViewChild( 'dropdownMenuServices' ) dropdownMenuServices: ElementRef;

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -6,15 +6,17 @@ <h2>Open Template Hub</h2>
   </a>
   <div class="left-item-wrapper">
     <a (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
-      <app-dropdown-menu #dropdownMenuProducts [options]="PRODUCT_LINES" [minimumColumns]="4">
+      <app-dropdown-menu #dropdownMenuProducts [productLines]="PRODUCT_LINES" [minimumColumns]="4">
         <span>Products</span>
-        <i aria-hidden="true" class="material-icons">{{dropdownMenuProducts.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
+        <i aria-hidden="true"
+           class="material-icons">{{dropdownMenuProducts.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
       </app-dropdown-menu>
     </a>
     <a (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
-      <app-dropdown-menu #dropdownMenuServices [options]="SERVICES">
+      <app-dropdown-menu #dropdownMenuServices [productLines]="SERVICES">
         <span>Services</span>
-        <i aria-hidden="true" class="material-icons">{{dropdownMenuServices.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
+        <i aria-hidden="true"
+           class="material-icons">{{dropdownMenuServices.isDropdownOpen ? 'expand_less' : 'expand_more'}}</i>
       </app-dropdown-menu>
     </a>
     <a routerLink="{{URLS.pricing}}"

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts
@@ -1,9 +1,8 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { PRODUCT_LINES, ProductLine, SERVICES, URLS } from '../../../../data/constant';
 import { LoadingService } from '../../../../service/loading/loading.service';
 import { ThemeService } from '../../../../service/theme/theme.service';
-import { PRODUCT_LINES, SERVICES, URLS } from '../../../../data/constant';
-import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
   selector: 'app-landing-layout-top-nav',
@@ -17,8 +16,8 @@ export class LandingLayoutTopNavComponent {
   };
   URLS = URLS;
 
-  PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
-  SERVICES: DropdownColumnOption[] = SERVICES;
+  PRODUCT_LINES: ProductLine[] = PRODUCT_LINES;
+  SERVICES: ProductLine[] = SERVICES;
 
   @ViewChild( 'dropdownMenuProducts' ) dropdownMenuProducts: ElementRef;
   @ViewChild( 'dropdownMenuServices' ) dropdownMenuServices: ElementRef;