Search input improved.

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -12,29 +12,34 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
+        <div class="row no-gutters pl-1">
-            <i class="icon-reset"></i> Refresh
+            <div class="col col-auto offset-xl-4">
-        </button>
+                <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
-
+                    <i class="icon-reset"></i> Refresh
-        <sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
+                </button>
-
+            </div>
-        <sqx-search-form 
+            <div class="col pl-1">
-            (queryChanged)="search($event)" 
+                <sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
-            [query]="contentsState.contentsQuery | async" 
-            (archivedChanged)="goArchive($event)"
-            [archived]="contentsState.isArchive | async"
-            enableShortcut="true">
-        </sqx-search-form>
-
-        <ng-container *ngIf="languages.length > 1">
-            <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
-        </ng-container>
 
-        <button class="btn btn-success" #newButton routerLink="new" title="New Content (CTRL + SHIFT + G)">
+                <sqx-search-form formClass="form"
-            <i class="icon-plus"></i> New
+                    (queryChanged)="search($event)" 
-        </button>
+                    [query]="contentsState.contentsQuery | async" 
-        
+                    (archivedChanged)="goArchive($event)"
-        <sqx-shortcut keys="ctrl+shift+g" (trigger)="newButton.click()"></sqx-shortcut>
+                    [archived]="contentsState.isArchive | async"
+                    enableShortcut="true">
+                </sqx-search-form>
+            </div>
+            <div class="col col-auto pl-1" *ngIf="languages.length > 1">
+                <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
+            </div>
+            <div class="col col-auto pl-1">
+                <button class="btn btn-success" #newButton routerLink="new" title="New Content (CTRL + SHIFT + G)">
+                    <i class="icon-plus"></i> New
+                </button>
+                
+                <sqx-shortcut keys="ctrl+shift+g" (trigger)="newButton.click()"></sqx-shortcut>
+            </div>
+        </div>
     </ng-container>
 
     <ng-container content>

src/Squidex/app/features/content/pages/contents/contents-page.component.scss

@@ -1,6 +1,10 @@
 @import '_vars';
 @import '_mixins';
 
+:host /deep/ .search-form {
+    display: block;
+}
+
 .content {
     cursor: pointer;
 }

src/Squidex/app/features/content/pages/contents/search-form.component.html

@@ -2,7 +2,7 @@
     <sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut>
 </ng-container>
 
-<form class="form-inline search-form" (ngSubmit)="search()">
+<form [class]="formClass" (ngSubmit)="search()">
     <input class="form-control form-control-expandable" #inputFind [formControl]="contentsFilter" placeholder="Search for content" />
 
     <a class="expand-search" (click)="searchModal.toggle()" #archive>

src/Squidex/app/features/content/pages/contents/search-form.component.ts

@@ -35,6 +35,9 @@ export class SearchFormComponent implements OnChanges {
     @Input()
     public enableShortcut = false;
 
+    @Input()
+    public formClass = 'form-inline search-form';
+
     public contentsFilter = new FormControl();
 
     public searchModal = new ModalView();

src/Squidex/app/features/content/shared/contents-selector.component.html

@@ -4,20 +4,23 @@
     </ng-container>
 
     <ng-container tabs>
-        <div class="text-right">
+        <div class="row no-gutters">
-            <button class="btn btn-link btn-secondary" (click)="reload()">
+            <div class="col col-auto offset-lg-4">
-                <i class="icon-reset"></i> Refresh
+                <button class="btn btn-link btn-secondary" (click)="reload()">
-            </button>
+                    <i class="icon-reset"></i> Refresh
-            
+                </button>
-            <sqx-search-form 
+            </div>
-                [query]="contentsState.contentsQuery | async" 
+            <div class="col pl-1">
-                (queryChanged)="search($event)"
+                <sqx-search-form formClass="form"
-                [canArchive]="false">
+                    [query]="contentsState.contentsQuery | async" 
-            </sqx-search-form>
+                    (queryChanged)="search($event)"
-
+                    [canArchive]="false">
-            <ng-container *ngIf="languages.length > 1">
+                </sqx-search-form>
-                <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
+    
-            </ng-container>
+                <ng-container *ngIf="languages.length > 1">
+                    <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
+                </ng-container>
+            </div>
         </div>
     </ng-container>
 

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

@@ -4,13 +4,16 @@
 
         <div class="panel-header" [class.large]="showSecondHeader" *ngIf="!isFullSize">
             <div class="panel-title-row">
-                <div class="float-right">
+                <div class="row">
-                    <ng-content select=[menu]></ng-content>
+                    <div class="col col-auto">
+                        <h3 class="panel-title">
+                            <ng-content select=[title]></ng-content>
+                        </h3>
+                    </div>
+                    <div class="col text-right">
+                        <ng-content select=[menu]></ng-content>
+                    </div>
                 </div>
-
-                <h3 class="panel-title">
-                    <ng-content select=[title]></ng-content>
-                </h3>
             </div>
 
             <a class="panel-close" sqxParentLink [isLazyLoaded]="isLazyLoaded" *ngIf="showClose">