Skip to content

Commit

Permalink
chore: temporary change nav (#252)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladimirpotekhin authored Oct 8, 2024
1 parent a612e3e commit 51c53b0
Show file tree
Hide file tree
Showing 31 changed files with 197 additions and 172 deletions.
67 changes: 29 additions & 38 deletions apps/taiga-lumbermill/src/components/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,63 +4,54 @@ export const appRoutes: Route[] = [
{
path: 'dashboards',
loadComponent: async () =>
import('../../dashboards/dashboards/dashboards.component').then(
(mod) => mod.DashboardsComponent,
),
children: [
{
path: '',
loadComponent: async () =>
import(
'../../components/dashboards-list/dashboards-list.component'
).then((mod) => mod.DashboardsListComponent),
data: {title: ''},
},
{
path: 'iot',
loadComponent: async () =>
import('../../dashboards/iot/iot.component').then(
(mod) => mod.IotComponent,
),
data: {title: 'Iot'},
},
{
path: 'crypto',
loadComponent: async () =>
import('../../dashboards/crypto/crypto.component').then(
(mod) => mod.CryptoComponent,
),
data: {title: 'Crypto'},
},
],
import('../list/list.component').then((mod) => mod.ListComponent),
},
{
path: 'theme',
path: 'dashboards/iot',
loadComponent: async () =>
import('../../features/theme-generator/theme-generator.component').then(
(mod) => mod.ThemeGeneratorComponent,
),
import('../../dashboards/iot/iot.component').then((mod) => mod.IotComponent),
data: {title: 'Iot'},
},
{
path: '',
path: 'dashboards/crypto',
loadComponent: async () =>
import('../../components/common-page/common-page.component').then(
(mod) => mod.CommonPageComponent,
import('../../dashboards/crypto/crypto.component').then(
(mod) => mod.CryptoComponent,
),
data: {title: 'Crypto'},
},
{
path: 'pages',
loadComponent: async () =>
import('../list/list.component').then((mod) => mod.ListComponent),
},
{
path: 'login',
path: 'pages/login',
loadComponent: async () =>
import('../../features/login/login.component').then(
(mod) => mod.LoginComponent,
),
},
{
path: 'sign-up',
path: 'pages/sign-up',
loadComponent: async () =>
import('../../features/sign-up/sign-up.component').then(
(mod) => mod.SignUpComponent,
),
},
{
path: 'color-generator',
loadComponent: async () =>
import('../../features/theme-generator/theme-generator.component').then(
(mod) => mod.ThemeGeneratorComponent,
),
},
{
path: '',
loadComponent: async () =>
import('../../components/common-page/common-page.component').then(
(mod) => mod.CommonPageComponent,
),
},
{path: '**', redirectTo: 'dashboards'},
];
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ <h2 tuiTitle>
</div>
</button>

<div
<button
routerLink="/pages"
tuiCardLarge
tuiSurface="elevated"
type="button"
>
<tui-avatar
appearance="opposite"
Expand All @@ -58,10 +60,10 @@ <h2 tuiTitle>
Pages
<div tuiSubtitle>Some common pages such as login, registration</div>
</div>
</div>
</button>

<button
routerLink="/theme"
routerLink="/color-generator"
tuiCardLarge
tuiSurface="elevated"
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,14 @@
align-items: baseline;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 5rem;
margin-top: 3rem;
gap: 1rem;

[tuiCardLarge] {
inline-size: 25rem;
inline-size: 100%;

:host-context([data-platform='web']) & {
inline-size: 25rem;
}
}
}

This file was deleted.

This file was deleted.

28 changes: 28 additions & 0 deletions apps/taiga-lumbermill/src/components/list/list.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<nav
tuiNavigationNav
[style.position]="'sticky'"
>
<a routerLink="/">
<tui-icon icon="@tui.chevron-left" />
Back
</a>
/
<span tuiNavigationLogo>
<span tuiFade>{{ type() }}</span>
</span>
<hr />
</nav>

@for (card of list(); track $index) {
<a
tuiCardLarge
tuiHeader
tuiSurface="elevated"
[routerLink]="card.link"
>
<h2 tuiTitle>
{{ card.title }}
<span tuiSubtitle>{{ card.description }}</span>
</h2>
</a>
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
:host {
display: flex;
padding-top: 1rem;
flex-direction: column;
gap: 1rem;
}
72 changes: 72 additions & 0 deletions apps/taiga-lumbermill/src/components/list/list.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {NavigationEnd, Router, RouterLink, RouterOutlet} from '@angular/router';
import {TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
import {TuiCardLarge, TuiHeader, TuiLogoComponent, TuiNavigation} from '@taiga-ui/layout';
import {filter, map, startWith} from 'rxjs';

interface CardData {
readonly title: string;
readonly link: string;
readonly description: string;
}

const LIST: {Dashboards: CardData[]; Pages: CardData[]} = {
Dashboards: [
{
title: 'Iot Dashboard',
link: '/dashboards/iot',
description: 'Smart home dashboard',
},
{
title: 'Crypto Dashboard',
link: '/dashboards/crypto',
description: 'Crypto token dashboard',
},
],
Pages: [
{
title: 'Login',
link: '/pages/login',
description: 'Ready to use login page',
},
{
title: 'Sign up',
link: '/pages/login',
description: 'Ready to use registration page',
},
],
};

@Component({
standalone: true,
selector: 'lmb-dashboards-list',
imports: [
CommonModule,
RouterLink,
RouterOutlet,
TuiCardLarge,
TuiHeader,
TuiIcon,
TuiLogoComponent,
TuiNavigation,
TuiSurface,
TuiTitle,
],
templateUrl: './list.component.html',
styleUrl: './list.component.less',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ListComponent {
protected readonly router = inject(Router);
protected readonly type = toSignal(
this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
startWith(null),
map(() => (this.router.url.includes('dashboards') ? 'Dashboards' : 'Pages')),
),
);

protected readonly list = computed(() => LIST[this.type() ?? 'Pages']);
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
>
<button
iconStart="@tui.palette"
routerLink="/theme"
routerLink="/color-generator"
tuiOption
type="button"
>
Expand All @@ -39,15 +39,15 @@
</button>
<button
iconStart="@tui.log-in"
routerLink="/theme"
routerLink="/color-generator"
tuiOption
type="button"
>
Log in
</button>
<button
iconStart="@tui.key-round"
routerLink="/theme"
routerLink="/color-generator"
tuiOption
type="button"
>
Expand All @@ -60,7 +60,7 @@
<img
alt="logo"
height="32px"
src="/logo-white-transparent.png"
src="./logo-white-transparent.png"
/>
Taiga Lumbermill
</span>
Expand Down Expand Up @@ -141,15 +141,15 @@
<ng-template>
<button
iconStart="@tui.log-in"
routerLink="/login"
routerLink="pages/login"
tuiAsideItem
type="button"
>
Log in
</button>
<button
iconStart="@tui.key-round"
routerLink="/sign-up"
routerLink="pages/sign-up"
tuiAsideItem
type="button"
>
Expand All @@ -161,7 +161,7 @@
<hr />
<button
iconStart="@tui.palette"
routerLink="/theme"
routerLink="/color-generator"
tuiAsideItem
type="button"
>
Expand Down
15 changes: 15 additions & 0 deletions apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,18 @@
<nav
tuiNavigationNav
[style.position]="'sticky'"
>
<a routerLink="/dashboards">
<tui-icon icon="@tui.chevron-left" />
Back
</a>
/
<span tuiNavigationLogo>
<span tuiFade>Crypto</span>
</span>
<hr />
</nav>

<div class="layout">
<div class="left">
<lmb-prices class="" />
Expand Down
Loading

0 comments on commit 51c53b0

Please sign in to comment.