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>
+      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
-      <button mat-button routerLink="/show">Abbrechen</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>
+      <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">Archivieren</app-button>
-      <button (click)="onArchive(false)" *ngIf="show.archived" mat-button>Wiederherstellen</button>
+      <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">Wiederherstellen</app-button>
-      <button (click)="onPublish(true)" *ngIf="!show.published" mat-button>Veröffentlichen</button>
+      <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">Veröffentlichen</app-button>
-      <button (click)="onPublish(false)" *ngIf="show.published" mat-button>Veröffentlichung zurückziehen</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>
+      <app-button (click)="onLogin()" [icon]="faSignIn">Anmelden</app-button>
-      <button mat-button routerLink="/user/password">Passwort zurücksetzen</button>
+      <app-button [icon]="faNewPassword" routerLink="/user/password">Passwort zurücksetzen</app-button>
-      <button mat-button routerLink="/user/new">neuen Benutzer anlegen</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,
 
 
   ]

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less

@@ -4,13 +4,13 @@ input {
   font-size: 16px;
   background: transparent;
   border: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #888;
   color: #888;
+  transition: all 300ms ease-in-out;
 
   &:focus {
     outline: none;
-    border-bottom: 2px solid @primary-color;
+    border-bottom: 1px solid @primary-color;
-    margin-bottom: -1px;
   }
 
   @media screen and (max-width: 500px) {

src/app/widget-modules/components/button-row/button-row.component.less

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: row-reverse;
   width: 100%;
+  flex-wrap: wrap;
 }

src/app/widget-modules/components/button/button.component.html

@@ -0,0 +1,6 @@
+<button mat-button>
+  <span *ngIf="icon"><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
+  <span class="content">
+    <ng-content></ng-content>
+  </span>
+</button>

src/app/widget-modules/components/button/button.component.less

@@ -0,0 +1,12 @@
+button {
+  color: #373b44;
+  @media screen and (max-width: 860px) {
+    font-size: 30px;
+  }
+}
+
+.content {
+  @media screen and (max-width: 860px) {
+    display: none ;
+  }
+}

src/app/widget-modules/components/button/button.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ButtonComponent} from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ButtonComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widget-modules/components/button/button.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.less']
+})
+export class ButtonComponent {
+  @Input() icon: IconProp;
+
+}

src/app/widget-modules/components/button/button.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ButtonComponent} from './button.component';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {MatButtonModule} from '@angular/material/button';
+
+
+@NgModule({
+  declarations: [ButtonComponent],
+  exports: [
+    ButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    FontAwesomeModule,
+    MatButtonModule
+  ]
+})
+export class ButtonModule {
+}