start menu lol (#2389)

* start menu lol * add icons, abstract header menu * chore: few tweaks --------- Co-authored-by: waterplea <alexander@inkin.ru>
2026-03-26 10:21:52 +00:00 · 2023-08-14 07:39:07 -06:00
parent cf3a501562
commit f7b079b1b4
15 changed files with 136 additions and 19 deletions
--- a/frontend/projects/shared/styles/taiga.scss
+++ b/frontend/projects/shared/styles/taiga.scss
@@ -80,7 +80,8 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
    &::before {
      background: var(--tui-clear);
      box-shadow: 1rem 0 var(--tui-clear), -1rem 0 var(--tui-clear);
-      padding-top: 0.375rem;
+      padding-top: 0.375rem !important;
+      padding-bottom: 0 !important;
    }

    &::after {
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.html
@@ -2,7 +2,7 @@
  <img alt="" class="icon" [src]="icon" />
  <label ticker class="title">{{ title }}</label>
 </span>
-<span class="side">
+<span *ngIf="isService" class="side">
  <tui-hosted-dropdown
    #dropdown
    [content]="content"
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss
@@ -6,7 +6,7 @@
  overflow: hidden;
  box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
  // TODO: Theme
-  background: rgb(111 109 109 / 90%);
+  background: rgb(111 109 109);
 }

 .link {
--- a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts
@@ -38,18 +38,22 @@ import { toRouterLink } from '../../utils/to-router-link'
 export class CardComponent {
  private readonly navigation = inject(NavigationService)

-  @Input()
-  id = ''
+  @Input({ required: true })
+  id!: string

-  @Input()
-  icon = ''
+  @Input({ required: true })
+  icon!: string

-  @Input()
-  title = ''
+  @Input({ required: true })
+  title!: string

  @Input()
  actions: Record<string, readonly Action[]> = {}

+  get isService(): boolean {
+    return !this.id.includes('/')
+  }
+
  @HostListener('click')
  onClick() {
    const { id, icon, title } = this
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.html
@@ -0,0 +1,56 @@
+<tui-hosted-dropdown
+  [content]="content"
+  [tuiDropdownMaxHeight]="9999"
+  (click.stop.prevent)="(0)"
+  (pointerdown.stop)="(0)"
+>
+  <button tuiIconButton appearance="">
+    <img style="max-width: 62%" src="assets/img/icon.png" alt="StartOS" />
+  </button>
+  <ng-template #content>
+    <tui-data-list>
+      <h3 class="title">StartOS</h3>
+      <button tuiOption class="item" (click)="({})">
+        <tui-svg src="tuiIconInfo"></tui-svg>
+        About this server
+      </button>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconBookOpen"></tui-svg>
+          User Manual
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconHeadphones"></tui-svg>
+          Contact Support
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconDollarSign"></tui-svg>
+          Donate to Start9
+          <tui-svg class="external" src="tuiIconArrowUpRight"></tui-svg>
+        </button>
+      </tui-opt-group>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconTool"></tui-svg>
+          System Rebuild
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconRefreshCw"></tui-svg>
+          Restart
+        </button>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconPower"></tui-svg>
+          Shutdown
+        </button>
+      </tui-opt-group>
+      <tui-opt-group>
+        <button tuiOption class="item" (click)="({})">
+          <tui-svg src="tuiIconLogOut"></tui-svg>
+          Logout
+        </button>
+      </tui-opt-group>
+    </tui-data-list>
+  </ng-template>
+</tui-hosted-dropdown>
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.scss
@@ -0,0 +1,17 @@
+.item {
+  justify-content: flex-start;
+  gap: 0.75rem;
+}
+
+.title {
+  margin: 0;
+  padding: 0 0.5rem 0.25rem;
+  white-space: nowrap;
+  font: var(--tui-font-text-l);
+  font-weight: bold;
+}
+
+.external {
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import {
+  TuiButtonModule,
+  TuiDataListModule,
+  TuiHostedDropdownModule,
+  TuiSvgModule,
+} from '@taiga-ui/core'
+
+@Component({
+  selector: 'header-menu',
+  templateUrl: 'header-menu.component.html',
+  styleUrls: ['header-menu.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TuiHostedDropdownModule,
+    TuiDataListModule,
+    TuiSvgModule,
+    TuiButtonModule,
+  ],
+})
+export class HeaderMenuComponent {}
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.html
@@ -8,4 +8,5 @@
      Notifications
    </button>
  </tui-badged-content>
+  <header-menu></header-menu>
 </div>
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss
@@ -5,9 +5,10 @@
  padding: 0 1rem 0 2rem;
  font-size: 1.5rem;
  // TODO: Theme
-  background: rgb(51 51 51 / 74%);
+  background: rgb(51 51 51 / 84%);
 }

 .toolbar {
+  display: flex;
  margin-left: auto;
 }
--- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts
@@ -1,6 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { TuiBadgedContentModule } from '@taiga-ui/kit'
-import { TuiButtonModule } from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiDataListModule,
+  TuiHostedDropdownModule,
+  TuiSvgModule,
+} from '@taiga-ui/core'
+import { HeaderMenuComponent } from './header-menu/header-menu.component'

@Component({
  selector: 'header[appHeader]',
@@ -8,6 +14,13 @@ import { TuiButtonModule } from '@taiga-ui/core'
  styleUrls: ['header.component.scss'],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiBadgedContentModule, TuiButtonModule],
+  imports: [
+    TuiBadgedContentModule,
+    TuiButtonModule,
+    TuiHostedDropdownModule,
+    TuiDataListModule,
+    TuiSvgModule,
+    HeaderMenuComponent,
+  ],
 })
 export class HeaderComponent {}
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html
@@ -4,7 +4,7 @@
  routerLinkActive="tab_active"
  [routerLinkActiveOptions]="{ exact: true }"
 >
-  <img class="icon" src="assets/img/icon_transparent.png" alt="Home" />
+  <tui-svg src="tuiIconHomeLarge" class="home"></tui-svg>
 </a>
 <a
  *ngFor="let tab of tabs$ | async"
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss
@@ -2,7 +2,7 @@
  height: 3rem;
  display: flex;
  // TODO: Theme
-  background: rgb(97 95 95 / 75%);
+  background: rgb(97 95 95 / 84%);
 }

 .tab {
@@ -29,3 +29,7 @@
  top: 0;
  right: 0;
 }
+
+.home {
+  color: var(--tui-base-08);
+}
--- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts
+++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule, Location } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
 import { NavigationItem, NavigationService } from './navigation.service'

@Component({
@@ -10,7 +10,7 @@ import { NavigationItem, NavigationService } from './navigation.service'
  styleUrls: ['navigation.component.scss'],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, RouterModule, TuiButtonModule],
+  imports: [CommonModule, RouterModule, TuiButtonModule, TuiSvgModule],
 })
 export class NavigationComponent {
  private readonly location = inject(Location)
--- a/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts
+++ b/frontend/projects/ui/src/app/apps/portal/pipes/to-desktop-item.ts
@@ -9,8 +9,6 @@ import { toRouterLink } from '../utils/to-router-link'
  standalone: true,
 })
 export class ToDesktopItemPipe implements PipeTransform {
-  private readonly system = SYSTEM_UTILITIES
-
  transform(
    packages: Record<string, PackageDataEntry>,
    id: string,
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html
@@ -105,7 +105,7 @@
                [icon]="icon"
              ></button>
              <ng-template #icon>
-                <tui-svg src="tuiIconMoreHorizontal" class="icon"></tui-svg>
+                <tui-svg src="tuiIconMoreHorizontal"></tui-svg>
              </ng-template>
            </tui-hosted-dropdown>
            <ng-template #dropdown let-close="close">