remove hydration, change language, add bottom bar, adjust layout

philipp-1337 · Oct 1, 2024 · 21b6700 · 21b6700
1 parent 211952f
commit 21b6700
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 26 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,22 +6,22 @@
         <!-- <div class="icon-avatar" mat-card-avatar>
           <mat-icon svgIcon="qr-code"></mat-icon>
         </div> -->
-        <mat-card-title>QR Code erstellen</mat-card-title>
-        <mat-card-subtitle>Keine Werbung | Kein Login | Kein Bullshit</mat-card-subtitle>
+        <mat-card-title>Create your QR Code</mat-card-title>
+        <mat-card-subtitle>No Ads | No Login | No Bullshit</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
         <mat-form-field>
-          <mat-label>QR Code Daten (Text, URL, etc)</mat-label>
+          <mat-label>QR Code Data (Text, URL, etc)</mat-label>
           <input matInput [(ngModel)]="qrData" (ngModelChange)="generateQRCode()" placeholder="Enter data for QR Code">
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Größe (Pixel)</mat-label>
+          <mat-label>Size (Pixel)</mat-label>
           <input matInput type="number" [(ngModel)]="qrSize" (ngModelChange)="generateQRCode()">
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Fehlerkorrektur</mat-label>
+          <mat-label>Error Correction Level</mat-label>
           <mat-select [(ngModel)]="errorCorrectionLevel" (ngModelChange)="generateQRCode()">
             <mat-option matInput value="L">Low (7%)</mat-option>
             <mat-option matInput value="M">Medium (15%)</mat-option>
@@ -31,7 +31,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Vordergrund Farbe</mat-label>
+          <mat-label>Foreground</mat-label>
           <input matInput [(ngModel)]="colorDark" (ngModelChange)="generateQRCode()" [mtxColorpicker]="pickerDark" format="hex">
           <mtx-colorpicker-toggle matSuffix [for]="pickerDark"></mtx-colorpicker-toggle>
           <mtx-colorpicker #pickerDark></mtx-colorpicker>
@@ -40,24 +40,70 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Hintergrund Farbe</mat-label>
+          <mat-label>Background</mat-label>
           <input matInput [(ngModel)]="colorLight" (ngModelChange)="generateQRCode()" [mtxColorpicker]="pickerLight" format="hex">
           <mtx-colorpicker-toggle matSuffix [for]="pickerLight"></mtx-colorpicker-toggle>
           <mtx-colorpicker #pickerLight></mtx-colorpicker>
           <!-- <mat-hint>Choose your favorite color</mat-hint>
           <mat-error>Please enter the color</mat-error> -->
         </mat-form-field>
-
-        <p> Vorschau<br />
+      </mat-card-content>
+      <!-- <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="downloadQRCode()" title="Los gehts">
+          <span class="ml-1">Download QR Code</span>
+        </button>
+      </mat-card-actions> -->
+    </mat-card>
+    <mat-card class="card">
+      <mat-card-header>
+        <!-- <div class="icon-avatar" mat-card-avatar>
+          <mat-icon svgIcon="qr-code"></mat-icon>
+        </div> -->
+        <mat-card-title>Preview</mat-card-title>
+        <mat-card-subtitle>View your QR-Code before downloading it</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
           <canvas #canvasElement></canvas>
-        </p>
-
       </mat-card-content>
-      <mat-card-actions>
+      <!-- <mat-card-actions>
         <button mat-raised-button color="primary" (click)="downloadQRCode()" title="Los gehts">
           <span class="ml-1">Download QR Code</span>
         </button>
-      </mat-card-actions>
+      </mat-card-actions> -->
     </mat-card>
   </div>
-</main>
+</main>
+<nav class="bottom">
+  <mat-toolbar>
+    <mat-toolbar-row>
+      <!-- <button mat-icon-button class="nav-item" routerLink="/admin/settings" routerLinkActive="active" disabled>
+        <mat-icon svgIcon="settings" class="nav-item-icon"></mat-icon>
+      </button>
+      <span class="bar-spacer"></span>
+      <button mat-icon-button class="nav-item" routerLink="/admin/tbc" routerLinkActive="active" disabled>
+        <mat-icon svgIcon="hotel" class="nav-item-icon"></mat-icon>
+      </button>
+      <span class="bar-spacer"></span> -->
+      <!-- <button mat-icon-button class="nav-item" title="Dashboard">
+        <mat-icon svgIcon="space_dashboard"
+          class="nav-item-icon"></mat-icon>
+      </button> -->
+      <!-- <span class="bar-spacer"></span>
+      <button mat-icon-button class="nav-item" routerLink="/admin/tbc" routerLinkActive="active" disabled>
+        <mat-icon svgIcon="commute" class="nav-item-icon"></mat-icon>
+      </button> -->
+      <span class="bar-spacer"></span>
+      <button
+        mat-fab
+        color="primary"
+        aria-label="Download QR Code"
+        (click)="downloadQRCode()">
+        <mat-icon svgIcon="download" class="mat-icon-overlay"></mat-icon>
+      </button>
+      <span class="bar-spacer"></span>
+      <!-- <button mat-icon-button routerLink="/login" title="Login">
+        <mat-icon aria-label="Login" svgIcon="login"></mat-icon>
+      </button> -->
+    </mat-toolbar-row>
+  </mat-toolbar>
+</nav>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -22,6 +22,7 @@ import { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
 
 import { IconsClass } from './icons.class';
 import { PwaService } from './pwa.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 
 @Component({
@@ -37,8 +38,9 @@ import { PwaService } from './pwa.service';
     MatSelectModule,
     MatInputModule,
     MatSnackBarModule,
-    MtxColorpickerModule,
     MatBottomSheetModule,
+    MatToolbarModule,
+    MtxColorpickerModule,
     NavbarComponent,
     NgIf
   ],
@@ -129,10 +131,32 @@ export class AppComponent implements AfterViewInit, OnInit {
   downloadQRCode() {
     const canvas = this.canvasElement.nativeElement;
     const dataUrl = canvas.toDataURL('image/png');
-
+
+    // Erstelle ein Blob aus dem Daten-URL
+    const byteString = atob(dataUrl.split(',')[1]);
+    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    const blob = new Blob([ab], { type: mimeString });
+
+    // Erstelle eine URL für den Blob
+    const blobUrl = URL.createObjectURL(blob);
+
+    // Erstelle den Link für die Anzeige
     const link = document.createElement('a');
-    link.href = dataUrl;
+    link.href = blobUrl;
     link.download = 'qr-code.png';
+
+    // Zeige die PNG im selben Tab an
+    link.target = '_blank';
+
+    // Klick simulieren
     link.click();
+
+    // Blob-URL freigeben
+    URL.revokeObjectURL(blobUrl);
   }
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -2,15 +2,20 @@ import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angul
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideServiceWorker } from '@angular/service-worker';
 
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(withInterceptorsFromDi()), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(), provideAnimationsAsync(), provideServiceWorker('ngsw-worker.js', {
-            enabled: !isDevMode(),
-            registrationStrategy: 'registerWhenStable:30000'
-          })]
+  providers: [
+    provideHttpClient(withInterceptorsFromDi()),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimationsAsync(),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
+    })
+  ]
 };
diff --git a/src/app/icons.class.ts b/src/app/icons.class.ts
@@ -119,6 +119,12 @@ export class IconsClass {
         'material-icons/svg/baseline-directions-24px.svg'
       )
     );
+    iconRegistry.addSvgIcon(
+      'download',
+      sanitizer.bypassSecurityTrustResourceUrl(
+        'material-icons/svg/download_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg'
+      )
+    );
     iconRegistry.addSvgIcon(
       'edit',
       sanitizer.bypassSecurityTrustResourceUrl(

diff --git a/src/app/prompt/prompt.component.html b/src/app/prompt/prompt.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="data.mobileType === 'android'" class="android-prompt">
     <button mat-button (click)="installPwa()">
-        App installieren
+        Install Kraft QR
     </button>
     <button mat-icon-button (click)="close()" class="css-util position center-right">
         <mat-icon svgIcon="close" color="warn"></mat-icon>
@@ -13,8 +13,7 @@
     </button>
     <div class="css-util text-align center">
         <p class="css-util m-32">
-            Um diese App auf deinem Gerät zu installieren, tippe auf das "Teilen"-Menü und dann auf "Zum
-            Home-Bildschirm".
+            To install this app on your iOS device, tap on the "Share" menu and then on "Add to Home Screen".
         </p>
         <mat-icon svgIcon="ios_share"></mat-icon>
         <mat-icon svgIcon="navigate_next" color="accent"></mat-icon>

diff --git a/src/assets/material-icons/svg/download_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/src/assets/material-icons/svg/download_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,4 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+
+@include mat.core();
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@@ -45,6 +47,11 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
         margin: 16px;
         max-width: 100%;
       }
+
+      canvas {
+        max-width: calc(50vw - 65px);
+        max-height: calc(50vw - 65px);
+      }
     }
   }
 
@@ -55,6 +62,10 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   .mat-mdc-snack-bar-handset {
     margin-bottom: env(safe-area-inset-bottom) !important;
   }
+
+  .mat-bottom-sheet-container {
+    overflow: hidden !important;
+  }
 
   .bar-spacer {
     flex: 1 1 auto;
@@ -109,4 +120,22 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
         transform: translateY(-50%) !important; // Vertikal zentrieren
       }
     }
+  }
+
+  .bottom {
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    height: calc(56px + var(--safe-area-inset-bottom));
+    .mat-toolbar {
+      .mat-mdc-fab {
+        position: relative;
+        bottom: 50%;
+      }
+      @include mat.elevation(1);
+      bottom: 0;
+      position: fixed;
+      top: unset !important;
+      --safe-area-inset-bottom: env(safe-area-inset-bottom);
+      height: calc(56px + var(--safe-area-inset-bottom));
+      z-index: 3;
+    }
   }