From bd4d89fc21ee3835c619f043d4a2a2df53517108 Mon Sep 17 00:00:00 2001 From: Lucy Cifferello <12953208+elvece@users.noreply.github.com> Date: Tue, 4 Jun 2024 21:25:29 -0400 Subject: [PATCH] fixes and backwards compatability with new registry types --- web/projects/marketplace/package.json | 2 +- .../src/components/menu/menu.component.scss | 1 + .../src/components/menu/menu.component.ts | 1 + .../list/categories/categories.component.scss | 2 +- .../list/categories/categories.component.ts | 2 +- .../src/pages/list/item/item.component.html | 14 +++++--- .../src/pages/list/item/item.component.scss | 8 ++--- .../src/pages/list/item/item.component.ts | 22 ++++++++++-- .../src/pages/list/item/item.module.ts | 9 ++++- .../dependencies/dependency-item.component.ts | 35 ++++++++++++++----- .../src/pages/show/hero/hero.component.ts | 35 ++++++++++++++----- .../src/services/category.service.ts | 2 ++ .../shared/assets/img/icons/logo-bitcoin.svg | 1 + web/projects/shared/package.json | 2 +- .../marketplace/marketplace.component.ts | 8 +++-- .../marketplace/modals/preview.component.ts | 4 +++ .../ui/src/app/services/category.service.ts | 9 ++++- web/tslint.json | 1 - 18 files changed, 120 insertions(+), 38 deletions(-) create mode 100644 web/projects/shared/assets/img/icons/logo-bitcoin.svg diff --git a/web/projects/marketplace/package.json b/web/projects/marketplace/package.json index a9202baab..ab494ae67 100644 --- a/web/projects/marketplace/package.json +++ b/web/projects/marketplace/package.json @@ -1,6 +1,6 @@ { "name": "@start9labs/marketplace", - "version": "0.3.25", + "version": "0.3.26", "peerDependencies": { "@angular/common": ">=13.2.0", "@angular/core": ">=13.2.0", diff --git a/web/projects/marketplace/src/components/menu/menu.component.scss b/web/projects/marketplace/src/components/menu/menu.component.scss index 3730d65df..49f6427ee 100644 --- a/web/projects/marketplace/src/components/menu/menu.component.scss +++ b/web/projects/marketplace/src/components/menu/menu.component.scss @@ -33,6 +33,7 @@ header { 1; border-width: 0; border-right: 0.125rem solid; + overflow: visible; } @media screen and (min-width: 1536px) { diff --git a/web/projects/marketplace/src/components/menu/menu.component.ts b/web/projects/marketplace/src/components/menu/menu.component.ts index 40ae53743..db486eae5 100644 --- a/web/projects/marketplace/src/components/menu/menu.component.ts +++ b/web/projects/marketplace/src/components/menu/menu.component.ts @@ -66,6 +66,7 @@ export class MenuComponent implements OnDestroy { this.query = '' this.categoryService.resetQuery() this.categoryService.changeCategory(category) + this.categoryService.handleNavigation() } onQueryChange(query: string): void { diff --git a/web/projects/marketplace/src/pages/list/categories/categories.component.scss b/web/projects/marketplace/src/pages/list/categories/categories.component.scss index 94868e02e..b0cf559f8 100644 --- a/web/projects/marketplace/src/pages/list/categories/categories.component.scss +++ b/web/projects/marketplace/src/pages/list/categories/categories.component.scss @@ -32,7 +32,7 @@ button { } @media (min-width: 640px) { - width: 120%; + width: 108%; padding: 0.5rem; margin-bottom: 0.75rem; diff --git a/web/projects/marketplace/src/pages/list/categories/categories.component.ts b/web/projects/marketplace/src/pages/list/categories/categories.component.ts index f9778a8f3..d59032378 100644 --- a/web/projects/marketplace/src/pages/list/categories/categories.component.ts +++ b/web/projects/marketplace/src/pages/list/categories/categories.component.ts @@ -32,7 +32,7 @@ export class CategoriesComponent { case 'all': return 'tuiIconGridLarge' case 'bitcoin': - return 'tuiIconBitcoin' + return 'assets/img/icons/logo-bitcoin.svg' case 'messaging': case 'communications': return 'tuiIconMessageCircleLarge' diff --git a/web/projects/marketplace/src/pages/list/item/item.component.html b/web/projects/marketplace/src/pages/list/item/item.component.html index eb88b4ee8..60f7bbf3a 100644 --- a/web/projects/marketplace/src/pages/list/item/item.component.html +++ b/web/projects/marketplace/src/pages/list/item/item.component.html @@ -1,14 +1,20 @@ -
+
- {{ pkg.manifest.title }} Icon + {{ pkg.manifest.title }} Icon
{{ pkg.manifest.title }} Icon
diff --git a/web/projects/marketplace/src/pages/list/item/item.component.scss b/web/projects/marketplace/src/pages/list/item/item.component.scss index 8c9c137c6..11a1b7108 100644 --- a/web/projects/marketplace/src/pages/list/item/item.component.scss +++ b/web/projects/marketplace/src/pages/list/item/item.component.scss @@ -1,10 +1,7 @@ .item-container { - height: 100%; position: relative; - min-width: 300px; border-radius: 1.5rem; padding: 5rem 2rem 2rem 2.5rem; - gap: 1rem; transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; @@ -56,21 +53,20 @@ top: -2.5rem; border-radius: 9999px; object-fit: cover; - backdrop-filter: blur(24px); - background-color: rgb(0 0 0 / 0.5); transform: none; } .detail { margin-top: 0.75rem; mix-blend-mode: plus-lighter; - + &-title { display: inline-block; font-size: 1.5rem; line-height: 2rem; margin-bottom: 0.25rem; font-weight: 400; + will-change: transform, text-indent; } &-description { diff --git a/web/projects/marketplace/src/pages/list/item/item.component.ts b/web/projects/marketplace/src/pages/list/item/item.component.ts index e1e4544b0..b608417ab 100644 --- a/web/projects/marketplace/src/pages/list/item/item.component.ts +++ b/web/projects/marketplace/src/pages/list/item/item.component.ts @@ -1,5 +1,11 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' -import { MarketplacePkg } from '../../../types' +import { + ChangeDetectionStrategy, + Component, + Input, + inject, +} from '@angular/core' +import { MarketplacePkg, StoreIdentity } from '../../../types' +import { AbstractMarketplaceService } from '../../../services/marketplace.service' @Component({ selector: 'marketplace-item', @@ -10,4 +16,16 @@ import { MarketplacePkg } from '../../../types' export class ItemComponent { @Input({ required: true }) pkg!: MarketplacePkg + + private readonly marketplaceService = inject(AbstractMarketplaceService) + readonly marketplace$ = this.marketplaceService.getSelectedHost$() + + determineIcon(marketplace: StoreIdentity | null): string { + try { + const iconUrl = new URL(this.pkg.icon) + return iconUrl.href + } catch (e) { + return `${marketplace?.url}package/v0/icon/${this.pkg.manifest.id}` + } + } } diff --git a/web/projects/marketplace/src/pages/list/item/item.module.ts b/web/projects/marketplace/src/pages/list/item/item.module.ts index 1a11b7f77..329ac0b4d 100644 --- a/web/projects/marketplace/src/pages/list/item/item.module.ts +++ b/web/projects/marketplace/src/pages/list/item/item.module.ts @@ -3,10 +3,17 @@ import { NgModule } from '@angular/core' import { RouterModule } from '@angular/router' import { SharedPipesModule, TickerModule } from '@start9labs/shared' import { ItemComponent } from './item.component' +import { TuiLetModule } from '@taiga-ui/cdk' @NgModule({ declarations: [ItemComponent], exports: [ItemComponent], - imports: [CommonModule, RouterModule, SharedPipesModule, TickerModule], + imports: [ + CommonModule, + RouterModule, + SharedPipesModule, + TickerModule, + TuiLetModule, + ], }) export class ItemModule {} diff --git a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts index 6e338a13d..bad76e438 100644 --- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts +++ b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts @@ -1,19 +1,26 @@ import { CommonModule, KeyValue } from '@angular/common' -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { + ChangeDetectionStrategy, + Component, + Input, + inject, +} from '@angular/core' import { EmverPipesModule } from '@start9labs/shared' -import { Dependency, MarketplacePkg } from '../../../types' +import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types' import { RouterModule } from '@angular/router' import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit' +import { TuiLetModule } from '@taiga-ui/cdk' +import { AbstractMarketplaceService } from '../../../services/marketplace.service' @Component({ selector: 'marketplace-dep-item', template: ` -
+
- getImage(key: string): string { + private readonly marketplaceService = inject(AbstractMarketplaceService) + readonly marketplace$ = this.marketplaceService.getSelectedHost$() + + getImage(key: string, marketplace: StoreIdentity | null) { const icon = this.pkg.dependencyMetadata[key]?.icon - // @TODO fix when registry api is updated to include mimetype in icon url - // return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2) - return icon ? icon : key.substring(0, 2) + + if (icon) { + try { + const iconUrl = new URL(icon) + return iconUrl.href + } catch (e) { + return `${marketplace?.url}package/v0/icon/${key}` + } + } else { + return key.substring(0, 2) + } } getTitle(key: string): string { diff --git a/web/projects/marketplace/src/pages/show/hero/hero.component.ts b/web/projects/marketplace/src/pages/show/hero/hero.component.ts index b6d1648d2..dac43a748 100644 --- a/web/projects/marketplace/src/pages/show/hero/hero.component.ts +++ b/web/projects/marketplace/src/pages/show/hero/hero.component.ts @@ -1,23 +1,30 @@ import { CommonModule } from '@angular/common' -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { + ChangeDetectionStrategy, + Component, + Input, + inject, +} from '@angular/core' import { SharedPipesModule, TickerModule } from '@start9labs/shared' -import { MarketplacePkg } from '../../../types' +import { MarketplacePkg, StoreIdentity } from '../../../types' +import { TuiLetModule } from '@taiga-ui/cdk' +import { AbstractMarketplaceService } from '../../../services/marketplace.service' @Component({ selector: 'marketplace-package-hero', template: ` -
+
{{ pkg.manifest.title }} Icon
{{ pkg.manifest.title }} background image
@@ -61,11 +68,11 @@ import { MarketplacePkg } from '../../../types' padding: 4rem 2rem 0 2rem; @media (min-width: 376px) { - min-height: 26vh; + min-height: 20vh; } @media (min-width: 768px) { - min-height: 14rem; + min-height: 11rem; } img { @@ -157,9 +164,21 @@ import { MarketplacePkg } from '../../../types' ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [CommonModule, SharedPipesModule, TickerModule], + imports: [CommonModule, SharedPipesModule, TickerModule, TuiLetModule], }) export class MarketplacePackageHeroComponent { @Input({ required: true }) pkg!: MarketplacePkg + + private readonly marketplaceService = inject(AbstractMarketplaceService) + readonly marketplace$ = this.marketplaceService.getSelectedHost$() + + determineIcon(marketplace: StoreIdentity | null) { + try { + const iconUrl = new URL(this.pkg.icon) + return iconUrl.href + } catch (e) { + return `${marketplace?.url}package/v0/icon/${this.pkg.manifest.id}` + } + } } diff --git a/web/projects/marketplace/src/services/category.service.ts b/web/projects/marketplace/src/services/category.service.ts index f9b0bc1e2..e044dddc1 100644 --- a/web/projects/marketplace/src/services/category.service.ts +++ b/web/projects/marketplace/src/services/category.service.ts @@ -13,4 +13,6 @@ export abstract class AbstractCategoryService { abstract getQuery$(): Observable abstract resetQuery(): void + + abstract handleNavigation(): void } diff --git a/web/projects/shared/assets/img/icons/logo-bitcoin.svg b/web/projects/shared/assets/img/icons/logo-bitcoin.svg new file mode 100644 index 000000000..89958abb0 --- /dev/null +++ b/web/projects/shared/assets/img/icons/logo-bitcoin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/projects/shared/package.json b/web/projects/shared/package.json index c229bacb3..272da854d 100644 --- a/web/projects/shared/package.json +++ b/web/projects/shared/package.json @@ -1,6 +1,6 @@ { "name": "@start9labs/shared", - "version": "0.3.12", + "version": "0.3.13", "peerDependencies": { "@angular/common": "^17.0.6", "@angular/core": "^17.0.6", diff --git a/web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts index 91399ccd9..6ec21b98b 100644 --- a/web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts @@ -101,8 +101,7 @@ import { TuiScrollbarModule } from '@taiga-ui/core' &-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); - gap: 4rem; - list-style-type: none; + gap: 4rem 3rem; padding: 1.5rem; @media (min-width: 768px) { @@ -111,9 +110,12 @@ import { TuiScrollbarModule } from '@taiga-ui/core' @media (min-width: 1024px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } - @media (min-width: 1536px) { + @media (min-width: 1280px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } + @media (min-width: 1536px) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } .tile-wrapper { display: block; diff --git a/web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts index 3a0d98ad0..deb5d990f 100644 --- a/web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts @@ -152,6 +152,10 @@ import { Router } from '@angular/router' height: 100%; place-self: center; } + + marketplace-additional { + padding-bottom: 2rem; + } `, ], standalone: true, diff --git a/web/projects/ui/src/app/services/category.service.ts b/web/projects/ui/src/app/services/category.service.ts index 045fdae86..79243d757 100644 --- a/web/projects/ui/src/app/services/category.service.ts +++ b/web/projects/ui/src/app/services/category.service.ts @@ -1,9 +1,12 @@ -import { Injectable } from '@angular/core' +import { Injectable, inject } from '@angular/core' import { Observable } from 'rxjs' import { AbstractCategoryService } from '@start9labs/marketplace' +import { Router } from '@angular/router' @Injectable() export class CategoryService extends AbstractCategoryService { + private readonly router = inject(Router) + getCategory$(): Observable { return this.category$ } @@ -23,4 +26,8 @@ export class CategoryService extends AbstractCategoryService { resetQuery() { this.query$.next('') } + + handleNavigation() { + this.router.navigate([]) + } } diff --git a/web/tslint.json b/web/tslint.json index f50f6cab3..ad6856103 100644 --- a/web/tslint.json +++ b/web/tslint.json @@ -1,6 +1,5 @@ { "rules": { - "no-unused-variable": true, "no-unused-expression": true, "semicolon": [true, "never"], "no-trailing-whitespace": true,