Skip to content

Navigation style redesign #1501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Mar 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
db43bd9
refactor: styling for nav 2.0
Feb 25, 2022
8447a9b
fix: styling backward compatibility for settings, self-serve, and pre…
Feb 28, 2022
b592132
refactor: added icon and label to nav list
Mar 1, 2022
f9f7ea6
refactor: collapse support for new footer
Mar 2, 2022
4d19a55
refactor: nav list projection for env selector
Mar 2, 2022
e853b98
refactor: settings, self-serve, preferences, style compatability
Mar 3, 2022
e759adf
Merge branch 'main' of github.com:hypertrace/hypertrace-ui into Navig…
Mar 9, 2022
994e955
fix: footer policy icon styling
Christian862 Mar 10, 2022
603331c
Merge branch 'main' of github.com:hypertrace/hypertrace-ui into Navig…
Christian862 Mar 10, 2022
0fb97a9
refactor: styling FF compatibility
Christian862 Mar 11, 2022
bd345ab
fix: conflict from TR changes
Christian862 Mar 21, 2022
b3c0699
refactor: requested change
Christian862 Mar 22, 2022
28d6fa2
refactor: padding for backward compatability
Christian862 Mar 24, 2022
17a3ef3
refactor: privacy policy link for backward compatability
Christian862 Mar 24, 2022
b1c5b65
test: added test for footer icon and label
Christian862 Mar 24, 2022
0bbe935
Merge branch 'main' of github.com:hypertrace/hypertrace-ui into Navig…
Christian862 Mar 24, 2022
adf33a7
fix: typo
Christian862 Mar 24, 2022
fb8d818
Merge branch 'main' of github.com:hypertrace/hypertrace-ui into Navig…
Christian862 Mar 24, 2022
64a24ba
refactor: requested changes
Christian862 Mar 25, 2022
a5b2c30
Merge branch 'main' of github.com:hypertrace/hypertrace-ui into Navig…
Christian862 Mar 25, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions projects/assets-library/assets/styles/_interaction.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,15 @@
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;

&.collapsed {
border-radius: 0;
}

.label-container {
flex-grow: 1;
margin-left: 14px;
Expand All @@ -27,40 +32,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 {
Expand All @@ -71,6 +73,36 @@
font-weight: 600;
padding: 2px 4px;
}

&:not(.navigation-dark) {
border-radius: 4px;
.icon {
color: $gray-4;
}
.label {
@include body-1-medium($gray-6);
}

&:hover {
background-color: $gray-1;
}

&.active {
background-color: $gray-2;

.label {
color: $gray-9;
}

.icon {
color: $gray-6;
}

&:hover {
background-color: $gray-1;
}
}
}
}

:hover {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
import { IconSize } from '../../icon/icon-size';
import { NavItemLinkConfig } from '../navigation.config';
import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';

@Component({
selector: 'ht-nav-item',
Expand All @@ -13,7 +13,7 @@ import { NavItemLinkConfig } from '../navigation.config';
<div
*htIfFeature="this.config.featureState$ | async as featureState"
class="nav-item"
[ngClass]="{ active: this.active }"
[ngClass]="[this.active ? 'active' : '', this.navItemViewStyle ?? '', this.collapsed ? 'collapsed' : '']"
>
<ht-icon
class="icon"
Expand Down Expand Up @@ -54,6 +54,9 @@ export class NavItemComponent {
@Input()
public collapsed: boolean = true;

@Input()
public readonly navItemViewStyle?: NavViewStyle;

public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
navType: NavigationParamsType.InApp,
path: item.matchPaths[0],
Expand Down
100 changes: 84 additions & 16 deletions projects/components/src/navigation/navigation-list.component.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'color-palette';
@import 'font';
@import 'mixins';

.navigation-list {
@include nav-secondary-background;
position: relative;
display: flex;
flex-direction: column;
Expand All @@ -12,7 +12,8 @@

.content {
overflow-y: auto;
padding: 18px 12px;
overflow-x: hidden;
padding: 18px 0 12px 12px;

.nav-header {
padding-top: 24px;
Expand All @@ -23,7 +24,7 @@
align-items: center;

.label {
@include overline($gray-9);
@include overline($blue-2);
}

.beta {
Expand All @@ -33,19 +34,17 @@
}

.resize-tab-button {
@include nav-secondary-background;
position: absolute;
display: flex;
align-items: center;
top: 22px;
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;

&:hover {
color: $gray-4;
Expand All @@ -58,31 +57,100 @@
}

.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;

.nav-group-icon {
height: 190px;
opacity: 0.15;
color: $blue-gray-4;
}

.nav-group-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);
}
}

.nav-divider {
position: absolute;
top: 0;
left: 24px;
margin: 0;
margin: 12px auto 8px 0;
height: 1px;
width: 16px;
background-color: $gray-2;
border: none;
background-color: $gray-4;
}
}

&:not(.expanded) {
.footer .footer-item .link {
margin-right: 0;
}

.footer .nav-divider {
margin: 8px auto;
}

.content {
padding: 18px 0 12px 0;
}
}

&:not(.navigation-dark) {
background: white;

.content {
padding: 18px 12px;
}
&:not(.expanded) {
.content {
padding: 18px 12px;
}
}

.content .nav-header .label {
@include overline($gray-9);
}

.footer {
margin-left: 6px;

.footer-item {
margin-left: 12px;
justify-content: unset;
}
.nav-divider {
position: absolute;
top: 0;
left: 24px;
margin: 0;
height: 1px;
width: 16px;
background-color: $gray-2;
border: none;
}
}

.resize-tab-button {
border: 1px solid $gray-2;
border-left-color: white;
color: $gray-7;
background: white;
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,4 +144,52 @@ describe('Navigation List Component', () => {
expect(spectator.queryAll('.nav-header')).toHaveLength(1);
expect(spectator.queryAll('.nav-header .label')[0]).toHaveText('header 1');
});

test('should render nav group label and icon if provided', () => {
const navItems: NavItemConfig[] = [
{
type: NavItemType.Header,
label: 'header 1',
isVisible$: of(true)
},
{
type: NavItemType.Link,
icon: 'icon',
label: 'label',
matchPaths: ['']
}
];
const footerItems: FooterItemConfig[] = [
{
url: 'http://test',
label: 'Footer item',
icon: 'icon'
}
];
const navGroup = {
label: 'TEST LABEL',
icon: IconType.StatusCode,
displayNavList: true,
navItems: navItems
};
spectator = createHost(
`<ht-navigation-list [navGroup]="navGroup" [navItems]="navItems" [footerItems]="footerItems"></ht-navigation-list>`,
{
hostProps: { navItems: navItems, navGroup: navGroup, footerItems: footerItems },
providers: [
mockProvider(ActivatedRoute, activatedRoute),
mockProvider(NavigationListComponentService, {
resolveFeaturesAndUpdateVisibilityForNavItems: jest.fn().mockReturnValue(navItems)
}),
mockProvider(NavigationService, {
navigation$: EMPTY,
navigateWithinApp: jest.fn(),
getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute))
})
]
}
);
expect(spectator.query('.nav-group-icon')).toExist();
expect(spectator.query('.nav-group-label')).toExist();
});
});
Loading