Aw5812

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

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

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

@@ -15,7 +15,7 @@
 }
 
 .side-panel.collapsed {
-  left:-22rem;
+  left:-44rem;
 }
 
 .arrow {
@@ -75,8 +75,7 @@ div.resizegrip > span {
 }
 
 .resizeable .resizegrip {
-  display:block;
-  
+  display:block;  
 }
 
 .resizeable .content {
@@ -94,9 +93,16 @@ div.resizegrip > span {
 
   .side-panel.hidden {
     width: 22rem;
-    left:-24rem;
+    left:-22rem;
     height:100%;
     top: 0px;
+  }
+  
+  .side-panel.extra-wide {
+    top:0px;
+    width: 44rem;
+    height:100%;
+    left:0px;
   }  
 }
 

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

@@ -3,8 +3,7 @@ import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,Si
 @Component({
   selector: 'fm-side-panel',
   templateUrl: 'side-panel.component.html',
-  styleUrls: ['side-panel.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['side-panel.component.scss']
 })
 
 
@@ -13,7 +12,8 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable = false;
-  @Input() public left = false;  
+  @Input() public left = false;
+  @Input() public extraWide = false;
   @Output() onResize: EventEmitter<number> = new EventEmitter<number>();
   @ViewChild("resizeGrip") elementView: ElementRef;
   public mobile = true;