Merge remote-tracking branch 'origin/master'
FlayInAHook
4 years ago
commit
21d185ff79
@ -1,15 +0,0 @@
|
||||
<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}" class="menu-list-item">
|
||||
<span (click)="onItemSelected(item)">
|
||||
<mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
|
||||
{{item.displayName}}
|
||||
</span>
|
||||
<span fxFlex *ngIf="item.children && item.children.length" (click)="expand(item)">
|
||||
<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>
|
||||
@ -1,33 +0,0 @@
|
||||
@import '../../../theme';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
.mat-list-item.active {
|
||||
//background-color: mat-color($dark-primary, 50);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
>.mat-list-item:not(.expanded) {
|
||||
//background-color: mat-color($dark-primary, 100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-list-item {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
||||
.routeIcon {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
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;
|
||||
}*/
|
||||
|
||||
this.router.navigate([item.route]);
|
||||
this.navService.closeNav();
|
||||
}
|
||||
|
||||
expand(item: NavItem) {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export interface NavItem {
|
||||
displayName: string;
|
||||
disabled?: boolean;
|
||||
iconName: string;
|
||||
route?: string;
|
||||
children?: NavItem[];
|
||||
}
|
||||
|
||||
@ -1,12 +1,34 @@
|
||||
mat-grid-tile {
|
||||
cursor: pointer;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.grid-list-spacer {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.big-list {
|
||||
margin-bottom: 30px;
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.link-box {
|
||||
flex-basis: 50%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.text-wrapper {
|
||||
padding: 1.5em 3em;
|
||||
}
|
||||
}
|
||||
.banner-box {
|
||||
flex-basis: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
.center-text {
|
||||
margin: 0.5em;
|
||||
position: absolute;
|
||||
word-break: break-word;
|
||||
color: white;
|
||||
z-index: 5;
|
||||
}
|
||||
.banner-img-box {
|
||||
height: 100%;
|
||||
filter: blur(2px);
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
|
||||
export const tableLinks = [
|
||||
{
|
||||
displayName: 'Lastenräder',
|
||||
iconName: 'directions_bike',
|
||||
route: '/table/bikes'
|
||||
},
|
||||
{
|
||||
displayName: 'Aktive',
|
||||
iconName: 'directions_run',
|
||||
route: '/table/participants'
|
||||
},
|
||||
{
|
||||
displayName: 'Standorte',
|
||||
iconName: 'location_on',
|
||||
route: '/table/lendingStations'
|
||||
},
|
||||
{
|
||||
displayName: 'Personen',
|
||||
iconName: 'person',
|
||||
route: '/table/persons'
|
||||
},
|
||||
{
|
||||
displayName: 'Kontaktinformationen',
|
||||
iconName: 'contact_page',
|
||||
route: '/table/contactInformation'
|
||||
},
|
||||
{
|
||||
displayName: 'Zeitscheiben',
|
||||
iconName: 'access_time',
|
||||
route: '/table/timeFrames'
|
||||
},
|
||||
{
|
||||
displayName: 'Lastenfahrrad-Eventtypen',
|
||||
iconName: 'build',
|
||||
route: '/table/bikeEventTypes'
|
||||
},
|
||||
{
|
||||
displayName: 'Lastenfahrrad-Events',
|
||||
iconName: 'event',
|
||||
route: '/table/bikeEvents'
|
||||
},
|
||||
{
|
||||
displayName: 'Equipmenttypen',
|
||||
iconName: 'toys',
|
||||
route: '/table/equipmentTypes'
|
||||
},
|
||||
{
|
||||
displayName: 'Equipment',
|
||||
iconName: 'battery_full',
|
||||
route: '/table/equipments'
|
||||
},
|
||||
{
|
||||
displayName: 'Engagementypen',
|
||||
iconName: 'track_changes',
|
||||
route: '/table/engagementTypes'
|
||||
},
|
||||
{
|
||||
displayName: 'Engagements',
|
||||
iconName: 'update',
|
||||
route: '/table/engagements'
|
||||
},
|
||||
{
|
||||
displayName: 'Organisationen',
|
||||
iconName: 'business',
|
||||
route: '/table/organisations'
|
||||
},
|
||||
{
|
||||
displayName: 'Anbieter',
|
||||
iconName: 'people',
|
||||
route: '/table/providers'
|
||||
},
|
||||
{
|
||||
displayName: 'Workshops',
|
||||
iconName: 'school',
|
||||
route: '/table/workshops'
|
||||
},
|
||||
{
|
||||
displayName: 'Workshoptypen',
|
||||
iconName: 'multiline_chart',
|
||||
route: '/table/workshopTypes'
|
||||
},
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue