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