Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 12:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bugfix/040 UI (#2881)

Browse Source 
* fix sideload and install flow

* move updates chevron inside upddate button

* update dictionaries to include langauge names

* fix: address todos (#2880)

* fix: address todos

* fix enlgish translation

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* use existing translation, no need to duplicate

* fix: update dialog and other fixes (#2882)

---------

Co-authored-by: Alex Inkin <alexander@inkin.ru>
Co-authored-by: Aiden McClelland <me@drbonez.dev>
This commit is contained in:
Matt Hill
2025-04-21 10:57:12 -06:00
committed by GitHub
parent b1621f6b34
commit 27272680a2
59 changed files with 515 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
web/projects/marketplace/src/components/menu/menu.component.html
View File

@@ -21,14 +21,7 @@
[(query)]="query"
(queryChange)="onQueryChange($event)"
/>
<button
tuiButton
type="button"
appearance="link"
(click)="toggleMenu(true)"
(tuiActiveZoneChange)="toggleMenu($event)"
[style.--tui-padding]="'1.2rem'"
>
<button tuiButton type="button" appearance="" (click)="open.set(true)">
<store-icon
size="42px"
[style.height.px]="42"
@@ -37,46 +30,47 @@
[marketplace]="iconConfig"
[tuiSkeleton]="!registry"
/>
<nav
*tuiSidebar="open; direction: 'right'; autoWidth: true"
class="nav-mobile-sidebar divide-bar"
<tui-drawer
*tuiPopup="open()"
[overlay]="true"
(click.self)="open.set(false)"
>
<div class="nav-mobile-sidebar-top">
<h1 [tuiSkeleton]="!registry">
{{ registry?.info?.name }}
</h1>
<button
[style.--tui-padding]="0"
tuiButton
type="button"
appearance="icon"
iconStart="@tui.x"
(tuiActiveZoneChange)="toggleMenu($event)"
(click)="toggleMenu(false)"
></button>
</div>
<!-- change registry modal -->
<ng-content select="[slot=mobile]"></ng-content>
<div class="nav-mobile-sidebar-bottom divide-bar">
<marketplace-categories
[categories]="registry?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
/>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store-mobile]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
<nav class="nav-mobile-sidebar divide-bar">
<div class="nav-mobile-sidebar-top">
<h1 [style.margin]="0" [tuiSkeleton]="!registry">
{{ registry?.info?.name }}
</h1>
<button
tuiButton
type="button"
appearance="icon"
iconStart="@tui.x"
(click)="open.set(false)"
></button>
</div>
</div>
</nav>
<!-- change registry modal -->
<ng-content select="[slot=mobile]"></ng-content>
<div class="nav-mobile-sidebar-bottom divide-bar">
<marketplace-categories
[categories]="registry?.info?.categories"
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event); open.set(false)"
/>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store-mobile]" />
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<span>Package a service</span>
<tui-icon tuiAppearance="icon" icon="@tui.external-link" />
</a>
</div>
</div>
</nav>
</tui-drawer>
</button>
</div>
</div>

22
web/projects/marketplace/src/components/menu/menu.component.module.ts
View File

@@ -1,15 +1,19 @@
import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { SharedPipesModule } from '@start9labs/shared'
import { TuiSkeleton } from '@taiga-ui/kit'
import { MenuComponent } from './menu.component'
import { TuiLoader, TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
import { TuiActiveZone, TuiLet } from '@taiga-ui/cdk'
import { TuiSidebar } from '@taiga-ui/addon-mobile'
import { SearchModule } from '../../pages/list/search/search.module'
import { TuiLet } from '@taiga-ui/cdk'
import {
TuiAppearance,
TuiButton,
TuiIcon,
TuiLoader,
TuiPopup,
} from '@taiga-ui/core'
import { TuiDrawer, TuiSkeleton } from '@taiga-ui/kit'
import { CategoriesModule } from '../../pages/list/categories/categories.module'
import { SearchModule } from '../../pages/list/search/search.module'
import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
import { MenuComponent } from './menu.component'
@NgModule({
imports: [
@@ -17,8 +21,6 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
SharedPipesModule,
SearchModule,
CategoriesModule,
TuiActiveZone,
...TuiSidebar,
TuiLoader,
TuiButton,
CategoriesModule,
@@ -27,6 +29,8 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
TuiAppearance,
TuiIcon,
TuiSkeleton,
TuiDrawer,
TuiPopup,
],
declarations: [MenuComponent],
exports: [MenuComponent],

14
web/projects/marketplace/src/components/menu/menu.component.scss
View File

@@ -5,6 +5,12 @@
padding: 0;
}
tui-drawer {
top: 0;
border-radius: 0;
background-color: rgb(var(--tw-color-zinc-700) / 0.9);
}
header {
@include scrollbar-hidden();
@@ -131,12 +137,10 @@ header {
}
&-sidebar {
background-color: rgb(var(--tw-color-zinc-700) / 0.9);
width: 70vw;
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
margin: -1.25rem -1.5rem;
&-top {
display: flex;
@@ -166,7 +170,7 @@ header {
marketplace-categories {
flex-grow: 1;
padding: 1.25rem 1.25rem 0px 1.25rem;
padding: 1.25rem 1.25rem 0 1.25rem;
}
::ng-deep a {
@@ -191,7 +195,7 @@ header {
.divide-bar > * + * {
border-top-width: 1px;
border-bottom-width: 0px;
border-bottom-width: 0;
border-color: rgb(113 113 122);
}
}

7
web/projects/marketplace/src/components/menu/menu.component.ts
View File

@@ -4,6 +4,7 @@ import {
inject,
Input,
OnDestroy,
signal,
} from '@angular/core'
import { MarketplaceConfig } from '@start9labs/shared'
import { Subject, takeUntil } from 'rxjs'
@@ -27,7 +28,7 @@ export class MenuComponent implements OnDestroy {
private readonly categoryService = inject(AbstractCategoryService)
category = ''
query = ''
open = false
readonly open = signal(false)
ngOnInit() {
this.categoryService
@@ -57,10 +58,6 @@ export class MenuComponent implements OnDestroy {
this.categoryService.setQuery(query)
}
toggleMenu(open: boolean): void {
this.open = open
}
ngOnDestroy(): void {
this.destroy$.next()
this.destroy$.complete()

27
web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
View File

@@ -1,29 +1,29 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { TuiIcon, TuiTitle } from '@taiga-ui/core'
import { TuiLineClamp } from '@taiga-ui/kit'
import { TuiFade } from '@taiga-ui/kit'
@Component({
selector: 'marketplace-additional-item',
template: `
<div class="item-container">
<label tuiTitle>
<span tuiSubtitle>{{ label }}</span>
<tui-line-clamp [content]="data" [linesLimit]="1" />
</label>
<tui-icon [icon]="icon" />
</div>
<label tuiTitle>
<span tuiSubtitle>{{ label }}</span>
<span tuiFade>{{ data }}</span>
</label>
<tui-icon [icon]="icon" />
`,
styles: [
`
.item-container {
:host {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.25rem;
white-space: nowrap;
&:hover {
background-color: rgb(113 113 122 / 0.1);
background-color: var(--tui-background-neutral-1);
}
[tuiSubtitle] {
@@ -34,16 +34,11 @@ import { TuiLineClamp } from '@taiga-ui/kit'
opacity: 0.7;
}
}
::ng-deep .t-text {
font-family: 'Montserrat';
font-weight: 600;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, TuiLineClamp, TuiIcon, TuiTitle],
imports: [CommonModule, TuiIcon, TuiTitle, TuiFade],
})
export class MarketplaceAdditionalItemComponent {
@Input({ required: true })

1
web/projects/marketplace/src/pages/show/additional/additional.component.scss
View File

@@ -7,6 +7,7 @@
.detail-container {
display: grid;
grid-auto-flow: row;
grid-auto-columns: minmax(0, 1fr);
& > * + * {
border-top-width: 1px;