benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

show component

Browse Source
This commit is contained in:
smuddyx
2020-03-08 09:45:05 +01:00
committed by smuddy
parent d68cd590ad
commit bb0676a428
53 changed files with 344 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/widget-modules/components/application-frame/application-frame.module.ts Normal file
View File

@@ -0,0 +1,26 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NavigationComponent} from './navigation/navigation.component';
import {RouterModule} from '@angular/router';
import {FilterComponent} from './navigation/filter/filter.component';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {LinkComponent} from './navigation/link/link.component';
@NgModule({
declarations: [
NavigationComponent,
FilterComponent,
LinkComponent
],
imports: [
CommonModule,
RouterModule,
FontAwesomeModule
],
exports: [
NavigationComponent
]
})
export class ApplicationFrameModule {
}

1
src/app/widget-modules/components/application-frame/navigation/filter/filter.component.html Normal file
View File

@@ -0,0 +1 @@
<input (input)="onInputChange($event.target.value)" placeholder="Suche">

16
src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less Normal file
View File

@@ -0,0 +1,16 @@
@import "../../../../../../styles/styles";
input {
font-size: 16px;
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
color: #888;
margin-right: 20px;
&:focus {
outline: none;
border-bottom: 2px solid @primary-color;
margin-bottom: -1px;
}
}

25
src/app/widget-modules/components/application-frame/navigation/filter/filter.component.spec.ts Normal file
View File

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

21
src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts Normal file
View File

@@ -0,0 +1,21 @@
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.less']
})
export class FilterComponent {
constructor(private router: Router) {
}
public onInputChange(text: string): void {
const route = text
? this.router.createUrlTree(['songs'], {queryParams: {q: text}})
: this.router.createUrlTree(['songs']);
this.router.navigateByUrl(route);
}
}

3
src/app/widget-modules/components/application-frame/navigation/link/link.component.html Normal file
View File

@@ -0,0 +1,3 @@
<a [routerLink]="link" href="#" routerLinkActive="active">
<fa-icon [icon]="icon"></fa-icon>
<span class="link-text">&nbsp;&nbsp;{{text}}</span></a>

43
src/app/widget-modules/components/application-frame/navigation/link/link.component.less Normal file
View File

@@ -0,0 +1,43 @@
@import "../../../../../../styles/styles";
a {
display: block;
height: 60px;
color: @navigation-link-color;
font-size: 20px;
font-weight: bold;
text-decoration: none;
padding: 20px;
box-sizing: border-box;
background: transparent;
transition: @transition;
fa-icon {
display: inline-block;
transform: scale(1);
transition: @transition;
}
@media screen and (max-width: 860px) {
.link-text {
display: none;
}
}
&:hover {
background: #eee;
fa-icon {
transform: scale(1.2);
}
}
&.active {
background: @primary-color;
color: #fff;
fa-icon {
transform: scale(1.3);
}
}
}

25
src/app/widget-modules/components/application-frame/navigation/link/link.component.spec.ts Normal file
View File

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

13
src/app/widget-modules/components/application-frame/navigation/link/link.component.ts Normal file
View File

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

12
src/app/widget-modules/components/application-frame/navigation/navigation.component.html Normal file
View File

@@ -0,0 +1,12 @@
<nav class="head">
<div class="links">
<app-link [icon]="faSongs" link="/songs" text="Lieder"></app-link>
<app-link [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
<app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
</div>
<div class="actions">
<app-filter></app-filter>
</div>
</nav>

32
src/app/widget-modules/components/application-frame/navigation/navigation.component.less Normal file
View File

@@ -0,0 +1,32 @@
@import "../../../../../styles/styles";
@import "../../../../../styles/shadow";
nav {
&.head {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: @navigation-background;
z-index: 1;
.card-3;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
}
.actions {
display: flex;
height: 100%;
align-items: center;
}
.links {
display: flex;
}

25
src/app/widget-modules/components/application-frame/navigation/navigation.component.spec.ts Normal file
View File

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

23
src/app/widget-modules/components/application-frame/navigation/navigation.component.ts Normal file
View File

@@ -0,0 +1,23 @@
import {Component, OnInit} from '@angular/core';
import {faMusic} from '@fortawesome/free-solid-svg-icons/faMusic';
import {faPersonBooth} from '@fortawesome/free-solid-svg-icons/faPersonBooth';
import {faUserCog} from '@fortawesome/free-solid-svg-icons/faUserCog';
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.less']
})
export class NavigationComponent implements OnInit {
public faSongs = faMusic;
public faShows = faPersonBooth;
public faUser = faUserCog;
constructor() {
}
ngOnInit() {
}
}

8
src/app/widget-modules/components/list-header/list-header.component.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="header">
<button mat-icon-button>
<fa-icon [icon]="faFilter"></fa-icon>
</button>
<button mat-icon-button routerLink="new">
<fa-icon [icon]="faNew"></fa-icon>
</button>
</div>

11
src/app/widget-modules/components/list-header/list-header.component.less Normal file
View File

@@ -0,0 +1,11 @@
.header {
position: relative;
height: 34px;
margin: 20px 20px -20px 20px;
display: flex;
align-items: center;
justify-content: flex-end;
color: #A6C4F5;
}

25
src/app/widget-modules/components/list-header/list-header.component.spec.ts Normal file
View File

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

23
src/app/widget-modules/components/list-header/list-header.component.ts Normal file
View File

@@ -0,0 +1,23 @@
import {Component, OnInit} from '@angular/core';
import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter';
import {faBars} from '@fortawesome/free-solid-svg-icons/faBars';
import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus';
@Component({
selector: 'app-list-header',
templateUrl: './list-header.component.html',
styleUrls: ['./list-header.component.less']
})
export class ListHeaderComponent implements OnInit {
public faNew = faPlus;
public faFilter = faFilter;
public faMenu = faBars;
constructor() {
}
ngOnInit() {
}
}

21
src/app/widget-modules/components/list-header/list-header.module.ts Normal file
View File

@@ -0,0 +1,21 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ListHeaderComponent} from './list-header.component';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {MatButtonModule} from '@angular/material/button';
import {RouterModule} from '@angular/router';
@NgModule({
declarations: [ListHeaderComponent],
exports: [
ListHeaderComponent
],
imports: [
CommonModule,
FontAwesomeModule,
MatButtonModule,
RouterModule
]
})
export class ListHeaderModule {
}