From 520797a1ed892459e17370094fbe51f6fecc1ef7 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 5 Mar 2020 14:16:04 +0200
Subject: [PATCH] Improve widget fullscreen style.

---
 .../dashboard/dashboard.component.html        |  5 ++-
 .../shared/components/fullscreen.directive.ts | 34 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index d2cd0ec065..95a8ab6e8b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -64,7 +64,10 @@
   <div [ngClass]="dashboardClass" id="gridster-background" style="height: auto; min-height: 100%; display: inline;">
     <gridster #gridster id="gridster-child" [options]="gridsterOpts">
       <gridster-item [item]="widget" class="tb-noselect" *ngFor="let widget of dashboardWidgets">
-        <div tb-fullscreen [fullscreen]="widget.isFullscreen" (fullscreenChanged)="onWidgetFullscreenChanged($event, widget)"
+        <div tb-fullscreen [fullscreen]="widget.isFullscreen"
+             [fullscreenBackgroundStyle]="dashboardStyle"
+             [fullscreenBackgroundImage]="backgroundImage"
+             (fullscreenChanged)="onWidgetFullscreenChanged($event, widget)"
              fxLayout="column"
              class="tb-widget"
              [ngClass]="{
diff --git a/ui-ngx/src/app/shared/components/fullscreen.directive.ts b/ui-ngx/src/app/shared/components/fullscreen.directive.ts
index 8768e70d85..87214cc317 100644
--- a/ui-ngx/src/app/shared/components/fullscreen.directive.ts
+++ b/ui-ngx/src/app/shared/components/fullscreen.directive.ts
@@ -19,12 +19,13 @@ import {
   ElementRef,
   EventEmitter,
   Input, OnChanges, OnDestroy,
-  Output, SimpleChanges,
+  Output, Renderer2, SecurityContext, SimpleChanges,
   ViewContainerRef
 } from '@angular/core';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 @Directive({
   selector: '[tb-fullscreen]'
@@ -42,10 +43,18 @@ export class FullscreenDirective implements OnChanges, OnDestroy {
   @Input()
   fullscreenElement: HTMLElement;
 
+  @Input()
+  fullscreenBackgroundStyle: {[klass: string]: any};
+
+  @Input()
+  fullscreenBackgroundImage: SafeStyle | string;
+
   @Output()
   fullscreenChanged = new EventEmitter<boolean>();
 
   constructor(public elementRef: ElementRef,
+              private renderer: Renderer2,
+              private sanitizer: DomSanitizer,
               private viewContainerRef: ViewContainerRef,
               private overlay: Overlay) {
   }
@@ -92,10 +101,33 @@ export class FullscreenDirective implements OnChanges, OnDestroy {
 
     this.overlayRef = this.overlay.create(config);
     this.overlayRef.attach(new EmptyPortal());
+    if (this.fullscreenBackgroundStyle) {
+      for (const key of Object.keys(this.fullscreenBackgroundStyle)) {
+        this.setStyle(this.overlayRef.overlayElement, key, this.fullscreenBackgroundStyle[key]);
+      }
+    }
+    if (this.fullscreenBackgroundImage) {
+      this.setStyle(this.overlayRef.overlayElement, 'backgroundImage', this.fullscreenBackgroundImage);
+    }
     this.overlayRef.overlayElement.appendChild( targetElement );
     this.fullscreenChanged.emit(true);
   }
 
+  private setStyle(el: any, nameAndUnit: string, value: any): void {
+    const [name, unit] = nameAndUnit.split('.');
+    let renderValue: string|null =
+      this.sanitizer.sanitize(SecurityContext.STYLE, value as{} | string);
+    if (renderValue != null) {
+      renderValue = renderValue.toString();
+    }
+    renderValue = renderValue != null && unit ? `${renderValue}${unit}` : renderValue;
+    if (renderValue != null) {
+      this.renderer.setStyle(this.overlayRef.overlayElement, name, renderValue);
+    } else {
+      this.renderer.removeStyle(this.overlayRef.overlayElement, name);
+    }
+  }
+
   exitFullscreen() {
     const targetElement: HTMLElement = this.fullscreenElement || this.elementRef.nativeElement;
     if (this.parentElement) {