Code viewer invert colors feature

Quenary · Quenary · commit 1bff8688eb16 · 2025-06-16T19:11:22.000+03:00
* add invert colors in code viewer
* card-scanner with mat-dialog-* components
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cardholder-pwa",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port=4207 --open",
diff --git a/frontend/public/i18n/en.json b/frontend/public/i18n/en.json
@@ -69,6 +69,9 @@
                 "SAVE": "Card saved",
                 "DELETE": "Card deleted"
             }
+        },
+        "VIEWER": {
+            "INVERT": "Invert colors"
         }
     },
     "USER": {
diff --git a/frontend/public/i18n/ru.json b/frontend/public/i18n/ru.json
@@ -69,6 +69,9 @@
                 "SAVE": "Карта сохранена",
                 "DELETE": "Карта удалена"
             }
+        },
+        "VIEWER": {
+            "INVERT": "Инвертировать цвета"
         }
     },
     "USER": {
diff --git a/frontend/src/app/features/card-scanner/card-scanner.component.html b/frontend/src/app/features/card-scanner/card-scanner.component.html
@@ -1,38 +1,38 @@
-<div class="card-scanner">
+<mat-dialog-content class="mat-dialog-content">
   <video
-    class="card-scanner-video"
+    class="mat-dialog-content-video"
     #video>
   </video>
-  <section class="card-scanner-footer">
-    <button
-      mat-button
-      (click)="onClickSelectDevice()">
-      <mat-icon>videocam_outlined</mat-icon>
-      @if (deviceControl.value) {
-      {{ deviceControl.value.label }}
-      } @else {
-      {{ 'CARDS.CARD.SCAN.SELECT_SOURCE' | translate }}
-      }
-    </button>
-    <button
-      mat-button
-      class="accent-color"
-      (click)="fileInput.click()">
-      <mat-icon>image</mat-icon>
-      {{ 'CARDS.CARD.SCAN.FROM_FILE' | translate }}
-      <input
-        #fileInput
-        hidden
-        type="file"
-        id="card-scanner-from-file"
-        accept="image/*"
-        multiple="false"
-        (change)="decodeFromFile($any($event))" />
-    </button>
-    <button
-      mat-button
-      (click)="close()">
-      {{ 'GENERAL.CLOSE' | translate }}
-    </button>
-  </section>
-</div>
+</mat-dialog-content>
+<mat-dialog-actions class="mat-dialog-actions">
+  <button
+    mat-button
+    (click)="onClickSelectDevice()">
+    <mat-icon>videocam_outlined</mat-icon>
+    @if (deviceControl.value) {
+    {{ deviceControl.value.label }}
+    } @else {
+    {{ 'CARDS.CARD.SCAN.SELECT_SOURCE' | translate }}
+    }
+  </button>
+  <button
+    mat-button
+    class="accent-color"
+    (click)="fileInput.click()">
+    <mat-icon>image</mat-icon>
+    {{ 'CARDS.CARD.SCAN.FROM_FILE' | translate }}
+    <input
+      #fileInput
+      hidden
+      type="file"
+      id="card-scanner-from-file"
+      accept="image/*"
+      multiple="false"
+      (change)="decodeFromFile($any($event))" />
+  </button>
+  <button
+    mat-flat-button
+    (click)="close()">
+    {{ 'GENERAL.CLOSE' | translate }}
+  </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/features/card-scanner/card-scanner.component.scss b/frontend/src/app/features/card-scanner/card-scanner.component.scss
@@ -1,20 +1,16 @@
-.card-scanner {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+:host {
+  .mat-dialog-content {
+    overflow: hidden;
+    padding: 0;
 
-  &-video {
-    width: 100%;
-    flex: 1;
+    &-video {
+      width: 100%;
+      height: 100%;
+    }
   }
-  &-footer {
-    width: 100%;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+
+  .mat-dialog-actions {
+    margin-top: auto;
     gap: 8px;
   }
 }
diff --git a/frontend/src/app/features/card-scanner/card-scanner.component.ts b/frontend/src/app/features/card-scanner/card-scanner.component.ts
@@ -29,7 +29,11 @@ import {
 } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import {
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import {
   MatListItem,
@@ -82,6 +86,8 @@ export class CardScannerDeviceSheetComponent {
     MatButton,
     MatIcon,
     MatButton,
+    MatDialogActions,
+    MatDialogContent,
   ],
   templateUrl: './card-scanner.component.html',
   styleUrl: './card-scanner.component.scss',
diff --git a/frontend/src/app/shared/components/card-code-viewer/card-code-viewer.component.ts b/frontend/src/app/shared/components/card-code-viewer/card-code-viewer.component.ts
@@ -18,6 +18,7 @@ import {
   MatDialogRef,
   MatDialogTitle,
 } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
 import Bwip from '@bwip-js/browser';
 import { TranslateModule } from '@ngx-translate/core';
 import type { BarcodeFormat } from '@zxing/library';
@@ -36,7 +37,8 @@ export interface ICardCodeViewerData {
   scale: number;
   /**
    * Color of barcode.
-   * @default value of var(--mat-sys-on-background)
+   * It should be valid css color value (not variable).
+   * @default value of var(--mat-sys-on-surface)
    */
   color: string;
 }
@@ -52,16 +54,15 @@ export class CardCodeViewerComponent
   implements OnInit, OnChanges, ICardCodeViewerData
 {
   protected readonly matDialog = inject(MatDialog);
+
   @Input() card: Partial<ICardBase> = null;
   @Input() scale: number = 3;
   @Input('color') set _color(value: string) {
     if (value) {
       this.color = value;
     }
   }
-  color: string = getComputedStyle(document.documentElement).getPropertyValue(
-    '--mat-sys-on-background'
-  );
+  color: string = this.getCssVariableValue('--mat-sys-on-surface');
   /**
    * Barcode canvas element ref
    */
@@ -70,17 +71,23 @@ export class CardCodeViewerComponent
 
   ngOnInit(): void {
     if (this.card) {
-      this.tryDrawCode(this.card.code, this.card.code_type);
+      this.tryDrawCode(this.card.code, this.card.code_type, this.color);
     }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (this.card) {
-      this.tryDrawCode(this.card.code, this.card.code_type);
+      this.tryDrawCode(this.card.code, this.card.code_type, this.color);
     }
   }
 
-  protected tryDrawCode(text: string, format: string): void {
+  protected getCssVariableValue(variable: string): string {
+    return getComputedStyle(document.documentElement).getPropertyValue(
+      variable
+    );
+  }
+
+  protected tryDrawCode(text: string, format: string, color: string): void {
     const canvas = this.canvasRef.nativeElement;
     try {
       const bcid = ZxingToBwipMap[format as keyof typeof BarcodeFormat];
@@ -89,8 +96,8 @@ export class CardCodeViewerComponent
         text,
         scale: 3,
         includetext: true,
-        textcolor: this.color,
-        barcolor: this.color,
+        textcolor: color,
+        barcolor: color,
       });
     } catch (e) {
       const ctx = canvas.getContext('2d');
@@ -99,8 +106,11 @@ export class CardCodeViewerComponent
     }
   }
 
-  public viewInDialog() {
-    this.matDialog.open(CardCodeViewerDialogComponent, {
+  public viewInDialog(): MatDialogRef<
+    CardCodeViewerDialogComponent,
+    ICardCodeViewerData
+  > {
+    return this.matDialog.open(CardCodeViewerDialogComponent, {
       width: 'calc(100% - 50px)',
       height: 'calc(100% - 50px)',
       data: <ICardCodeViewerData>{
@@ -116,44 +126,68 @@ export class CardCodeViewerComponent
   standalone: true,
   imports: [
     MatButton,
+    MatIcon,
     MatDialogActions,
     MatDialogContent,
     MatDialogTitle,
     TranslateModule,
   ],
   template: `
     <h2 mat-dialog-title>{{ card.name }}</h2>
-    <mat-dialog-content>
+    <mat-dialog-content
+      class="mat-dialog-content"
+      [class.invert]="invert">
       <canvas
         class="canvas"
-        #canvas>
+        #canvas
+        (click)="invert = !invert">
       </canvas>
     </mat-dialog-content>
-    <mat-dialog-actions [style.margin-top]="'auto'">
+    <mat-dialog-actions class="mat-dialog-actions">
+      <button mat-button
+        (click)="invert = !invert">
+        <mat-icon>touch_app</mat-icon>
+        {{ 'CARDS.VIEWER.INVERT' | translate }}
+      </button>
       <button
-        mat-button
+        mat-flat-button
         (click)="close()">
         {{ 'GENERAL.CLOSE' | translate }}
       </button>
     </mat-dialog-actions>
   `,
   styleUrl: './card-code-viewer.component.scss',
   styles: `
-  mat-dialog-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  :host {
+    .mat-dialog-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--mat-sys-surface);
+
+      &.invert {
+        filter: invert(1);
+      }
+    }
+    .mat-dialog-actions {
+      margin-top: auto;
+      gap: 8px;
+    }
   }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardCodeViewerDialogComponent extends CardCodeViewerComponent {
   private readonly matDialogRef = inject(MatDialogRef);
   private readonly data: ICardCodeViewerData = inject(MAT_DIALOG_DATA);
+
+  public invert: boolean = false;
+
   constructor() {
     super();
     Object.assign(this, this.data);
   }
+
   public close() {
     this.matDialogRef.close();
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "cardholder-pwa",`
`3`		`- "version": "0.0.6",`
	`3`	`+ "version": "0.0.7",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"ng": "ng",`
`6`	`6`	`"start": "ng serve --port=4207 --open",`
Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,9 @@`
`69`	`69`	`"SAVE": "Card saved",`
`70`	`70`	`"DELETE": "Card deleted"`
`71`	`71`	`}`
	`72`	`+ },`
	`73`	`+ "VIEWER": {`
	`74`	`+ "INVERT": "Invert colors"`
`72`	`75`	`}`
`73`	`76`	`},`
`74`	`77`	`"USER": {`