ui make-up

open-template-hub · Sep 1, 2021 · 0be0a16 · 0be0a16
1 parent 09f4b75
commit 0be0a16
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 73 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
@@ -1,11 +1,11 @@
 <div class="dropdown">
-  <div *ngIf="menuType === 'top'" #toggleButton class="ng-content-area">
+  <div #toggleButton class="ng-content-area">
     <ng-content (click)="toggleDropdown()"></ng-content>
   </div>
 
-  <div *ngIf="isDropdownOpen" #dropdownContent class="dropdown-content" [class.bottom]="menuType === 'bottom'">
-    <i *ngIf="menuType === 'top'" aria-hidden="true" class="fas fa-caret-up fa-lg fa-fw"></i>
-    <i *ngIf="menuType === 'bottom'" (click)="toggleDropdown()" aria-hidden="true" class="fas fa-times fa-lg fa-fw"></i>
+  <div *ngIf="isDropdownOpen" #dropdownContent class="dropdown-content">
+    <i aria-hidden="true" class="dropdown-caret fas fa-caret-up fa-lg fa-fw"></i>
+    <i aria-hidden="true" class="dropdown-cross fas fa-times fa-lg fa-fw" (click)="toggleDropdown()"></i>
 
     <div class="section-column" *ngFor="let column of options">
       <div *ngIf="column.sectionTitle" class="section-header">

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -3,23 +3,10 @@
 }
 
 .dropdown-content {
-  display: flex;
-  position: absolute;
   background-color: var(--card);
   min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  padding: 12px 0 0;
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   z-index: 10;
-  top: 61px;
-}
-
-.dropdown-content.bottom {
-  display: block;
-  position: fixed;
-  bottom: 55px;
-  top: initial;
-  overflow-y: scroll;
-  height: 70%;
 }
 
 .dropdown-content i {
@@ -37,10 +24,6 @@
   cursor: pointer;
 }
 
-.dropdown-content.bottom .dropdown-item {
-  width: initial;
-}
-
 .dropdown-item-logo {
   margin-right: 20px;
 }
@@ -78,15 +61,65 @@
   height: 32px;
 }
 
-.dropdown-content.bottom .section-column {
-  margin-top: 35px;
+@media only screen and (max-width: 999px) {
+  .dropdown-content {
+    display: block;
+    position: fixed;
+    bottom: 55px;
+    overflow-y: scroll;
+    height: 70%;
+
+    right: 0;
+    width: 100%;
+
+    box-shadow: 0 0 4px 4px var(--shadow);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    z-index: 11;
+
+    background-color: var(--background-color-alpha);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+    animation: bottom-slide 0.5s;
+  }
+
+  .dropdown-content .dropdown-item {
+    width: initial;
+  }
+
+
+  .dropdown-content .section-column {
+    margin-top: 35px;
+  }
+
+  .dropdown-content i {
+    top: initial;
+    left: initial;
+    right: 3px;
+    padding: 10px;
+    cursor: pointer;
+    position: fixed;
+  }
+
+  .dropdown-caret {
+    display: none;
+  }
 }
 
-.dropdown-content.bottom i {
-  top: initial;
-  left: initial;
-  right: 3px;
-  padding: 10px;
-  cursor: pointer;
-  position: fixed;
+@media only screen and (min-width: 1000px) {
+  .dropdown-content {
+    display: flex;
+    position: absolute;
+    padding: 12px 0 0;
+    top: 60px;
+    border-top: 1px;
+    border-top-color: var(--brand-color-lighter-5);
+    border-top-style: dashed;
+  }
+
+  .dropdown-cross {
+    display: none;
+  }
 }
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,5 +1,4 @@
-import { Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { ThemeService } from '../../../service/theme/theme.service';
 
 export interface DropdownColumnOption {
@@ -23,54 +22,33 @@ export interface DropdownMenuOption {
   templateUrl: './dropdown-menu.component.html',
   styleUrls: [ './dropdown-menu.component.scss' ]
 } )
-export class DropdownMenuComponent implements OnInit {
+export class DropdownMenuComponent {
   brand = {
     brandLogo: '',
   };
 
   isComingFromToggleEvent = false;
 
   @Input() isDropdownOpen = false;
-  @Input() toggleEvent: Observable<void>;
 
   @Input() options: DropdownColumnOption[] = [];
 
-  @Input() menuType: 'top' | 'bottom' = 'top';
   @Input() isActive = false;
 
   @ViewChild( 'toggleButton' ) toggleButton: ElementRef;
   @ViewChild( 'dropdownContent' ) dropdownContent: ElementRef;
 
   constructor(
-      private themeService: ThemeService,
-      private renderer: Renderer2
+      private themeService: ThemeService
   ) {
     this.brand = this.themeService.brand;
-
-    this.renderer.listen( 'window', 'click', ( e: Event ) => {
-      if ( this.menuType === 'top' ) {
-        if ( this.toggleButton.nativeElement.contains( e.target ) ) {
-          this.toggleDropdown();
-        } else if ( !this.dropdownContent?.nativeElement.contains( e.target ) ) {
-          this.isDropdownOpen = false;
-        }
-      } else if ( !this.isComingFromToggleEvent && !this.dropdownContent?.nativeElement.contains( e.target ) ) {
-        this.isDropdownOpen = false;
-      }
-
-      this.isComingFromToggleEvent = false;
-    } );
-  }
-
-  ngOnInit() {
-    this.toggleEvent?.subscribe( () => {
-      this.isComingFromToggleEvent = true;
-      this.toggleDropdown();
-    } );
   }
 
   toggleDropdown() {
     this.isDropdownOpen = !this.isDropdownOpen;
-    console.log( this.isDropdownOpen );
+  }
+
+  closeDropdown() {
+    this.isDropdownOpen = false;
   }
 }
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 [toggleEvent]="productToggleEvent.asObservable()" [menuType]="'bottom'" [options]="PRODUCT_LINES">
+<app-dropdown-menu #dropdownMenuProducts [options]="PRODUCT_LINES">
 </app-dropdown-menu>
-<app-dropdown-menu [toggleEvent]="serviceToggleEvent.asObservable()" [menuType]="'bottom'" [options]="SERVICES">
+<app-dropdown-menu #dropdownMenuServices [options]="SERVICES">
 </app-dropdown-menu>
 <nav class="bottom-nav">
   <a (click)="closeSettings()" *ngIf="openSettings" href="javascript:void(0)">
@@ -9,13 +9,13 @@
         Back
     </span>
   </a>
-  <a *ngIf="!openSettings" (click)="productToggleEvent.next()">
+  <a *ngIf="!openSettings" (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
     <i aria-hidden="true" [class]="'fas fa-server fa-fw'"></i>
     <span>
         Products
     </span>
   </a>
-  <a *ngIf="!openSettings" (click)="serviceToggleEvent.next()">
+  <a *ngIf="!openSettings" (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
     <i aria-hidden="true" [class]="'fas fa-handshake fa-fw'"></i>
     <span>
         Services

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,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { AuthToken } from '../../../../model/AuthToken';
@@ -21,14 +21,14 @@ export class BottomNavComponent {
   openSettings = false;
   openOtherSettings = false;
 
-  productToggleEvent: Subject<void> = new Subject<void>();
-  serviceToggleEvent: Subject<void> = new Subject<void>();
-
   URLS = URLS;
 
   PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
   SERVICES: DropdownColumnOption[] = SERVICES;
 
+  @ViewChild( 'dropdownMenuProducts' ) dropdownMenuProducts: ElementRef;
+  @ViewChild( 'dropdownMenuServices' ) dropdownMenuServices: ElementRef;
+
   constructor(
       private router: Router,
       private authenticationService: AuthenticationService,

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
@@ -4,14 +4,14 @@
     <h2>Open Template Hub</h2>
   </a>
   <div class="left-item-wrapper">
-    <a>
-      <app-dropdown-menu [options]="PRODUCT_LINES">
+    <a (click)="dropdownMenuProducts.toggleDropdown(); dropdownMenuServices.closeDropdown()">
+      <app-dropdown-menu #dropdownMenuProducts [options]="PRODUCT_LINES">
         <span>Products</span>
         <i aria-hidden="true" class="material-icons">expand_more</i>
       </app-dropdown-menu>
     </a>
-    <a>
-      <app-dropdown-menu [options]="SERVICES">
+    <a (click)="dropdownMenuServices.toggleDropdown(); dropdownMenuProducts.closeDropdown()">
+      <app-dropdown-menu #dropdownMenuServices [options]="SERVICES">
         <span>Services</span>
         <i aria-hidden="true" class="material-icons">expand_more</i>
       </app-dropdown-menu>

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,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { LoadingService } from '../../../../service/loading/loading.service';
 import { ThemeService } from '../../../../service/theme/theme.service';
@@ -20,6 +20,9 @@ export class LandingLayoutTopNavComponent {
   PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
   SERVICES: DropdownColumnOption[] = SERVICES;
 
+  @ViewChild( 'dropdownMenuProducts' ) dropdownMenuProducts: ElementRef;
+  @ViewChild( 'dropdownMenuServices' ) dropdownMenuServices: ElementRef;
+
   constructor(
       private router: Router,
       private themeService: ThemeService,

diff --git a/src/styles/other/animation.scss b/src/styles/other/animation.scss
@@ -81,3 +81,18 @@
     transform: scale(1, 1) translateY(0);
   }
 }
+
+
+@keyframes bottom-slide {
+  0% {
+    bottom: -100%;
+    transition-property: bottom;
+    transition-duration: 0.7s;
+    transition-timing-function: ease;
+  }
+
+  100% {
+    bottom: 55px;
+    transition-property: bottom;
+  }
+}