Added button to show or hide map.

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

@@ -14,7 +14,7 @@
         <div class="sidebar-section">
             <h3>Status Queries</h3>
 
-            <a class="sidebar-item" *ngFor="let query of contentsState.statusQueries | async; trackBy: trackByQuery" (click)="search(query.filter)"
+            <a class="sidebar-item status" *ngFor="let query of contentsState.statusQueries | async; trackBy: trackByQuery" (click)="search(query.filter)"
                 [class.active]="isSelectedQuery(query.filter)">
                 
                 <i class="icon-circle" [style.color]="query.color"></i> {{query.name}}

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

@@ -4,3 +4,7 @@
 .text-muted {
     pointer-events: none;
 }
+
+.status {
+    @include truncate;
+}

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -47,7 +47,7 @@
                     <sqx-date-time-editor enforceTime="true" [mode]="field.properties['editor']" [formControl]="control"></sqx-date-time-editor>
                 </ng-container>
 				<ng-container *ngSwitchCase="'Geolocation'">
-					<sqx-geolocation-editor [formControl]="control"></sqx-geolocation-editor>
+					<sqx-geolocation-editor [isCompact]="isCompact" [formControl]="control"></sqx-geolocation-editor>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Json'">
 					<sqx-json-editor [formControl]="control"></sqx-json-editor>

src/Squidex/app/shared/components/geolocation-editor.component.html

@@ -1,31 +1,41 @@
-<div class="editor-container">
+<div class="editor-container" [class.compact]="isCompact">
-    <form>
+    <form [class.hidden]="snapshot.isMapHidden">
         <div class="editor" #editor></div>
+
         <input [class.hidden]="!snapshot.isGoogleMaps" class="form-control search-control" type="text" [disabled]="snapshot.isDisabled" placeholder="Search Google Maps" #searchBox />
     </form>
-    <div>
+
-        <form class="form-inline no-gutters" [formGroup]="geolocationForm" (change)="updateValueByInput()" (ngSubmit)="updateValueByInput()">
+    <div class="row mt-2">
-            <div class="form-group col-auto pr-2">
+        <form class="col form-inline no-gutters" [formGroup]="geolocationForm" (change)="updateValueByInput()" (ngSubmit)="updateValueByInput()">
-                <label for="latitude">Latitude: </label>
+            <div class="form-group col-auto pr-2" *ngIf="!isCompact">
+                <label for="latitude">Lat: </label>
             </div>
-            <div class="form-group">
+            <div class="form-group pr-2">
                 <sqx-control-errors for="latitude" style="z-index: 10000"></sqx-control-errors>
 
                 <input type="number" class="form-control" id="latitude" formControlName="latitude" step="any" />
             </div>
 
-            <div class="form-group col-auto pr-2 pl-2">
+            <div class="form-group col-auto pr-2" *ngIf="!isCompact">
-                <label for="longitude">Longitude: </label>
+                <label for="longitude">Lon: </label>
             </div>
-            <div class="form-group">
+            <div class="form-group pr-2">
                 <sqx-control-errors for="longitude" style="z-index: 10000"></sqx-control-errors>
                 
                 <input type="number" class="form-control" id="longitude" formControlName="longitude" step="any" />
             </div>
 
-            <div class="form-group col-auto">
+            <div class="form-group col-auto" *ngIf="!isCompact">
                 <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="snapshot.isDisabled" (click)="reset()">Clear</button>
             </div>
         </form>
+        <div class="col-auto">
+            <button type="button" class="btn btn-text-secondary" [class.hidden]="!snapshot.isMapHidden" (click)="hideMap(false)" title="Show map">
+                <i class="icon-plus-square"></i>
+            </button>
+            <button type="button" class="btn btn-text-secondary" [class.hidden]="snapshot.isMapHidden" (click)="hideMap(true)" title="Hide map">
+                <i class="icon-minus-square"></i>
+            </button>
+        </div>
     </div>
 </div>

src/Squidex/app/shared/components/geolocation-editor.component.scss

@@ -15,6 +15,12 @@
     width: 40%;
 }
 
-.form-inline {
+.compact {
-    margin-top: .5rem;
+    .form-group {
+        max-width: 40%;
+    }
+
+    .form-control {
+        max-width: 100%;
+    }
 }

src/Squidex/app/shared/components/geolocation-editor.component.ts

@@ -5,10 +5,11 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core';
 import { FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
+    LocalStoreService,
     ResourceLoaderService,
     StatefulControlComponent,
     Types,
@@ -28,6 +29,10 @@ interface Geolocation {
     longitude: number;
 }
 
+interface Snapshot {
+    isMapHidden?: boolean;
+}
+
 @Component({
     selector: 'sqx-geolocation-editor',
     styleUrls: ['./geolocation-editor.component.scss'],
@@ -35,7 +40,7 @@ interface Geolocation {
     providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class GeolocationEditorComponent extends StatefulControlComponent<undefined, Geolocation> implements AfterViewInit {
+export class GeolocationEditorComponent extends StatefulControlComponent<Snapshot, Geolocation> implements AfterViewInit {
     private readonly isGoogleMaps: boolean;
     private marker: any;
     private map: any;
@@ -61,6 +66,9 @@ export class GeolocationEditorComponent extends StatefulControlComponent<undefin
             ]
         });
 
+    @Input()
+    public isCompact: boolean;
+
     @ViewChild('editor', { static: false })
     public editor: ElementRef<HTMLElement>;
 
@@ -68,15 +76,22 @@ export class GeolocationEditorComponent extends StatefulControlComponent<undefin
     public searchBoxInput: ElementRef<HTMLInputElement>;
 
     constructor(changeDetector: ChangeDetectorRef,
+        private readonly localStore: LocalStoreService,
         private readonly resourceLoader: ResourceLoaderService,
         private readonly formBuilder: FormBuilder,
         private readonly uiOptions: UIOptions
     ) {
-        super(changeDetector, undefined);
+        super(changeDetector, { isMapHidden: localStore.getBoolean('hideMap') });
 
         this.isGoogleMaps = uiOptions.get('map.type') !== 'OSM';
     }
 
+    public hideMap(isMapHidden: boolean) {
+        this.next({ isMapHidden });
+
+        this.localStore.setBoolean('hideMap', isMapHidden);
+    }
+
     public writeValue(obj: any) {
         if (Types.isObject(obj) && Types.isNumber(obj.latitude) && Types.isNumber(obj.longitude)) {
             this.value = obj;