Some menu fixes

projects/common/src/fm/actions/app-common.actions.ts

@@ -48,6 +48,8 @@ export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
 
 export const TOGGLEMENU = '[AppCommon] ToggleMenu';
 
+export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
+
 export class InitUser implements Action {
   readonly type = INITUSER;
 
@@ -221,6 +223,12 @@ export class ToggleMenu implements Action {
   constructor() { }
 }
 
+export class SetMenuVisible implements Action {
+  readonly type = SETMENUVISIBLE;
+
+  constructor(public visible:boolean) { }
+}
+  
 
 export type Actions = OpenModal
   | InitRoot
@@ -249,4 +257,5 @@ export type Actions = OpenModal
   | TaskEndEvent
   | TaskErrorEvent
   | DeviceUpdateEvent
-  | ToggleMenu;
+  | ToggleMenu
+  | SetMenuVisible;

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

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

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

@@ -70,3 +70,8 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
   color: #ffffff;
 }
 
+.menu .side-panel {
+  z-index: 100;
+  background-color: rgb(245,245,245);
+}
+

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

@@ -132,6 +132,10 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new commonActions.Escape(false,true));
   }  
 
+  handleStopBubble(event: MouseEvent) {
+    event.stopPropagation();
+  }  
+
   handleToggleMenu(event) {
     this.store.dispatch(new commonActions.ToggleMenu());
   }

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,4 +1,4 @@
-<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
+<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
   <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
     <i class="fa fa-chevron-left" aria-hidden="true"></i>
   </div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -96,5 +96,18 @@ div.resizegrip > span {
     left:-24rem;
     height:100%;
   }  
-
+}
+
+
+.side-panel.left {
+  top:0px;
+  width: 22rem;
+  height:100%;
+  left:0px;
+}
+
+.side-panel.left.hidden {
+  width: 22rem;
+  left:-24rem;
+  height:100%;
 }  

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,6 +12,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
+  @Input() public left: boolean = false;
   @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
@@ -32,7 +33,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   setTop() {
-    this.mobile = this.checkMobile();
+    this.mobile = this.checkMobile() && ! this.left;
     this.resizeTop = this.mobile?50:0;
     this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
   }

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

@@ -75,6 +75,13 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
     case appCommonActions.TOGGLEMENU: {
       return tassign(state, { menuVisible: !state.menuVisible });
     }
+    case appCommonActions.ESCAPE: {
+      return tassign(state, { menuVisible: false });
+    }
+    case appCommonActions.SETMENUVISIBLE: {
+      let a = action as appCommonActions.SetMenuVisible;
+      return tassign(state, { menuVisible: a.visible });
+    }
     default: {
       return state;
     }