Skip to content

Commit

Permalink
feat(portal): refactor marketplace for new portal (#2539)
Browse files Browse the repository at this point in the history
* feat(portal): refactor marketplace for new portal

* fix background position

* chore: refactor sidebar

* chore: small fix

---------

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
waterplea and elvece authored Dec 18, 2023
1 parent ea6f70e commit e47f126
Showing 32 changed files with 1,201 additions and 155 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header
class="z-50 overflow-hidden w-full fixed sm:w-[34vw] md:w-[28vw] lg:w-[22vw] 2xl:w-[280px] sm:bg-zinc-700/90 sm:backdrop-blur-2xl sm:min-h-screen overflow-y-auto flex flex-col sm:py-6 sm:after:block sm:after:absolute sm:after:top-0 sm:after:bottom-0 sm:after:right-0 sm:after:w-0.5 after:h-[calc(100vh - 20px)] sm:after:bg-gradient-to-b from-zinc-700 to-zinc-400"
class="header overflow-hidden w-full fixed sm:w-[34vw] md:w-[28vw] lg:w-[22vw] 2xl:w-[280px] sm:bg-zinc-700/90 sm:backdrop-blur-2xl sm:min-h-screen overflow-y-auto flex flex-col sm:py-6 sm:after:block sm:after:absolute sm:after:top-0 sm:after:bottom-0 sm:after:right-0 sm:after:w-0.5 after:h-[calc(100vh - 20px)] sm:after:bg-gradient-to-b from-zinc-700 to-zinc-400"
>
<ng-container *tuiLet="store$ | async as store">
<div class="hidden sm:flex flex-col mx-6 pb-3 items-center">
13 changes: 13 additions & 0 deletions web/projects/marketplace/src/components/menu/menu.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

.header {
@include scrollbar-hidden();

max-height: 100%;
// TODO: Theme
background: #373a3f;

@media screen and (min-width: 640px) {
width: 15rem;
}
}
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@ import { combineLatest, map, Subject, takeUntil } from 'rxjs'
import { StoreIdentity } from '../../types'
import { AbstractMarketplaceService } from '../../services/marketplace.service'
import { AbstractCategoryService } from '../../services/category.service'
import { Router } from '@angular/router'
import { MarketplaceConfig } from '@start9labs/shared'

@Component({
@@ -22,8 +21,6 @@ export class MenuComponent implements OnDestroy {
@Input({ required: true })
iconConfig!: MarketplaceConfig

constructor(private readonly router: Router) {}

private destroy$ = new Subject<void>()
private readonly marketplaceService = inject(AbstractMarketplaceService)
private readonly categoryService = inject(AbstractCategoryService)
@@ -69,13 +66,11 @@ export class MenuComponent implements OnDestroy {
this.query = ''
this.categoryService.resetQuery()
this.categoryService.changeCategory(category)
this.router.navigate(['/marketplace'], { replaceUrl: true })
}

onQueryChange(query: string): void {
this.query = query
this.categoryService.setQuery(query)
this.router.navigate(['/marketplace'], { replaceUrl: true })
}

toggleMenu(open: boolean): void {
106 changes: 34 additions & 72 deletions web/projects/shared/styles/taiga.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

:root {
--tui-primary: #3880ff;
--tui-primary-hover: #4c8dff;
--tui-primary-active: #3171e0;
}

/* stylelint-disable order/order */
[tuiAppearance][data-appearance='secondary-warning'] {
background: var(--tui-warning-bg);
color: var(--tui-warning-fill);

@include wrapper-hover {
@include appearance-hover {
background: var(--tui-warning-bg-hover);
}

@include wrapper-active {
@include appearance-active {
background: var(--tui-warning-bg-hover);
}
}
@@ -30,142 +36,96 @@
[tuiAppearance][data-appearance='outline'] {
color: var(--tui-text-01);
}
[tuiWrapper][data-appearance='primary-solid'] {
background: #3880ff;
color: #fff;

.wrapper-hover {
background: #4c8dff;
}

;

.wrapper-active {
background: #3171e0;
}

;

.wrapper-disabled {
[tuiAppearance][data-appearance='primary'] {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='secondary-solid'] {
[tuiAppearance][data-appearance='secondary-solid'] {
background: #3dc2ff;
color: #fff;

.wrapper-hover {
@include appearance-hover {
background: #50c8ff;
}

;

.wrapper-active {
@include appearance-active {
background: #36abe0;
}

;

.wrapper-disabled {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='tertiary-solid'] {
[tuiAppearance][data-appearance='tertiary-solid'] {
background: #5260ff;
color: #fff;

.wrapper-hover {
@include appearance-hover {
background: #6370ff;
}

;

.wrapper-active {
@include appearance-active {
background: #4854e0;
}

;

.wrapper-disabled {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='success-solid'] {
[tuiAppearance][data-appearance='success-solid'] {
background: #2dd36f;
color: #fff;

.wrapper-hover {
@include appearance-hover {
background: #42d77d;
}

;

.wrapper-active {
@include appearance-active {
background: #28ba62;
}

;

.wrapper-disabled {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='warning-solid'] {
[tuiAppearance][data-appearance='warning-solid'] {
background: #ffc409;
color: #fff;

.wrapper-hover {
@include appearance-hover {
background: #ffca22;
}

;

.wrapper-active {
@include appearance-active {
background: #e0ac08;
}

;

.wrapper-disabled {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='danger-solid'] {
[tuiAppearance][data-appearance='danger-solid'] {
background: #eb445a;
color: #fff;

.wrapper-hover {
@include appearance-hover {
background: #ed576b;
}

;

.wrapper-active {
@include appearance-active {
background: #cf3c4f;
}

;

.wrapper-disabled {
@include appearance-disabled {
background: #eaecee;
}

;
}

[tuiWrapper][data-appearance='input-file'] {
@@ -196,7 +156,7 @@ tui-hint[data-appearance='onDark'] {
}
}

[tuiWrapper][data-appearance='drawer'] {
[tuiAppearance][data-appearance='drawer'] {
// TODO: Theme
background: rgb(81 80 83 / 86%);
border-radius: 10rem;
@@ -215,7 +175,9 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
tui-opt-group {
&::before {
background: var(--tui-clear);
box-shadow: 1rem 0 var(--tui-clear), -1rem 0 var(--tui-clear);
box-shadow:
1rem 0 var(--tui-clear),
-1rem 0 var(--tui-clear);
padding-top: 0.375rem !important;
padding-bottom: 0 !important;
}
Original file line number Diff line number Diff line change
@@ -3,11 +3,11 @@
<tui-badge-notification *ngIf="badge" size="m" tuiSlot="top">
{{ badge }}
</tui-badge-notification>
<tui-svg
<tui-icon
*ngIf="icon?.startsWith('tuiIcon'); else url"
class="icon"
[src]="icon"
></tui-svg>
[icon]="icon"
/>
<ng-template #url>
<img alt="" class="icon" [src]="icon" />
</ng-template>
Original file line number Diff line number Diff line change
@@ -10,14 +10,11 @@ import {
TuiBadgedContentModule,
TuiBadgeNotificationModule,
TuiButtonModule,
TuiIconModule,
} from '@taiga-ui/experimental'
import { RouterLink } from '@angular/router'
import { TickerModule } from '@start9labs/shared'
import {
TuiDataListModule,
TuiHostedDropdownModule,
TuiSvgModule,
} from '@taiga-ui/core'
import { TuiDataListModule, TuiHostedDropdownModule } from '@taiga-ui/core'
import { NavigationService } from '../../services/navigation.service'
import { Action, ActionsComponent } from '../actions/actions.component'
import { toRouterLink } from '../../utils/to-router-link'
@@ -34,7 +31,7 @@ import { toRouterLink } from '../../utils/to-router-link'
TuiButtonModule,
TuiHostedDropdownModule,
TuiDataListModule,
TuiSvgModule,
TuiIconModule,
TickerModule,
TuiBadgedContentModule,
TuiBadgeNotificationModule,
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
routerLinkActive="tab_active"
[routerLinkActiveOptions]="{ exact: true }"
>
<tui-svg src="tuiIconHomeLarge" class="icon"></tui-svg>
<tui-icon icon="tuiIconHome" class="icon" />
</a>
<a
*ngFor="let tab of tabs$ | async"
@@ -13,11 +13,11 @@
routerLinkActive="tab_active"
[routerLink]="tab.routerLink"
>
<tui-svg
<tui-icon
*ngIf="tab.icon.startsWith('tuiIcon'); else url"
class="icon"
[src]="tab.icon"
></tui-svg>
[icon]="tab.icon"
/>
<ng-template #url>
<img class="icon" [src]="tab.icon" [alt]="tab.title" />
</ng-template>
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { Router, RouterModule } from '@angular/router'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiButtonModule } from '@taiga-ui/experimental'
import { TuiButtonModule, TuiIconModule } from '@taiga-ui/experimental'
import { NavigationService } from '../../services/navigation.service'
import { NavigationItem } from '../../types/navigation-item'

@Component({
selector: 'nav[appNavigation]',
templateUrl: 'navigation.component.html',
styleUrls: ['navigation.component.scss'],
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, RouterModule, TuiButtonModule, TuiSvgModule],
imports: [CommonModule, RouterModule, TuiButtonModule, TuiIconModule],
})
export class NavigationComponent {
private readonly router = inject(Router)
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
export const SYSTEM_UTILITIES: Record<string, { icon: string; title: string }> =
{
'/portal/system/backups': {
icon: 'tuiIconSaveLarge',
icon: 'tuiIconSave',
title: 'Backups',
},
'/portal/system/marketplace': {
icon: 'tuiIconShoppingCart',
title: 'Marketplace',
},
'/portal/system/updates': {
icon: 'tuiIconGlobeLarge',
icon: 'tuiIconGlobe',
title: 'Updates',
},
'/portal/system/sideload': {
icon: 'tuiIconUploadLarge',
icon: 'tuiIconUpload',
title: 'Sideload',
},
'/portal/system/settings': {
icon: 'tuiIconToolLarge',
icon: 'tuiIconTool',
title: 'Settings',
},
'/portal/system/snek': {
icon: 'assets/img/icon_transparent.png',
title: 'Snek',
},
'/portal/system/notifications': {
icon: 'tuiIconBellLarge',
icon: 'tuiIconBell',
title: 'Notifications',
},
}
Loading

0 comments on commit e47f126

Please sign in to comment.