Browse Source

Use simple modal for search.

pull/443/head
Sebastian Stehle 6 years ago
parent
commit
409e9c78e7
  1. 2
      frontend/app/features/settings/pages/clients/client.component.html
  2. 25
      frontend/app/shared/components/search-form.component.html
  3. 15
      frontend/app/shared/components/search-form.component.scss

2
frontend/app/features/settings/pages/clients/client.component.html

@ -69,7 +69,7 @@
</div> </div>
<ng-container *sqxModal="connectDialog"> <ng-container *sqxModal="connectDialog">
<sqx-modal-dialog large="true" (close)="connectDialog.hide()"> <sqx-modal-dialog (close)="connectDialog.hide()" large="true">
<ng-container title> <ng-container title>
Connect Connect
</ng-container> </ng-container>

25
frontend/app/shared/components/search-form.component.html

@ -41,17 +41,13 @@
</sqx-onboarding-tooltip> </sqx-onboarding-tooltip>
<ng-container *sqxModal="searchDialog;closeAuto:false"> <ng-container *sqxModal="searchDialog;closeAuto:false">
<div class="dropdown-menu" [sqxAnchoredTo]="inputFind" @fade> <sqx-modal-dialog (close)="searchDialog.hide()" large="true">
<div class="form-horizontal"> <ng-container title>
<div class="submit"> Custom Query
<button type="button" class="btn btn-primary mr-2" (click)="search(true)"> </ng-container>
Submit
</button>
<button type="button" class="btn btn-text-secondary" (click)="searchDialog.hide()"> <ng-container content>
<i class="icon-close"></i> <div class="form-horizontal">
</button>
</div>
<sqx-query <sqx-query
[model]="queryModel" [model]="queryModel"
[query]="query" [query]="query"
@ -63,7 +59,14 @@
Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>. Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
</div> </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>
<ng-container *sqxModal="saveQueryDialog"> <ng-container *sqxModal="saveQueryDialog">

15
frontend/app/shared/components/search-form.component.scss

@ -13,21 +13,8 @@
padding-right: 3rem; padding-right: 3rem;
} }
.dropdown-menu {
max-height: 80%;
overflow-x: hidden;
overflow-y: auto;
}
.form-horizontal { .form-horizontal {
padding: 1rem 1.5rem; min-width: 35rem;
position: relative;
min-width: 60rem;
max-width: 60rem;
}
.submit {
@include absolute(.5rem, 1rem, auto, auto);
} }
.buttons { .buttons {

Loading…
Cancel
Save