diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html index 6a1ec63..b0b8c1e 100644 --- a/src/app/components/toolbar/toolbar.component.html +++ b/src/app/components/toolbar/toolbar.component.html @@ -4,18 +4,18 @@ {{version}}
- + - + - - + - + diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts index 9616c5f..4c72db8 100644 --- a/src/app/components/toolbar/toolbar.component.ts +++ b/src/app/components/toolbar/toolbar.component.ts @@ -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 {version} from '../../../../package.json'; @@ -7,17 +7,22 @@ import {version} from '../../../../package.json'; templateUrl: 'toolbar.component.html', styleUrls: ['toolbar.component.scss'] }) -export class ToolbarComponent implements AfterViewInit { +export class ToolbarComponent implements OnInit, AfterViewInit { @Input() menuItems: ToolbarItem[]; @Output() menuItemsChange = new EventEmitter(); readonly version = version; + displayMenuItems: ToolbarItem[]; maxMenuItems = 0; constructor() { } + ngOnInit() { + this.displayMenuItems = this.menuItems.filter(item => !item.hidden); + } + @HostListener('window:resize', ['$event']) ngAfterViewInit() { 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; - this.menuItemsChange.emit(this.menuItems); + this.menuItemsChange.emit(this.displayMenuItems); if(item.enabled) { if(item.onEnabled) item.onEnabled();