Add menu background

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -198,9 +198,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
       }
       this.stateSetCount += 1;
     });
-    // setTimeout(() => {
-    //   this.map.instance.updateSize();
-    // }, 500);
+    setTimeout(() => {
+      this.map.instance.updateSize();
+    }, 500);
   }
 
   handleSearchCollapse(event) {

projects/common/src/fm/common-routing.module.ts

@@ -3,6 +3,7 @@ import {RouterModule} from '@angular/router';
 
 import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
 import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
+import {NavBarGuard} from './services/nav-bar-guard.service';
 import {FullScreenGuard} from './services/full-screen-guard.service';
 import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
 import {NotFoundComponent} from './components/not-found/not-found.component';
@@ -21,16 +22,8 @@ const routes = [
   },
   {
     path: '**', component: NotFoundComponent,
-    data: {
-      title: '404 - Not found',
-      meta: [{name: 'description', content: '404 - Error'}],
-      links: [],
-      // links: [
-      //  { rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
-      //  { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
-      //]
-    },
-  },
+    canActivate: [NavBarGuard]   
+  }
 ];
 
 @NgModule({

projects/common/src/fm/common.module.ts

@@ -29,6 +29,7 @@ import { NotImplementedComponent } from './components/not-implemented/not-implem
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
 import { TimespanComponent } from './components/timespan/timespan.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
+import {MenuBackgroundComponent} from './components/menu-background/menu-background.component';
 import {IEventMessage } from './models/event.message';
 import { IItem, Item } from './models/item';
 import {IItemType} from './models/item.type';
@@ -65,7 +66,8 @@ export {
   commonActions,
   commonReducers,
   IAuthconfigFactory,
-  AuthConfigFactory
+  AuthConfigFactory,
+  MenuBackgroundComponent
 };
 
 @NgModule({
@@ -90,7 +92,8 @@ export {
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
   ],
   exports: [
     NgbModule,
@@ -106,7 +109,8 @@ export {
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
     ]
 })
 export class AppCommonModule {

projects/common/src/fm/components/app/app.component.html

@@ -10,6 +10,7 @@
   <div class="body">
     <router-outlet></router-outlet>
   </div>  
+  <fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
   <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
     <div class="container-fluid">
       <div class="body">

projects/common/src/fm/components/menu-background/menu-background.component.html

@@ -0,0 +1,3 @@
+<div class="menu-background" [ngClass]="{'show':visible}">
+
+</div>

projects/common/src/fm/components/menu-background/menu-background.component.scss

@@ -0,0 +1,17 @@
+.menu-background {
+    display: block;
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity: 0;
+    background-color: #000000;
+    transition: opacity 0s ease-out 1s;
+    pointer-events: none;
+}
+
+.menu-background.show {
+    pointer-events: all;
+    opacity: 0.3;
+}

projects/common/src/fm/components/menu-background/menu-background.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { Store, Action } from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as  commonActions  from '../../actions/app-common.actions';
+
+@Component({
+    selector: 'fm-menu-background',
+    templateUrl: './menu-background.component.html',
+    styleUrls: ['./menu-background.component.scss'],
+})
+export class MenuBackgroundComponent implements OnInit {
+    @Input() visible:boolean = false;
+    constructor(private store: Store<appReducers.State>) { }
+
+    ngOnInit() { }
+
+    handleOnClick(event:MouseEvent) {
+        if(this.visible) {
+            this.store.dispatch(new commonActions.SetMenuVisible(false));
+            event.stopPropagation();
+        }
+    }
+}

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -26,7 +26,7 @@ export const initialState: State = {
   user:null,
   fullScreen: true,
   routeLoading: false,
-  menuVisible: true
+  menuVisible: false
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {

projects/common/src/fm/services/itemtype.service.ts

@@ -33,6 +33,12 @@ export class ItemTypeService {
         return false;
       }
 
+      hasEditor(item: IItem) {
+        let itemType: string = item.itemType;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].editor !== undefined;
+        return false;
+      }
+
       isLayer(item: IItem) {
         let itemType: string = item.itemType;
         return itemType == "vnd.farmmaps.itemtype.geotiff.processed" || itemType == "vnd.farmmaps.itemtype.layer" || itemType == "vnd.farmmaps.itemtype.shape.processed";