button icons

src/app/modules/shows/new/new.component.html

@@ -1,5 +1,5 @@
 <div>
-  <app-card>
+  <app-card closeLink="../">
     <h1>Neue Veranstaltung</h1>
 
     <div [formGroup]="form" class="split">
@@ -23,8 +23,7 @@
     </div>
 
     <app-button-row>
-      <button (click)="onSave()" color="primary" mat-flat-button>Anlegen</button>
-      <button mat-button routerLink="/show">Abbrechen</button>
+      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
     </app-button-row>
   </app-card>
 </div>

src/app/modules/shows/new/new.component.ts

@@ -5,6 +5,7 @@ import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
 
 @Component({
   selector: 'app-new',
@@ -16,6 +17,7 @@ export class NewComponent implements OnInit {
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
   public form: FormGroup;
+  public faSave = faSave;
 
   constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
     this.shows$ = showDataService.list$();

src/app/modules/shows/show/show.component.html

@@ -22,12 +22,13 @@
                   [songs]="songs"></app-add-song>
 
     <app-button-row>
-      <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>
-      <button (click)="onArchive(false)" *ngIf="show.archived" mat-button>Wiederherstellen</button>
-      <button (click)="onPublish(true)" *ngIf="!show.published" mat-button>Veröffentlichen</button>
-      <button (click)="onPublish(false)" *ngIf="show.published" mat-button>Veröffentlichung zurückziehen</button>
+      <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">Archivieren</app-button>
+      <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">Wiederherstellen</app-button>
+      <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">Veröffentlichen</app-button>
+      <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">Veröffentlichung zurückziehen
+      </app-button>
 
-      <button (click)="onDownload()" mat-button>Herunterladen</button>
+      <app-button (click)="onDownload()" [icon]="faDownload">Herunterladen</app-button>
 
     </app-button-row>
   </app-card>

src/app/modules/shows/show/show.component.ts

@@ -9,6 +9,11 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
+import {faBox} from '@fortawesome/free-solid-svg-icons/faBox';
+import {faBoxOpen} from '@fortawesome/free-solid-svg-icons/faBoxOpen';
+import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import {faLock} from '@fortawesome/free-solid-svg-icons/faLock';
+import {faFileDownload} from '@fortawesome/free-solid-svg-icons/faFileDownload';
 
 @Component({
   selector: 'app-show',
@@ -22,6 +27,12 @@ export class ShowComponent implements OnInit {
   public showId: string;
   public showText: boolean;
 
+  public faBox = faBox;
+  public faBoxOpen = faBoxOpen;
+  public faPublish = faExternalLinkAlt;
+  public faUnpublish = faLock;
+  public faDownload = faFileDownload;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private showService: ShowService,

src/app/modules/shows/shows.module.ts

@@ -24,6 +24,7 @@ import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
+import {ButtonModule} from '../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -49,6 +50,7 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
     SongTextModule,
     NgxMatSelectSearchModule,
     AddSongModule,
+    ButtonModule,
   ]
 })
 export class ShowsModule {

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -81,11 +81,6 @@
         <input formControlName="legalOwnerId" matInput>
       </mat-form-field>
 
-      <mat-form-field appearance="outline">
-        <mat-label>Lizenznummer</mat-label>
-        <input formControlName="legalLicenseId" matInput>
-      </mat-form-field>
-
       <mat-form-field appearance="outline">
         <mat-label>Künstler</mat-label>
         <input formControlName="artist" matInput>
@@ -110,7 +105,7 @@
   </form>
 
   <app-button-row>
-    <button (click)="onSave()" mat-button>Speichern</button>
+    <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
   </app-button-row>
 </app-card>
 

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -9,6 +9,7 @@ import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
 
 @Component({
   selector: 'app-edit-song',
@@ -26,6 +27,7 @@ export class EditSongComponent implements OnInit {
   public flags: string[] = [];
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
   public faRemove = faTimesCircle;
+  public faSave = faSave;
 
   constructor(
     private activatedRoute: ActivatedRoute,

src/app/modules/songs/song/edit/edit.module.ts

@@ -20,6 +20,7 @@ import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translat
 import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
+import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -45,6 +46,7 @@ import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-tr
     MatChipsModule,
     FontAwesomeModule,
     StatusTranslaterModule,
+    ButtonModule,
 
   ]
 })

src/app/modules/songs/song/song.component.html

@@ -29,7 +29,7 @@
     </div>
 
     <app-button-row>
-      <button *appRole="['contributor']" mat-button routerLink="edit">Bearbeiten</button>
+      <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten</app-button>
     </app-button-row>
 
   </app-card>

src/app/modules/songs/song/song.component.ts

@@ -8,6 +8,7 @@ import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
 import {User} from '../../../services/user/user';
+import {faEdit} from '@fortawesome/free-solid-svg-icons/faEdit';
 
 @Component({
   selector: 'app-song',
@@ -18,6 +19,7 @@ export class SongComponent implements OnInit {
   public song$: Observable<Song>;
   public files$: Observable<File[]>;
   public user$: Observable<User>;
+  public faEdit = faEdit;
 
   constructor(
     private activatedRoute: ActivatedRoute,

src/app/modules/songs/song/song.module.ts

@@ -11,6 +11,7 @@ import {SongTextModule} from '../../../widget-modules/components/song-text/song-
 import {MatChipsModule} from '@angular/material/chips';
 import {RoleModule} from '../../../services/user/role.module';
 import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
+import {ButtonModule} from '../../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-trans
     MatChipsModule,
     RoleModule,
     StatusTranslaterModule,
+    ButtonModule,
   ]
 })
 export class SongModule {

src/app/modules/user/info/info.component.html

@@ -13,7 +13,7 @@
   </mat-form-field>
 
   <app-button-row>
-    <button mat-button routerLink="../logout">Abmelden</button>
+    <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
   </app-button-row>
 </app-card>
 

src/app/modules/user/info/info.component.ts

@@ -3,6 +3,7 @@ import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
 
 @Component({
   selector: 'app-info',
@@ -11,6 +12,7 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 })
 export class InfoComponent implements OnInit {
   public user$: Observable<User>;
+  public faSignOut = faSignOutAlt;
 
   constructor(private userService: UserService) {
   }

src/app/modules/user/info/role.pipe.ts

@@ -1,5 +1,4 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {roles} from '../../../services/user/roles';
 
 
 @Pipe({
@@ -7,7 +6,7 @@ import {roles} from '../../../services/user/roles';
 })
 export class RolePipe implements PipeTransform {
 
-  transform(role: roles): string {
+  transform(role: string): string {
     switch (role) {
       case 'contributor':
         return 'Mitarbeiter';

src/app/modules/user/login/login.component.html

@@ -10,9 +10,9 @@
       <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password">
     </mat-form-field>
     <app-button-row>
-      <button (click)="onLogin()" mat-button>Anmelden</button>
-      <button mat-button routerLink="/user/password">Passwort zurücksetzen</button>
-      <button mat-button routerLink="/user/new">neuen Benutzer anlegen</button>
+      <app-button (click)="onLogin()" [icon]="faSignIn">Anmelden</app-button>
+      <app-button [icon]="faNewPassword" routerLink="/user/password">Passwort zurücksetzen</app-button>
+      <app-button [icon]="faNewUser" routerLink="/user/new">neuen Benutzer anlegen</app-button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

src/app/modules/user/login/login.component.ts

@@ -2,6 +2,9 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
+import {faSignInAlt} from '@fortawesome/free-solid-svg-icons/faSignInAlt';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 
 @Component({
   selector: 'app-login',
@@ -11,6 +14,9 @@ import {UserService} from '../../../services/user/user.service';
 export class LoginComponent implements OnInit {
   public form: FormGroup;
   public errorMessage: string;
+  public faSignIn = faSignInAlt;
+  public faNewPassword = faWindowRestore;
+  public faNewUser = faUserPlus;
 
   constructor(private userService: UserService, private router: Router) {
   }

src/app/modules/user/new/new.component.html

@@ -13,6 +13,6 @@
   </mat-form-field>
 
   <app-button-row>
-    <button (click)="onCreate()" mat-button>Benutzer anlegen</button>
+    <app-button (click)="onCreate()" [icon]="faNewUser">Benutzer anlegen</app-button>
   </app-button-row>
 </app-card>

src/app/modules/user/new/new.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 
 @Component({
   selector: 'app-new',
@@ -9,6 +10,7 @@ import {UserService} from '../../../services/user/user.service';
 })
 export class NewComponent implements OnInit {
   public form: FormGroup;
+  public faNewUser = faUserPlus;
 
   constructor(private fb: FormBuilder, private userService: UserService) {
   }

src/app/modules/user/password/password.component.html

@@ -6,7 +6,7 @@
     </mat-form-field>
 
     <app-button-row>
-      <button (click)="onResetPassword()" mat-button>neues Passwort anfordern</button>
+      <app-button (click)="onResetPassword()" [icon]="faNewPassword">neues Passwort anfordern</app-button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

src/app/modules/user/password/password.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
 
 @Component({
   selector: 'app-password',
@@ -11,6 +12,7 @@ import {UserService} from '../../../services/user/user.service';
 export class PasswordComponent implements OnInit {
   public form: FormGroup;
   public errorMessage: string;
+  public faNewPassword = faWindowRestore;
 
   constructor(public userService: UserService, private router: Router) {
   }

src/app/modules/user/user.module.ts

@@ -19,6 +19,7 @@ import {UsersComponent} from './info/users/users.component';
 import {RoleModule} from '../../services/user/role.module';
 import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
+import {ButtonModule} from '../../widget-modules/components/button/button.module';
 
 
 @NgModule({
@@ -35,6 +36,7 @@ import {NewComponent} from './new/new.component';
     MatSelectModule,
     FormsModule,
     RoleModule,
+    ButtonModule,
 
 
   ]