From 7b195a089f4e4cb21faee4e357cbb6f4c07a19b4 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Mon, 26 Jul 2021 22:42:36 -0700 Subject: [PATCH 1/2] refactor: adding nav changes --- .../src/navigation/nav-item/nav-item.component.scss | 5 +++-- .../src/navigation/nav-item/nav-item.component.ts | 11 ++++++++++- .../src/navigation/navigation-list.component.ts | 6 +++++- .../src/navigation/navigation-list.module.ts | 4 +++- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/projects/components/src/navigation/nav-item/nav-item.component.scss b/projects/components/src/navigation/nav-item/nav-item.component.scss index 9eb12d8ff..ee9457564 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.scss +++ b/projects/components/src/navigation/nav-item/nav-item.component.scss @@ -1,8 +1,9 @@ -@import 'color-palette'; -@import 'font'; +@import 'mixins'; .nav-item { @include font-left-nav-label; + //@include box-shadow-2dp(); + @include raised-shadow-hover(); color: $gray-7; display: flex; height: 36px; diff --git a/projects/components/src/navigation/nav-item/nav-item.component.ts b/projects/components/src/navigation/nav-item/nav-item.component.ts index 4c3584b3d..2b4e57296 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.ts +++ b/projects/components/src/navigation/nav-item/nav-item.component.ts @@ -18,7 +18,7 @@ import { NavItemLinkConfig } from '../navigation-list.component'; @@ -30,6 +30,15 @@ import { NavItemLinkConfig } from '../navigation-list.component'; SOON + + diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index 3c0025d02..0acfeaf7d 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationService } from '@hypertrace/common'; +import { Color, NavigationService } from '@hypertrace/common'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { IconSize } from '../icon/icon-size'; @@ -103,11 +103,15 @@ export type NavItemConfig = NavItemLinkConfig | NavItemHeaderConfig | NavItemDiv export interface NavItemLinkConfig { type: NavItemType.Link; icon: string; + iconSize?: IconSize; label: string; matchPaths: string[]; // For now, default path is index 0 features?: string[]; replaceCurrentHistory?: boolean; isBeta?: boolean; + trailingIcon?: string; + trailingIconTooltip?: string; + trailingIconColor?: Color; } export type FooterItemConfig = FooterItemLinkConfig; diff --git a/projects/components/src/navigation/navigation-list.module.ts b/projects/components/src/navigation/navigation-list.module.ts index 076034459..77dc86185 100644 --- a/projects/components/src/navigation/navigation-list.module.ts +++ b/projects/components/src/navigation/navigation-list.module.ts @@ -10,6 +10,7 @@ import { LabelModule } from '../label/label.module'; import { LayoutChangeModule } from '../layout/layout-change.module'; import { LetAsyncModule } from '../let-async/let-async.module'; import { LinkModule } from '../link/link.module'; +import { TooltipModule } from './../tooltip/tooltip.module'; import { NavItemComponent } from './nav-item/nav-item.component'; import { NavigationListComponent } from './navigation-list.component'; @@ -26,7 +27,8 @@ import { NavigationListComponent } from './navigation-list.component'; LabelModule, BetaTagModule, MemoizeModule, - LinkModule + LinkModule, + TooltipModule ], declarations: [NavigationListComponent, NavItemComponent], exports: [NavigationListComponent] From 37f7c11f01c909cfb84e681237b83ccf6330f392 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Tue, 27 Jul 2021 14:40:14 -0700 Subject: [PATCH 2/2] fix: lint --- .../src/navigation/nav-item/nav-item.component.scss | 1 - .../src/navigation/nav-item/nav-item.component.ts | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/components/src/navigation/nav-item/nav-item.component.scss b/projects/components/src/navigation/nav-item/nav-item.component.scss index ee9457564..de4529059 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.scss +++ b/projects/components/src/navigation/nav-item/nav-item.component.scss @@ -2,7 +2,6 @@ .nav-item { @include font-left-nav-label; - //@include box-shadow-2dp(); @include raised-shadow-hover(); color: $gray-7; display: flex; diff --git a/projects/components/src/navigation/nav-item/nav-item.component.ts b/projects/components/src/navigation/nav-item/nav-item.component.ts index 2b4e57296..be954e3da 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.ts +++ b/projects/components/src/navigation/nav-item/nav-item.component.ts @@ -18,7 +18,7 @@ import { NavItemLinkConfig } from '../navigation-list.component'; @@ -34,8 +34,8 @@ import { NavItemLinkConfig } from '../navigation-list.component'; class="trailing-icon" *ngIf="this.config.trailingIcon" [icon]="this.config.trailingIcon" - size="{{(this.config.iconSize !== undefined ? this.config.iconSize: '${IconSize.Medium}')}}" - [ngStyle]="{'color': this.config.trailingIconColor}" + size="{{ this.config.iconSize !== undefined ? this.config.iconSize : '${IconSize.Medium}' }}" + [ngStyle]="{ color: this.config.trailingIconColor }" [htTooltip]="this.config.trailingIconTooltip" >