From db43bd99d96fda3a79978e67c0c15a68b7b3c401 Mon Sep 17 00:00:00 2001 From: Christian Quinn Date: Fri, 25 Feb 2022 18:58:22 -0400 Subject: [PATCH 01/14] refactor: styling for nav 2.0 --- .../assets/styles/_interaction.scss | 15 ++++++++++ .../nav-item/nav-item.component.scss | 28 +++++++++---------- .../navigation/navigation-list.component.scss | 15 +++++----- 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/projects/assets-library/assets/styles/_interaction.scss b/projects/assets-library/assets/styles/_interaction.scss index e96018a25..db75ce1d9 100644 --- a/projects/assets-library/assets/styles/_interaction.scss +++ b/projects/assets-library/assets/styles/_interaction.scss @@ -99,3 +99,18 @@ cursor: not-allowed; } } + +@mixin nav-primary-background { + background: $blue-6; + opacity: 0.95; +} + +@mixin nav-primary-background-hover { + background: $blue-8; + opacity: 0.95; +} + +@mixin nav-secondary-background { + background: $blue-9; + opacity: 0.95; +} 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 de4529059..bf4e3f439 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.scss +++ b/projects/components/src/navigation/nav-item/nav-item.component.scss @@ -10,7 +10,8 @@ justify-content: flex-start; align-items: center; - border-radius: 4px; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; padding-left: 16px; padding-right: 16px; @@ -27,40 +28,37 @@ } .icon { - color: $gray-4; + color: $gray-1; } .label { flex: 1; - @include body-1-medium($gray-6); + @include body-1-medium($gray-2); } &.active { - background-color: $gray-2; + @include nav-primary-background; - .label { - color: $gray-9; + &:hover { + background-color: $blue-5; } - .icon { - color: $gray-6; + .label { + color: white; } - &:hover { - background-color: $gray-1; + .icon { + color: white; } } &:hover { - background-color: $gray-1; + @include nav-primary-background; } .soon-container { flex: 0; - display: flex; - flex-direction: row; - vertical-align: center; - align-items: center; + @include center-contents; } .soon { diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss index 6d3a7b9ac..9c8f63046 100644 --- a/projects/components/src/navigation/navigation-list.component.scss +++ b/projects/components/src/navigation/navigation-list.component.scss @@ -1,10 +1,10 @@ -@import 'color-palette'; -@import 'font'; +@import 'mixins'; .navigation-list { position: relative; display: flex; flex-direction: column; + @include nav-secondary-background; height: 100%; width: 100%; @@ -12,7 +12,8 @@ .content { overflow-y: auto; - padding: 18px 12px; + overflow-x: hidden; + padding: 18px 0 12px 12px; .nav-header { padding-top: 24px; @@ -23,7 +24,7 @@ align-items: center; .label { - @include overline($gray-9); + @include overline($blue-2); } .beta { @@ -40,12 +41,10 @@ right: -12px; height: 28px; width: 12px; - border: 1px solid $gray-2; - border-left-color: white; border-radius: 0 6px 6px 0; cursor: pointer; - color: $gray-7; - background: white; + color: white; + @include nav-secondary-background; &:hover { color: $gray-4; From 8447a9bc3d48a14cc01fd130bfa627d631455a00 Mon Sep 17 00:00:00 2001 From: Christian Quinn Date: Mon, 28 Feb 2022 12:07:06 -0400 Subject: [PATCH 02/14] fix: styling backward compatibility for settings, self-serve, and preferences --- .../navigation/navigation-list.component.scss | 55 ++++++++++++++++++- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss index 9c8f63046..444c27285 100644 --- a/projects/components/src/navigation/navigation-list.component.scss +++ b/projects/components/src/navigation/navigation-list.component.scss @@ -1,10 +1,10 @@ @import 'mixins'; .navigation-list { + @include nav-secondary-background; position: relative; display: flex; flex-direction: column; - @include nav-secondary-background; height: 100%; width: 100%; @@ -34,6 +34,7 @@ } .resize-tab-button { + @include nav-secondary-background; position: absolute; display: flex; align-items: center; @@ -44,7 +45,6 @@ border-radius: 0 6px 6px 0; cursor: pointer; color: white; - @include nav-secondary-background; &:hover { color: $gray-4; @@ -89,3 +89,54 @@ .expanded { width: 244px; } + +// Temporary fix to maintain backward compatibility with settings, self serve, and preferences navigation. +// Alternatively we could do this with ng-deep from parents +// OR have multiple files in styleUrls to contain this for now ? +:host(.settings-navigation, .preferences-navigation, .self-service-navigation) { + .navigation-list { + background: white; + + .content .nav-header .label { + @include overline($gray-9); + } + + .resize-tab-button { + border: 1px solid $gray-2; + border-left-color: white; + color: $gray-7; + background: white; + } + .content { + ::ng-deep { + .nav-item { + border-radius: 4px; + .icon { + color: $gray-4; + } + .label { + @include body-1-medium($gray-6); + } + + &:hover { + .icon { + color: white; + } + .label { + color: white; + } + } + + &.active { + .icon { + color: white; + } + .label { + color: white; + } + } + } + } + } + } +} From b592132399522bad0c6cf1b7626bd559cdb2dbc9 Mon Sep 17 00:00:00 2001 From: Christian Quinn Date: Tue, 1 Mar 2022 19:08:22 -0400 Subject: [PATCH 03/14] refactor: added icon and label to nav list --- .../navigation/navigation-list.component.scss | 20 +++++++++++++++++-- .../navigation/navigation-list.component.ts | 13 ++++++++++-- .../src/navigation/navigation.config.ts | 7 +++++++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss index 444c27285..ca9005a79 100644 --- a/projects/components/src/navigation/navigation-list.component.scss +++ b/projects/components/src/navigation/navigation-list.component.scss @@ -57,17 +57,33 @@ } .footer { + display: flex; + flex-direction: column; position: relative; - margin-left: 6px; color: $gray-5; padding: 8px 12px 18px; .footer-item { display: flex; align-items: center; - margin-left: 12px; + justify-content: center; + + .footer-icon { + height: 190px; + opacity: 0.15; + color: $blue-gray-4; + } + + .label { + margin: 10px auto 0 0; + padding-right: 20px; + font-size: 24px; + font-weight: bold; + color: $gray-4; + } .link { + margin-right: auto; @include link; @include footnote($gray-5); } diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index 925e6819c..f56d55191 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -6,7 +6,7 @@ import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { IconSize } from '../icon/icon-size'; import { NavigationListComponentService } from './navigation-list-component.service'; -import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from './navigation.config'; +import { FooterItemConfig, NavItemConfig, NavItemGroup, NavItemLinkConfig, NavItemType } from './navigation.config'; @Component({ selector: 'ht-navigation-list', @@ -40,7 +40,13 @@ import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from
-
+
+ +
+ +
+ +
@@ -53,6 +59,9 @@ import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from ` }) export class NavigationListComponent implements OnChanges { + @Input() + public navGroup?: NavItemGroup; + @Input() public navItems: NavItemConfig[] = []; diff --git a/projects/components/src/navigation/navigation.config.ts b/projects/components/src/navigation/navigation.config.ts index 18cbd7e0c..327a39fdf 100644 --- a/projects/components/src/navigation/navigation.config.ts +++ b/projects/components/src/navigation/navigation.config.ts @@ -45,3 +45,10 @@ export const enum NavItemType { Divider = 'divider', Footer = 'footer' } + +export interface NavItemGroup { + label: string; + icon: string; + navItems: NavItemConfig[]; + displayNavList: boolean; +} From f9f7ea6f1bf0325e2b1fcaf9e83186c886a3575e Mon Sep 17 00:00:00 2001 From: Christian Quinn Date: Wed, 2 Mar 2022 11:08:31 -0400 Subject: [PATCH 04/14] refactor: collapse support for new footer --- .../components/src/navigation/navigation-list.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index f56d55191..fafd586af 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -40,11 +40,11 @@ import { FooterItemConfig, NavItemConfig, NavItemGroup, NavItemLinkConfig, NavIt
-
+
-
+
From 4d19a55afcef136d2a8d9d289ef4a3535e9016f4 Mon Sep 17 00:00:00 2001 From: Christian Quinn Date: Wed, 2 Mar 2022 14:34:39 -0400 Subject: [PATCH 05/14] refactor: nav list projection for env selector --- projects/components/src/navigation/navigation-list.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index fafd586af..3f1be41da 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -15,6 +15,7 @@ import { FooterItemConfig, NavItemConfig, NavItemGroup, NavItemLinkConfig, NavIt template: `