added table overview and the base for a collapsing navbar
FlayInAHook
4 years ago
parent
52973b9ae4
commit
38efafa60f
@ -0,0 +1,16 @@
|
||||
<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
|
||||
[ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
|
||||
class="menu-list-item">
|
||||
<mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
|
||||
{{item.displayName}}
|
||||
<span fxFlex *ngIf="item.children && item.children.length">
|
||||
<span fxFlex></span>
|
||||
<mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
|
||||
expand_more
|
||||
</mat-icon>
|
||||
</span>
|
||||
</a>
|
||||
<div *ngIf="expanded">
|
||||
<app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1">
|
||||
</app-menu-list-item>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
/*@import '../theme';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
.mat-list-item.active {
|
||||
background-color: mat-color($app-primary, 50);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
>.mat-list-item:not(.expanded) {
|
||||
background-color: mat-color($app-primary, 100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-list-item {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
||||
.routeIcon {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}*/
|
||||
@ -0,0 +1,54 @@
|
||||
import {Component, HostBinding, Input, OnInit} from '@angular/core';
|
||||
import {NavItem} from './nav-item';
|
||||
import {Router} from '@angular/router';
|
||||
import {NavService} from './nav.service';
|
||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-list-item',
|
||||
templateUrl: './menu-list-item.component.html',
|
||||
styleUrls: ['./menu-list-item.component.scss'],
|
||||
animations: [
|
||||
trigger('indicatorRotate', [
|
||||
state('collapsed', style({transform: 'rotate(0deg)'})),
|
||||
state('expanded', style({transform: 'rotate(180deg)'})),
|
||||
transition('expanded <=> collapsed',
|
||||
animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
|
||||
),
|
||||
])
|
||||
]
|
||||
})
|
||||
export class MenuListItemComponent implements OnInit {
|
||||
expanded: boolean = false;
|
||||
@HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
|
||||
@Input() item: NavItem;
|
||||
@Input() depth: number;
|
||||
|
||||
constructor(public navService: NavService,
|
||||
public router: Router) {
|
||||
if (this.depth === undefined) {
|
||||
this.depth = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.navService.currentUrl.subscribe((url: string) => {
|
||||
if (this.item.route && url) {
|
||||
// console.log(`Checking '/${this.item.route}' against '${url}'`);
|
||||
this.expanded = url.indexOf(`/${this.item.route}`) === 0;
|
||||
this.ariaExpanded = this.expanded;
|
||||
// console.log(`${this.item.route} is expanded: ${this.expanded}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onItemSelected(item: NavItem) {
|
||||
if (!item.children || !item.children.length) {
|
||||
this.router.navigate([item.route]);
|
||||
this.navService.closeNav();
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
export interface NavItem {
|
||||
displayName: string;
|
||||
disabled?: boolean;
|
||||
iconName: string;
|
||||
route?: string;
|
||||
children?: NavItem[];
|
||||
}
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
import {Event, NavigationEnd, Router} from '@angular/router';
|
||||
import {BehaviorSubject} from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class NavService {
|
||||
public appDrawer: any;
|
||||
public currentUrl = new BehaviorSubject<string>(undefined);
|
||||
|
||||
constructor(private router: Router) {
|
||||
this.router.events.subscribe((event: Event) => {
|
||||
if (event instanceof NavigationEnd) {
|
||||
this.currentUrl.next(event.urlAfterRedirects);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public closeNav() {
|
||||
this.appDrawer.close();
|
||||
}
|
||||
|
||||
public openNav() {
|
||||
this.appDrawer.open();
|
||||
}
|
||||
}
|
||||
@ -1 +1,27 @@
|
||||
<p>table-overview works!</p>
|
||||
|
||||
<div class="grid-list-spacer">
|
||||
<div class="big-list">
|
||||
<mat-grid-list class="big-list" cols="2" rowHeight="3:1">
|
||||
<mat-grid-tile routerLink = "/table/bikes">Lastenräder</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/participants">Beteiligte</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/lendingStations">Ausleihstationen</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/lendingStations">Tabelle 4</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div>
|
||||
<mat-grid-list cols="4" rowHeight="30px">
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 5</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 7</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 8</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 9</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 10</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 11</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 12</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 13</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 14</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 15</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 16</mat-grid-tile>
|
||||
<mat-grid-tile routerLink = "/table/bikes">Tabelle 17</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
mat-grid-tile {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.grid-list-spacer{
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.big-list{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
Loading…
Reference in New Issue