ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Added some layers

Browse Source
This commit is contained in:
Zakary Timson
2019-08-23 16:27:45 -04:00
parent a019278d38
commit 110c841d9d
7 changed files with 74 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/palette/palette.component.ts
View File

@ -6,7 +6,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
styleUrls: ['palette.component.scss']
})
export class PaletteComponent implements OnInit {
@Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00'];
@Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
@Output() selectedChange = new EventEmitter<string>();

52
src/app/components/toolbar/toolbar.component.html
View File

@ -4,31 +4,53 @@
</button>
<small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto">
<div *ngFor="let item of menuItems; let i = index" class="d-inline mx-1">
<ng-container *ngIf="i <= maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item}"></ng-container>
<ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i < maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'icon'}"></ng-container>
</ng-container>
</div>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="menu">
</ng-container>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<mat-menu #overflowMenu="matMenu">
<ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i > maxMenuItems">
<button mat-menu-item>
<mat-icon>{{item.icon}}</mat-icon>
{{item.name}}
</button>
<ng-container *ngIf="i >= maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'menu'}"></ng-container>
</ng-container>
</ng-container>
</mat-menu>
</div>
</mat-toolbar>
<ng-template #menuItem let-item>
<ng-container>
<button mat-icon-button [ngClass]="{'selected': item?.enabled}" class="ml-1" (click)="clickWrapper(item)">
<mat-icon>{{item?.icon}}</mat-icon>
<ng-template #menuItem let-item let-mode="mode">
<ng-container *ngIf="mode == 'icon' && !item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matTooltip]="item.name">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button>
</ng-container>
<ng-container *ngIf="mode == 'menu' && !item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button>
</ng-container>
<ng-container *ngIf="mode == 'icon' && item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container>
</ng-container>
</mat-menu>
</ng-container>
<ng-container *ngIf="mode == 'menu' && item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container>
</ng-container>
</mat-menu>
</ng-container>
</ng-template>

2
src/app/components/toolbar/toolbar.component.ts
View File

@ -1,5 +1,5 @@
import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core";
import {ToolbarItem} from "./toolbarItem";
import {ToolbarItem} from "../../models/toolbarItem";
import {version} from '../../../../package.json';
@Component({

11
src/app/components/toolbar/toolbarItem.ts
View File

@ -1,11 +0,0 @@
export interface ToolbarItem {
name: string;
icon: string;
hidden?: boolean;
toggle?: boolean;
individualToggle?: boolean;
click?: () => void;
enabled?: boolean;
onEnabled?: () => void;
onDisabled?: () => void;
}