From 409e9c78e7e68bf9011e719f742fa22d3623b450 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 31 Oct 2019 17:51:12 +0100
Subject: [PATCH] Use simple modal for search.

---
 .../pages/clients/client.component.html       |  2 +-
 .../components/search-form.component.html     | 45 ++++++++++---------
 .../components/search-form.component.scss     | 15 +------
 3 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/frontend/app/features/settings/pages/clients/client.component.html b/frontend/app/features/settings/pages/clients/client.component.html
index e80844bcb..e54649590 100644
--- a/frontend/app/features/settings/pages/clients/client.component.html
+++ b/frontend/app/features/settings/pages/clients/client.component.html
@@ -69,7 +69,7 @@
 </div>
 
 <ng-container *sqxModal="connectDialog">
-    <sqx-modal-dialog large="true" (close)="connectDialog.hide()">
+    <sqx-modal-dialog (close)="connectDialog.hide()" large="true">
         <ng-container title>
             Connect
         </ng-container>
diff --git a/frontend/app/shared/components/search-form.component.html b/frontend/app/shared/components/search-form.component.html
index dd4de3d41..ad15a5ca0 100644
--- a/frontend/app/shared/components/search-form.component.html
+++ b/frontend/app/shared/components/search-form.component.html
@@ -41,29 +41,32 @@
 </sqx-onboarding-tooltip>
 
 <ng-container *sqxModal="searchDialog;closeAuto:false">
-    <div class="dropdown-menu" [sqxAnchoredTo]="inputFind" @fade>
-        <div class="form-horizontal">
-            <div class="submit">
-                <button type="button" class="btn btn-primary mr-2" (click)="search(true)">
-                    Submit
-                </button>
-
-                <button type="button" class="btn btn-text-secondary" (click)="searchDialog.hide()">
-                    <i class="icon-close"></i>
-                </button>
-            </div>
-            <sqx-query
-                [model]="queryModel" 
-                [query]="query"
-                (queryChange)="changeQuery($event)"
-                [language]="language">
-            </sqx-query>
+    <sqx-modal-dialog (close)="searchDialog.hide()" large="true">
+        <ng-container title>
+            Custom Query
+        </ng-container>
+        
+        <ng-container content>
+            <div class="form-horizontal">
+                <sqx-query
+                    [model]="queryModel" 
+                    [query]="query"
+                    (queryChange)="changeQuery($event)"
+                    [language]="language">
+                </sqx-query>
 
-            <div class="link">
-                Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
+                <div class="link">
+                    Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
+                </div>
             </div>
-        </div>
-    </div>        
+        </ng-container>
+        
+        <ng-container footer>
+                <button type="button" class="float-right btn btn-primary mr-2" (click)="search(true)">
+                    Submit
+                </button>
+        </ng-container>
+    </sqx-modal-dialog>        
 </ng-container>
 
 <ng-container *sqxModal="saveQueryDialog">
diff --git a/frontend/app/shared/components/search-form.component.scss b/frontend/app/shared/components/search-form.component.scss
index 93ab8e4ce..ed0f53114 100644
--- a/frontend/app/shared/components/search-form.component.scss
+++ b/frontend/app/shared/components/search-form.component.scss
@@ -13,21 +13,8 @@
     padding-right: 3rem;
 }
 
-.dropdown-menu {
-    max-height: 80%;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
 .form-horizontal {
-    padding: 1rem 1.5rem;
-    position: relative;
-    min-width: 60rem;
-    max-width: 60rem;
-}
-
-.submit {
-    @include absolute(.5rem, 1rem, auto, auto);
+    min-width: 35rem;
 }
 
 .buttons {