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

Hide tools with hidden property

Browse Source
This commit is contained in:
Zakary Timson 2019-08-24 12:10:05 -04:00
parent 3c54a3786c
commit 236e9b033e
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,18 @@
</button> </button>
<small class="ml-1 text-muted">{{version}}</small> <small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto"> <div class="ml-auto">
<ng-container *ngFor="let item of menuItems; let i = index"> <ng-container *ngFor="let item of displayMenuItems; let i = index">
<ng-container *ngIf="i < maxMenuItems"> <ng-container *ngIf="i < maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'icon'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'icon'}"></ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu"> <button *ngIf="displayMenuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<mat-menu #overflowMenu="matMenu"> <mat-menu #overflowMenu="matMenu">
<ng-container *ngFor="let item of menuItems; let i = index"> <ng-container *ngFor="let item of displayMenuItems; let i = index">
<ng-container *ngIf="i >= maxMenuItems"> <ng-container *ngIf="i >= maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'menu'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'menu'}"></ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>

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

@ -1,4 +1,4 @@
import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core"; import {AfterViewInit, Component, EventEmitter, HostListener, Input, OnInit, Output,} from "@angular/core";
import {ToolbarItem} from "../../models/toolbarItem"; import {ToolbarItem} from "../../models/toolbarItem";
import {version} from '../../../../package.json'; import {version} from '../../../../package.json';
@ -7,17 +7,22 @@ import {version} from '../../../../package.json';
templateUrl: 'toolbar.component.html', templateUrl: 'toolbar.component.html',
styleUrls: ['toolbar.component.scss'] styleUrls: ['toolbar.component.scss']
}) })
export class ToolbarComponent implements AfterViewInit { export class ToolbarComponent implements OnInit, AfterViewInit {
@Input() menuItems: ToolbarItem[]; @Input() menuItems: ToolbarItem[];
@Output() menuItemsChange = new EventEmitter<ToolbarItem[]>(); @Output() menuItemsChange = new EventEmitter<ToolbarItem[]>();
readonly version = version; readonly version = version;
displayMenuItems: ToolbarItem[];
maxMenuItems = 0; maxMenuItems = 0;
constructor() { } constructor() { }
ngOnInit() {
this.displayMenuItems = this.menuItems.filter(item => !item.hidden);
}
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
ngAfterViewInit() { ngAfterViewInit() {
setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 100) / 75), 1); setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 100) / 75), 1);
@ -33,7 +38,7 @@ export class ToolbarComponent implements AfterViewInit {
} }
item.enabled = !item.enabled; item.enabled = !item.enabled;
this.menuItemsChange.emit(this.menuItems); this.menuItemsChange.emit(this.displayMenuItems);
if(item.enabled) { if(item.enabled) {
if(item.onEnabled) item.onEnabled(); if(item.onEnabled) item.onEnabled();