From af201cd985df1509f446919515ab2a650c40cb11 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 16 Nov 2017 17:54:57 +0100
Subject: [PATCH] Closes #172 Closes #175

---
 .../Controllers/Api/Ping/PingController.cs    |  3 ++-
 .../pages/graphql/graphql-page.component.scss |  6 ++++-
 .../angular/panel-container.directive.ts      | 25 ++++++++-----------
 .../app/framework/angular/panel.component.ts  |  9 +++----
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/Squidex/Controllers/Api/Ping/PingController.cs b/src/Squidex/Controllers/Api/Ping/PingController.cs
index 6dc65d9c6..730569034 100644
--- a/src/Squidex/Controllers/Api/Ping/PingController.cs
+++ b/src/Squidex/Controllers/Api/Ping/PingController.cs
@@ -25,6 +25,7 @@ namespace Squidex.Controllers.Api.Ping
         /// <summary>
         /// Get ping status.
         /// </summary>
+        /// <param name="app">The name of the app.</param>
         /// <returns>
         /// 204 => Service ping successful.
         /// </returns>
@@ -34,7 +35,7 @@ namespace Squidex.Controllers.Api.Ping
         [HttpGet]
         [Route("ping/{app}/")]
         [ApiCosts(0)]
-        public IActionResult GetPing()
+        public IActionResult GetPing(string app)
         {
             return NoContent();
         }
diff --git a/src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss b/src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss
index 00a5cbf4a..f1563c37b 100644
--- a/src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss
+++ b/src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss
@@ -9,4 +9,8 @@
 
 .graphiql-container > * {
     box-sizing: content-box;
-}
+    
+    & .editorWrap {
+        overflow: hidden;
+    }
+}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/panel-container.directive.ts b/src/Squidex/app/framework/angular/panel-container.directive.ts
index 6414af63d..28abbfcc0 100644
--- a/src/Squidex/app/framework/angular/panel-container.directive.ts
+++ b/src/Squidex/app/framework/angular/panel-container.directive.ts
@@ -25,7 +25,7 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy {
 
     @HostListener('window:resize')
     public onResize() {
-        this.invalidate();
+        this.invalidate(true);
     }
 
     public ngOnDestroy() {
@@ -33,7 +33,7 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy {
     }
 
     public ngAfterViewInit() {
-        this.invalidate({ force: true, resize: true });
+        this.invalidate(true);
     }
 
     public push(panel: PanelComponent) {
@@ -48,14 +48,8 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy {
         this.invalidate();
     }
 
-    public invalidate(params?: { force: boolean, resize: boolean }) {
-        this.isInit = this.isInit || (params && params.force) === true;
-
-        if (!this.isInit) {
-            return;
-        }
-
-        if (params && params.resize) {
+    public invalidate(resize = false) {
+        if (resize) {
             this.containerWidth = this.element.nativeElement.getBoundingClientRect().width;
         }
 
@@ -67,21 +61,22 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy {
         for (let panel of this.panels) {
             const panelRoot = panel.panel.nativeElement;
 
-            let width = panel.desiredWidth;
+            let layoutWidth = '';
 
             if (panel.desiredWidth === '*' && panel === last) {
-                panel.actualWidth = this.containerWidth - currentPosition;
-
-                panel.desiredWidth = width + 'px';
+                layoutWidth = (this.containerWidth - currentPosition) + 'px';
+            } else {
+                layoutWidth = panel.desiredWidth;
             }
 
             this.renderer.setElementStyle(panelRoot, 'top', '0px');
             this.renderer.setElementStyle(panelRoot, 'left', currentPosition + 'px');
+            this.renderer.setElementStyle(panelRoot, 'width', layoutWidth);
             this.renderer.setElementStyle(panelRoot, 'bottom', '0px');
             this.renderer.setElementStyle(panelRoot, 'position', 'absolute');
             this.renderer.setElementStyle(panelRoot, 'z-index', currentLayer.toString());
 
-            currentPosition += panel.actualWidth;
+            currentPosition += panel.renderWidth;
             currentLayer -= 10;
         }
 
diff --git a/src/Squidex/app/framework/angular/panel.component.ts b/src/Squidex/app/framework/angular/panel.component.ts
index 1a2fc8790..984050933 100644
--- a/src/Squidex/app/framework/angular/panel.component.ts
+++ b/src/Squidex/app/framework/angular/panel.component.ts
@@ -14,7 +14,7 @@ import { PanelContainerDirective } from './panel-container.directive';
 @Component({
     selector: 'sqx-panel',
     template: `
-        <div [style.width]="desiredWidth" [attr.expand]="expand" #panel>
+        <div #panel>
             <div class="panel panel-{{theme}}" [@slideRight]>
                 <ng-content></ng-content>
             </div>
@@ -24,7 +24,7 @@ import { PanelContainerDirective } from './panel-container.directive';
     ]
 })
 export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
-    public actualWidth = 0;
+    public renderWidth = 0;
 
     @Input()
     public theme = 'light';
@@ -32,9 +32,6 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     @Input()
     public desiredWidth = '10rem';
 
-    @Input()
-    public expand = false;
-
     @ViewChild('panel')
     public panel: ElementRef;
 
@@ -52,7 +49,7 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     }
 
     public ngAfterViewInit() {
-        this.actualWidth = this.panel.nativeElement.getBoundingClientRect().width;
+        this.renderWidth = this.panel.nativeElement.getBoundingClientRect().width;
 
         this.container.invalidate();
     }