Hide buttons when no routing to sink
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma 2021-04-12 15:10:29 +02:00
parent cbf805e1ff
commit a6d3b208b0
6 changed files with 42 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<div> <div>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}"> <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span> <span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}"> <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<router-outlet name="app-menu"></router-outlet> <router-outlet name="app-menu"></router-outlet>

View File

@ -1,4 +1,5 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IUser } from '../../models/user'; import { IUser } from '../../models/user';
@ -11,16 +12,25 @@ import * as appActions from '../../actions/app-common.actions';
templateUrl: './app-menu.component.html', templateUrl: './app-menu.component.html',
styleUrls: ['./app-menu.component.scss'] styleUrls: ['./app-menu.component.scss']
}) })
export class AppMenuComponent implements OnInit { export class AppMenuComponent implements OnInit,AfterViewInit {
@Input() user:IUser; @Input() user:IUser;
@Input() showMenu:boolean; @Input() showMenu:boolean;
public noContent: boolean = true;
constructor(private store: Store<appReducers.State>) { } constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
ngOnInit(): void { ngOnInit(): void {
} }
ngAfterViewInit() {
this.route.children.forEach((entry) => {
if(entry.outlet=="app-menu") {
this.noContent=false;
}
});
}
toggle(event:MouseEvent) { toggle(event:MouseEvent) {
event.stopPropagation(); event.stopPropagation();
this.store.dispatch(new appActions.ToggleAppMenu()); this.store.dispatch(new appActions.ToggleAppMenu());

View File

@ -1,5 +1,5 @@
<div> <div>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}"> <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<span i18n-title title="Help"><i class="fas fa-question" aria-hidden="true"></i></span> <span i18n-title title="Help"><i class="fas fa-question" aria-hidden="true"></i></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}"> <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<router-outlet name="help-menu"></router-outlet> <router-outlet name="help-menu"></router-outlet>

View File

@ -1,5 +1,6 @@
import { Input } from '@angular/core'; import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit,AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IUser } from '../../models/user'; import { IUser } from '../../models/user';
import {Store} from '@ngrx/store'; import {Store} from '@ngrx/store';
@ -11,16 +12,25 @@ import * as appActions from '../../actions/app-common.actions';
templateUrl: './help-menu.component.html', templateUrl: './help-menu.component.html',
styleUrls: ['./help-menu.component.scss'] styleUrls: ['./help-menu.component.scss']
}) })
export class HelpMenuComponent implements OnInit { export class HelpMenuComponent implements OnInit, AfterViewInit {
@Input() user:IUser; @Input() user:IUser;
@Input() showMenu:boolean; @Input() showMenu:boolean;
public noContent: boolean = true;
constructor(private store: Store<appReducers.State>) { } constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
ngOnInit(): void { ngOnInit(): void {
} }
ngAfterViewInit() {
this.route.children.forEach((entry) => {
if(entry.outlet=="help-menu") {
this.noContent=false;
}
});
}
toggle(event:MouseEvent) { toggle(event:MouseEvent) {
event.stopPropagation(); event.stopPropagation();
this.store.dispatch(new appActions.ToggleHelpMenu()); this.store.dispatch(new appActions.ToggleHelpMenu());

View File

@ -1,5 +1,5 @@
<div> <div>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}"> <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<span class="unread badge bg-info notification rounded-pill hidden" [ngClass]="{'hidden':unread==0}">{{unread}}</span> <span class="unread badge bg-info notification rounded-pill hidden" [ngClass]="{'hidden':unread==0}">{{unread}}</span>
<span i18n-title title="Notifications"><i class="fas fa-bell" [ngClass]="{'fa-bell-on':unread!=0}" aria-hidden="true"></i></span> <span i18n-title title="Notifications"><i class="fas fa-bell" [ngClass]="{'fa-bell-on':unread!=0}" aria-hidden="true"></i></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}"> <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">

View File

@ -1,5 +1,5 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IUser } from '../../models/user'; import { IUser } from '../../models/user';
import {Store} from '@ngrx/store'; import {Store} from '@ngrx/store';
@ -11,17 +11,26 @@ import * as appActions from '../../actions/app-common.actions';
templateUrl: './notification-menu.component.html', templateUrl: './notification-menu.component.html',
styleUrls: ['./notification-menu.component.scss'] styleUrls: ['./notification-menu.component.scss']
}) })
export class NotificationMenuComponent implements OnInit { export class NotificationMenuComponent implements OnInit,AfterViewInit {
@Input() unread:number; @Input() unread:number;
@Input() user:IUser; @Input() user:IUser;
@Input() showMenu:boolean; @Input() showMenu:boolean;
public noContent: boolean = true;
constructor(private store: Store<appReducers.State>) { } constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
ngOnInit(): void { ngOnInit(): void {
} }
ngAfterViewInit() {
this.route.children.forEach((entry) => {
if(entry.outlet=="notification-menu") {
this.noContent=false;
}
});
}
toggle(event:MouseEvent) { toggle(event:MouseEvent) {
event.stopPropagation(); event.stopPropagation();
this.store.dispatch(new appActions.ToggleNotificationMenu()); this.store.dispatch(new appActions.ToggleNotificationMenu());