✨ add toolbar

alexfriesen · Oct 14, 2023 · 0210431 · 0210431
1 parent da80d77
commit 0210431
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,33 +1,48 @@
 <header>
-  <button mat-fab extended color="accent" (click)="onOpenFilePrompt()">
-    <mat-icon>attach_file</mat-icon>
-    {{ 'pick file' | transloco }}
-  </button>
+  <mat-toolbar color="primary">
+    <span>PDF Tools</span>
+    <div class="end">
+      @if (!hasDocument()) {
+        <button mat-fab extended color="accent" (click)="onOpenFilePrompt()">
+          <mat-icon>attach_file</mat-icon>
+          {{ 'pick file' | transloco }}
+        </button>
+      }
 
-  @if (canDownload()) {
-    <button mat-fab extended color="primary" (click)="onDownloadFile()">
-      <mat-icon>download</mat-icon>
-      {{ 'download' | transloco }}
-    </button>
-  }
+      @if (hasDocument()) {
+        <button mat-icon-button [matTooltip]="'add file' | transloco" (click)="onOpenFilePrompt()">
+          <mat-icon>add</mat-icon>
+        </button>
+
+        <button mat-icon-button [matTooltip]="'download' | transloco" (click)="onDownloadFile()">
+          <mat-icon>download</mat-icon>
+        </button>
+      }
 
-  <button mat-button color="primary" (click)="onOpenAbout()">
-    <mat-icon>info</mat-icon>
-    {{ 'about.link' | transloco }}
-  </button>
+      <button mat-icon-button [matMenuTriggerFor]="moreMenu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #moreMenu="matMenu">
+        <button mat-menu-item (click)="onOpenAbout()">
+          <mat-icon>info</mat-icon>
+          {{ 'about.link' | transloco }}
+        </button>
+      </mat-menu>
+    </div>
+  </mat-toolbar>
 
   @if (isProcessing()) {
     <mat-progress-bar mode="indeterminate" />
   }
 </header>
 
-@if (canDownload()) {
+@if (hasDocument()) {
   <div class="actions">
-    <button mat-mini-fab (click)="onOpenFilePrompt()">
-      <mat-icon>attach_file</mat-icon>
+    <button mat-mini-fab [matTooltip]="'add file' | transloco" (click)="onOpenFilePrompt()">
+      <mat-icon>add</mat-icon>
     </button>
 
-    <button mat-fab color="primary" (click)="onDownloadFile()">
+    <button mat-fab color="primary" [matTooltip]="'download' | transloco" (click)="onDownloadFile()">
       <mat-icon>download</mat-icon>
     </button>
   </div>

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -9,8 +9,14 @@ footer {
   flex: 0 1 auto;
   align-items: center;
   justify-content: space-between;
+}
 
-  margin: 1rem;
+.end {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
 }
 
 mat-progress-bar {

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -4,10 +4,13 @@ import {
   computed,
   inject,
 } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { UploadService } from '@app/services/upload.service';
@@ -22,10 +25,13 @@ import { AboutComponent } from '@app/components/about/about.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatIconModule,
     MatButtonModule,
     MatDialogModule,
+    MatIconModule,
+    MatMenuModule,
     MatProgressBarModule,
+    MatToolbarModule,
+    MatTooltipModule,
     TranslocoModule,
   ],
 })
@@ -36,7 +42,7 @@ export class HeaderComponent {
   private readonly documentService = inject(DocumentService);
 
   readonly isProcessing = this.previewService.isProcessing;
-  readonly canDownload = computed(() => {
+  readonly hasDocument = computed(() => {
     const document = this.documentService.documentBuffer();
     return !!document;
   });

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -7,6 +7,7 @@
   "close": "schließen",
   "drop here": "Wirf hier deine PDF Dateien herein",
   "pick file": "PDF-Datei auswählen",
+  "add file": "PDF-Datei hinzufügen",
   "download": "Herunterladen",
   "github link": "PDF-Tools auf github"
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -7,6 +7,7 @@
   "close": "close",
   "drop here": "Drop in some PDF-Files",
   "pick file": "Pick a PDF-File",
+  "add file": "Add a PDF-File",
   "download": "Download",
   "github link": "PDF-Tools on github"
 }