chore: address comments

2026-03-30 12:11:56 +00:00 · 2024-07-05 18:23:18 +05:00
parent 6234391229
commit d85e621bb3
10 changed files with 107 additions and 32 deletions
--- a/web/projects/ui/src/app/routes/portal/routes/system/backups/components/upcoming.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/backups/components/upcoming.component.ts
@@ -28,7 +28,7 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
              @if (current.id === job.id) {
                <span [style.color]="'var(--tui-positive)'">Running</span>
              } @else {
-                {{ job.next | date: 'MMM d, y, h:mm a' }}
+                {{ job.next | date: 'medium' }}
              }
            </td>
            <td class="name">{{ job.name }}</td>
@@ -59,7 +59,11 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
      grid-template-columns: 1fr 1fr;
    }

-    .date,
+    .date {
+      order: 1;
+      grid-column: span 2;
+    }
+
    .name {
      grid-column: span 2;
    }
--- a/web/projects/ui/src/app/routes/portal/routes/system/backups/modals/history.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/backups/modals/history.component.ts
@@ -9,10 +9,12 @@ import { FormsModule } from '@angular/forms'
 import { ErrorService, LoadingService } from '@start9labs/shared'
 import { ALWAYS_FALSE_HANDLER, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk'
 import { TuiDialogService, TuiLinkModule } from '@taiga-ui/core'
-import { TuiButtonModule, TuiIconModule } from '@taiga-ui/experimental'
-import { TuiCheckboxModule } from '@taiga-ui/kit'
+import {
+  TuiButtonModule,
+  TuiCheckboxModule,
+  TuiIconModule,
+} from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
-import { BehaviorSubject } from 'rxjs'
 import { REPORT } from 'src/app/components/report.component'
 import { BackupRun } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
@@ -37,7 +39,10 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
      <thead>
        <tr>
          <th>
-            <tui-checkbox
+            <input
+              type="checkbox"
+              size="s"
+              tuiCheckbox
              [disabled]="!selected.length"
              [ngModel]="all"
              (ngModelChange)="toggle()"
@@ -52,9 +57,16 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
      </thead>
      <tbody>
        @for (run of runs(); track $index) {
-          <tr [style.background]="selected[$index] ? 'var(--tui-clear)' : ''">
-            <td><tui-checkbox [(ngModel)]="selected[$index]" /></td>
-            <td>{{ run.startedAt | date: 'medium' }}</td>
+          <tr>
+            <td class="checkbox">
+              <input
+                type="checkbox"
+                tuiCheckbox
+                size="s"
+                [(ngModel)]="selected[$index]"
+              />
+            </td>
+            <td class="date">{{ run.startedAt | date: 'medium' }}</td>
            <td class="duration">
              {{ run.startedAt | duration: run.completedAt }} minutes
            </td>
@@ -67,7 +79,7 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
              }
              <button tuiLink (click)="showReport(run)">Report</button>
            </td>
-            <td [style.grid-column]="'span 3'">
+            <td [style.grid-column]="'span 2'">
              <tui-icon [icon]="run.job.target.type | getBackupIcon" />
              {{ run.job.target.name }}
            </td>
@@ -87,27 +99,50 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
    </table>
  `,
  styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
    tui-icon {
      font-size: 1rem;
      vertical-align: sub;
      margin-inline-end: 0.25rem;
    }

+    button {
+      position: relative;
+    }
+
+    [tuiCheckbox] {
+      display: block;
+    }
+
    :host-context(tui-root._mobile) {
      tr {
-        grid-template-columns: 1.75rem 1fr 7rem;
+        grid-template-columns: 1fr 7rem;
      }

      td:only-child {
-        grid-column: span 3;
+        grid-column: span 2;
+      }
+
+      .checkbox {
+        @include fullsize();
+
+        [tuiCheckbox] {
+          @include fullsize();
+          opacity: 0;
+        }
      }

      .title {
-        grid-column: span 2;
        font-weight: bold;
        text-transform: uppercase;
      }

+      .date,
+      .duration {
+        color: var(--tui-text-02);
+      }
+
      .duration,
      .result {
        text-align: right;
@@ -120,12 +155,12 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
    CommonModule,
    FormsModule,
    TuiButtonModule,
-    TuiCheckboxModule,
    TuiIconModule,
    TuiLinkModule,
    DurationPipe,
    HasErrorPipe,
    GetBackupIconPipe,
+    TuiCheckboxModule,
  ],
 })
 export class BackupsHistoryModal {
--- a/web/projects/ui/src/app/routes/portal/routes/system/notifications/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/notifications/item.component.ts
@@ -23,7 +23,7 @@ import { toRouterLink } from 'src/app/utils/to-router-link'
  template: `
    <td class="checkbox"><ng-content /></td>
    <td class="date">
-      {{ notificationItem.createdAt | date: 'MMM d, y, h:mm a' }}
+      {{ notificationItem.createdAt | date: 'medium' }}
    </td>
    <td class="title" [style.color]="color">
      <tui-icon [icon]="icon" [style.font-size.rem]="1" />
@@ -64,28 +64,36 @@ import { toRouterLink } from 'src/app/utils/to-router-link'
    '[class._new]': '!notificationItem.read',
  },
  styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
    :host {
-      grid-template-columns: 1.75rem 1fr;
+      grid-template-columns: 1fr;

      &._new {
        background: var(--tui-clear) !important;
      }
    }

+    button {
+      position: relative;
+    }
+
    td {
-      grid-column: span 2;
      padding: 0.25rem;
      vertical-align: top;
    }

    .checkbox {
-      grid-column: span 1;
      padding-top: 0.4rem;
    }

    :host-context(tui-root._mobile) {
+      .checkbox {
+        @include fullsize();
+      }
+
      .date {
-        grid-column: span 1;
+        order: 1;
        color: var(--tui-text-02);
      }

--- a/web/projects/ui/src/app/routes/portal/routes/system/notifications/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/notifications/table.component.ts
@@ -66,6 +66,14 @@ import { NotificationItemComponent } from './item.component'
      }
    </tbody>
  `,
+  styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
+    :host-context(tui-root._mobile) input {
+      @include fullsize();
+      opacity: 0;
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
--- a/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/domains/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/domains/table.component.ts
@@ -28,7 +28,7 @@ import { Domain } from 'src/app/services/patch-db/data-model'
      @for (domain of domains; track $index) {
        <tr *ngFor="let domain of domains">
          <td class="title">{{ domain.value }}</td>
-          <td class="date">{{ domain.createdAt | date: 'short' }}</td>
+          <td class="date">{{ domain.createdAt | date: 'medium' }}</td>
          <td class="provider">{{ domain.provider }}</td>
          <td class="strategy">{{ getStrategy(domain) }}</td>
          <td class="used">
--- a/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/proxies/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/proxies/table.component.ts
@@ -44,7 +44,7 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
      @for (proxy of proxies; track $index) {
        <tr>
          <td class="title">{{ proxy.name }}</td>
-          <td class="date">{{ proxy.createdAt | date: 'short' }}</td>
+          <td class="date">{{ proxy.createdAt | date: 'medium' }}</td>
          <td class="type">{{ proxy.type }}</td>
          <td class="used">
            @if (getLength(proxy); as length) {
@@ -110,17 +110,17 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
      }

      .date {
-        order: 3;
+        order: 5;
        grid-column: span 2;
        color: var(--tui-text-02);
      }

      .type {
-        order: 4;
+        order: 3;
      }

      .used {
-        order: 5;
+        order: 4;
        text-align: right;

        &:not(:has(button)) {
--- a/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/sessions/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/sessions/table.component.ts
@@ -77,6 +77,8 @@ import { PlatformInfoPipe } from './platform-info.pipe'
  `,
  styles: [
    `
+      @import '@taiga-ui/core/styles/taiga-ui-local';
+
      input {
        position: absolute;
        top: 50%;
@@ -85,6 +87,17 @@ import { PlatformInfoPipe } from './platform-info.pipe'
      }

      :host-context(tui-root._mobile) {
+        input {
+          @include fullsize();
+          z-index: 1;
+          opacity: 0;
+          transform: none;
+        }
+
+        td:first-child {
+          padding: 0 0.25rem !important;
+        }
+
        .agent {
          white-space: nowrap;
          display: block;
--- a/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/ssh/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/settings/routes/ssh/table.component.ts
@@ -81,18 +81,19 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
        text-align: right;
      }

-      .date {
+      .fingerprint {
        order: 3;
+        grid-column: span 2;
+      }
+
+      .date {
+        order: 4;
+        color: var(--tui-text-02);
      }

      .algorithm {
-        order: 4;
-        text-align: right;
-      }
-
-      .fingerprint {
        order: 5;
-        grid-column: span 2;
+        text-align: right;
        color: var(--tui-text-02);
      }
    }