refactor dialogs and buttons

2022-05-10 17:38:37 +02:00 · 2022-05-10 17:38:37 +02:00 · e5a417d23c
parent 042129e57c
commit e5a417d23c
21 changed files with 130 additions and 86 deletions
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@ -34,7 +34,7 @@
    mat-stroked-button
    (click)="doLogin()"
  >
-    Login
+    LOGIN
  </button>

  <!-- <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
--- a/frontend/src/app/routes/images/images.component.html
+++ b/frontend/src/app/routes/images/images.component.html
@ -21,9 +21,9 @@
        >
        </picsur-img>
        <mat-card-actions>
-          <button mat-stroked-button (click)="viewImage(image)">View</button>
+          <button mat-stroked-button (click)="viewImage(image)">VIEW</button>
          <button mat-button color="warn" (click)="deleteImage(image)">
-            Delete
+            DELETE
          </button>
        </mat-card-actions>
      </mat-card>
--- a/frontend/src/app/routes/images/images.component.ts
+++ b/frontend/src/app/routes/images/images.component.ts
@ -85,12 +85,11 @@ export class ImagesComponent implements OnInit {
      description: 'This action cannot be undone.',
      buttons: [
        {
-          color: 'primary',
          name: 'cancel',
          text: 'Cancel',
        },
        {
-          color: 'red',
+          color: 'warn',
          name: 'delete',
          text: 'Delete',
        },
--- a/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html
+++ b/frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html
@ -40,7 +40,7 @@
  <div class="row">
    <div class="col-12 py-4">
      <button mat-raised-button color="accent" type="submit">
-        {{ editing ? "Update" : "Add" }}
+        {{ editing ? "UPDATE" : "ADD" }}
      </button>

      <button
@ -50,7 +50,7 @@
        type="button"
        (click)="cancel()"
      >
-        Cancel
+        CANCEL
      </button>
    </div>
  </div>
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
@ -66,12 +66,11 @@ export class SettingsRolesComponent implements OnInit, AfterViewInit {
      description: 'This action cannot be undone.',
      buttons: [
        {
-          color: 'primary',
          name: 'cancel',
          text: 'Cancel',
        },
        {
-          color: 'red',
+          color: 'warn',
          name: 'delete',
          text: 'Delete',
        },
--- a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
@ -74,7 +74,7 @@
  <div class="row">
    <div class="col-12 py-4">
      <button mat-raised-button color="accent" type="submit">
-        {{ editing ? "Update" : "Add" }}
+        {{ editing ? "UPDATE" : "ADD" }}
      </button>

      <button
@ -84,7 +84,7 @@
        type="button"
        (click)="cancel()"
      >
-        Cancel
+        CANCEL
      </button>
    </div>
  </div>
--- a/frontend/src/app/routes/settings/users/settings-users.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users.component.html
@ -39,9 +39,9 @@
    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
    <mat-cell *matCellDef="let user">
      <button mat-icon-button (click)="editUser(user)">
-        <mat-icon fontSet="material-icons-outlined" aria-label="Edit"
-          >edit</mat-icon
-        >
+        <mat-icon fontSet="material-icons-outlined" aria-label="Edit">
+          edit
+        </mat-icon>
      </button>
      <button
        *ngIf="!isSystem(user)"
@ -52,8 +52,9 @@
          fontSet="material-icons-outlined"
          class="icon-red"
          aria-label="Delete"
-          >delete</mat-icon
        >
+          delete
+        </mat-icon>
      </button>
    </mat-cell>
  </ng-container>
--- a/frontend/src/app/routes/settings/users/settings-users.component.ts
+++ b/frontend/src/app/routes/settings/users/settings-users.component.ts
@ -64,12 +64,11 @@ export class SettingsUsersComponent implements OnInit {
      description: 'This action cannot be undone.',
      buttons: [
        {
-          color: 'primary',
          name: 'cancel',
          text: 'Cancel',
        },
        {
-          color: 'red',
+          color: 'warn',
          name: 'delete',
          text: 'Delete',
        },
--- a/frontend/src/app/routes/user/login/login.component.html
+++ b/frontend/src/app/routes/user/login/login.component.html
@ -41,7 +41,7 @@

      <div class="col-12 py-2">
        <button mat-raised-button color="accent" class="mx-2" type="submit">
-          Login
+          LOGIN
        </button>
        <button
          *ngIf="showRegister"
@ -51,7 +51,7 @@
          (click)="onRegister()"
          type="button"
        >
-          Register
+          REGISTER
        </button>
      </div>
    </form>
--- a/frontend/src/app/routes/user/register/register.component.html
+++ b/frontend/src/app/routes/user/register/register.component.html
@ -57,7 +57,7 @@

      <div class="col-12 py-2">
        <button mat-raised-button color="accent" class="mx-2" type="submit">
-          Register
+          REGISTER
        </button>
        <button
          *ngIf="showLogin"
@ -67,7 +67,7 @@
          (click)="onLogin()"
          type="button"
        >
-          Login
+          LOGIN
        </button>
      </div>
    </form>
--- a/frontend/src/app/services/api/info.service.ts
+++ b/frontend/src/app/services/api/info.service.ts
@ -91,7 +91,7 @@ export class InfoService {
            {
              text: 'Back',
              name: 'back',
-              color: 'green',
+              color: 'accent',
            },
            {
              text: 'Ignore',
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.html
@ -1,15 +1,14 @@
-<div class="centered">
+<div class="dialog-text">
  <h2>{{ data.title }}</h2>
  <p>{{ data.description }}</p>
-  <div class="buttons">
-    <button
-      *ngFor="let button of data.buttons"
-      mat-raised-button
-      color="primary"
-      class="button-{{ button.color }} mx-2"
-      (click)="onButton(button.name)"
-    >
-      {{ button.text }}
-    </button>
-  </div>
+</div>
+<div class="dialog-buttons">
+  <button
+    *ngFor="let button of data.buttons"
+    mat-button
+    [color]="button.color"
+    (click)="onButton(button.name)"
+  >
+    {{ button.text.toUpperCase() }}
+  </button>
 </div>
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.scss
@ -1,39 +1,41 @@
-.button-red {
-  background-color: #C62828;
-}

-.button-green {
-  background-color: #4CAF50;
-}
+// .button-red {
+//   background-color: #c62828;
+// }

-.button-blue {
-  background-color: #2196F3;
-}
+// .button-green {
+//   background-color: #4caf50;
+// }

-.button-yellow {
-  background-color: #FFEB3B;
-}
+// .button-blue {
+//   background-color: #2196f3;
+// }

-.button-grey {
-  background-color: #9E9E9E;
-}
+// .button-yellow {
+//   background-color: #ffeb3b;
+// }

-.button-orange {
-  background-color: #FF9800;
-}
+// .button-grey {
+//   background-color: #9e9e9e;
+// }

-.button-success {
-  background-color: #274E29;
-}
+// .button-orange {
+//   background-color: #ff9800;
+// }

-.button-error {
-  background-color: #761919;
-}
+// .button-success {
+//   background-color: #274e29;
+// }

-.button-warning, .button-warn {
-  background-color: #934D06;
-}
+// .button-error {
+//   background-color: #761919;
+// }

-.button-info {
-  background-color: #125E87;
-}
+// .button-warning,
+// .button-warn {
+//   background-color: #934d06;
+// }
+
+// .button-info {
+//   background-color: #125e87;
+// }
--- a/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts
+++ b/frontend/src/app/util/util-module/confirm-dialog/confirm-dialog.component.ts
@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 export interface ConfirmDialogButton {
  text: string;
  name: string;
-  color: string;
+  color?: string;
 }

 export interface ConfirmDialogData {
--- a/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html
+++ b/frontend/src/app/util/util-module/download-dialog/download-dialog.component.html
@ -1,4 +1,4 @@
-<div class="centered">
+<div class="dialog-text">
  <h2>Downloading {{ data.name }}...</h2>
  <mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>
 </div>
--- a/frontend/src/app/util/util-module/util.service.ts
+++ b/frontend/src/app/util/util-module/util.service.ts
@ -1,18 +1,15 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
-import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { HasFailed } from 'picsur-shared/dist/types';
-import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api/api.service';
 import { Logger } from 'src/app/services/logger/logger.service';
 import { SnackBarType } from '../../models/dto/snack-bar-type.dto';
 import { BootstrapService, BSScreenSize } from './bootstrap.service';
 import {
  ConfirmDialogComponent,
-  ConfirmDialogData,
+  ConfirmDialogData
 } from './confirm-dialog/confirm-dialog.component';
 import { DownloadDialogComponent } from './download-dialog/download-dialog.component';

@ -55,6 +52,7 @@ export class UtilService {
        data: options,
        disableClose: true,
        closeOnNavigation: false,
+        panelClass: 'small-dialog-padding'
      });
      const subscription = ref.beforeClosed().subscribe((result) => {
        subscription.unsubscribe();
--- a/frontend/src/scss/dialog.scss
+++ b/frontend/src/scss/dialog.scss
@ -0,0 +1,19 @@
+.small-dialog-padding mat-dialog-container {
+  padding: 0;
+}
+
+.dialog-text {
+  margin: 24px 24px 0 24px;
+}
+
+.dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  margin: 12px;
+
+  & > :not(:first-of-type) {
+    margin-left: 12px;
+  }
+}
--- a/frontend/src/scss/index.scss
+++ b/frontend/src/scss/index.scss
@ -5,5 +5,5 @@
@use "./personal.scss";
@use "./fab.scss";
@use "./snackbar.scss";
-
+@use "./dialog.scss";

--- a/frontend/src/scss/material/material-theme.scss
+++ b/frontend/src/scss/material/material-theme.scss
@ -176,13 +176,6 @@ $mat-theme-light: (
  @include custom-mat.custom-material($mat-theme-light);
 }

-.mat-button-base {
-  padding: 0 1.15em;
-  margin: 0 0.65em;
-  min-width: 3em;
-  line-height: 36.4px;
-}
-
 .mat-standard-chip {
  padding: 0.5em 0.85em;
  min-height: 2.5em;
--- a/support/purge-all.sh
+++ b/support/purge-all.sh
@ -16,3 +16,8 @@ yarn purge
  cd frontend
  yarn purge
 )
+
+(
+  cd support
+  podman-compose -f ./dev.docker-compose.yml down
+)
--- a/yarn.lock
+++ b/yarn.lock
@ -1460,9 +1460,9 @@
  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==

 "@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.10"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.10.tgz#db436f0917d655393851bc258918c00226c9b183"
-  integrity sha512-Q0YbBd6OTsXm8Y21+YUSDXupHnodNC2M4O18jtd3iwJ3+vMZNdKGols0a9G6JOK0dcJ3IdUUHoh908ZI6qhk8Q==
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.11.tgz#eb2e124521f27673493030d02dffedf60e56553f"
+  integrity sha512-RllI476aSMsxzeI9TtlSMoNTgHDxEmnl6GkkHwhr0vdL8W+0WuesyI8Vd3rBOfrwtPXbPxdT9ADJdiOKgzxPQA==
  dependencies:
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"
@ -3136,9 +3136,9 @@ copy-webpack-plugin@10.2.4:
    serialize-javascript "^6.0.0"

 core-js-compat@^3.20.2, core-js-compat@^3.21.0:
-  version "3.22.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.4.tgz#d700f451e50f1d7672dcad0ac85d910e6691e579"
-  integrity sha512-dIWcsszDezkFZrfm1cnB4f/J85gyhiCpxbgBdohWCDtSVuAaChTSpPV7ldOQf/Xds2U5xCIJZOK82G4ZPAIswA==
+  version "3.22.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.5.tgz#7fffa1d20cb18405bd22756ca1353c6f1a0e8614"
+  integrity sha512-rEF75n3QtInrYICvJjrAgV03HwKiYvtKHdPtaba1KucG+cNZ4NJnH9isqt979e67KZlhpbCOTwnsvnIr+CVeOg==
  dependencies:
    browserslist "^4.20.3"
    semver "7.0.0"
@ -3508,7 +3508,7 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
  dependencies:
    once "^1.4.0"

-enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2, enhanced-resolve@^5.9.3:
  version "5.9.3"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
@ -8199,7 +8199,7 @@ webpack@5.71.0:
    watchpack "^2.3.1"
    webpack-sources "^3.2.3"

-webpack@5.72.0, webpack@^5.72.0:
+webpack@5.72.0:
  version "5.72.0"
  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
@ -8229,6 +8229,36 @@ webpack@5.72.0, webpack@^5.72.0:
    watchpack "^2.3.1"
    webpack-sources "^3.2.3"

+webpack@^5.72.0:
+  version "5.72.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
+  integrity sha512-dXG5zXCLspQR4krZVR6QgajnZOjW2K/djHvdcRaDQvsjV9z9vaW6+ja5dZOYbqBBjF6kGXka/2ZyxNdc+8Jung==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.9.3"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.3.1"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
  version "0.7.4"
  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"