Panel fixes.

src/Squidex/app/features/api/api-area.component.html

@@ -1,33 +1,25 @@
 <sqx-title message="{app} | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
 <sqx-panel theme="dark" desiredWidth="12rem">
-    <div class="panel-header">
+    <ng-container title>
-        <div class="panel-title-row">
+        API
-            <h3 class="panel-title">API</h3>
+    </ng-container>
-        </div>
 
-        <a class="panel-close" sqxParentLink isLazyLoaded="true">
+    <ng-container content>
-            <i class="icon-close"></i>
+        <ul class="nav nav-panel nav-dark flex-column">
-        </a>
+            <li class="nav-item">
-    </div>
+                <a class="nav-link" routerLink="graphql" routerLinkActive="active">
-
+                    GraphQL
-    <div class="panel-main">
+                    <i class="icon-angle-right"></i>
-        <div class="panel-content">
+                </a>
-            <ul class="nav nav-panel nav-dark flex-column">
+            </li>
-                <li class="nav-item">
+            <li class="nav-item">
-                    <a class="nav-link" routerLink="graphql" routerLinkActive="active">
+                <a class="nav-link" href="/api/content/{{appsState.appName}}/docs" target="_blank">
-                        GraphQL
+                    Swagger
-                        <i class="icon-angle-right"></i>
+                </a>
-                    </a>
+            </li>
-                </li>
+        </ul>
-                <li class="nav-item">
+    </ng-container>
-                    <a class="nav-link" href="/api/content/{{appsState.appName}}/docs" target="_blank">
-                        Swagger
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
 </sqx-panel>
 
 <router-outlet></router-outlet>

src/Squidex/app/features/api/pages/graphql/graphql-page.component.html

@@ -1,5 +1,5 @@
 <sqx-title message="{app} | API | GraphQL" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="*">
+<sqx-panel desiredWidth="*" isFullSize="true">
-   <div #graphiQLContainer></div>
+   <div inner #graphiQLContainer></div>
 </sqx-panel>

src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss

@@ -4,11 +4,13 @@
 @import '~graphiql/graphiql';
 
 .graphiql-container {
-    @include absolute(0, 0, 0, 0);
+    & {
-}
+        @include absolute(0, 0, 0, 0);
+    }
 
-.graphiql-container > * {
+    & > * {
-    box-sizing: content-box;
+        box-sizing: content-box;
+    }
 
     // sass-lint:disable class-name-format
     & .editorWrap {

src/Squidex/app/framework/angular/modals/root-view.component.ts

@@ -10,7 +10,7 @@ import { Component, ViewChild, ViewContainerRef } from '@angular/core';
 @Component({
     selector: 'sqx-root-view',
     styleUrls: ['./root-view.component.scss'],
-    template: './root-view.component.html'
+    templateUrl: './root-view.component.html'
 })
 export class RootViewComponent {
     @ViewChild('element', { read: ViewContainerRef })

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -5,17 +5,16 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, Renderer } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Renderer } from '@angular/core';
 
 import { PanelComponent } from './panel.component';
 
 @Directive({
     selector: '[sqxPanelContainer]'
 })
-export class PanelContainerDirective implements AfterViewInit, OnDestroy {
+export class PanelContainerDirective implements AfterViewInit {
     private readonly panels: PanelComponent[] = [];
     private containerWidth = 0;
-    private isInit = false;
 
     constructor(
         private readonly element: ElementRef,
@@ -28,10 +27,6 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy {
         this.invalidate(true);
     }
 
-    public ngOnDestroy() {
-        this.isInit = true;
-    }
-
     public ngAfterViewInit() {
         this.invalidate(true);
     }

src/Squidex/app/framework/angular/panel.component.html

@@ -1,6 +1,8 @@
 <div #panel>
     <div class="panel panel-{{theme}}" [@slideRight]>
-        <div class="panel-header">
+        <ng-content select=[inner] *ngIf="isFullSize"></ng-content>
+
+        <div class="panel-header" *ngIf="!isFullSize">
             <div class="panel-title-row">
                 <div class="float-right">
                     <ng-content select=[menu]></ng-content>

src/Squidex/app/framework/angular/panel.component.ts

@@ -31,6 +31,9 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     @Input()
     public isBlank = false;
 
+    @Input()
+    public isFullSize = false;
+
     @Input()
     public showScrollbar = false;