Small improvement.

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -35,7 +35,7 @@
                 </div>
             </div>
             <div class="col col-auto pl-1">
-                <div class="btn-group mr-1" data-toggle="buttons">
+                <div class="btn-group" data-toggle="buttons">
                     <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isListView" [disabled]="isListView" (click)="changeView(true)">
                         <i class="icon-list"></i>
                     </button>

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

@@ -1,18 +1,50 @@
 <div class="assets-container" [class.disabled]="isDisabled">
-    <div class="row">
+    <div class="header list">
-        <div class="drop-area align-items-center" (sqxFileDrop)="addFiles($event)" (click)="assetsDialog.show()">
+        <div class="row no-gutters">
-            Drop files here to add them.
+            <div class="col">
+                <div class="drop-area align-items-center" (sqxFileDrop)="addFiles($event)" (click)="assetsDialog.show()">
+                    Drop files or click here to add assets.
+                </div>
+            </div>
+            <div class="col col-auto pl-1">
+                <div class="btn-group" data-toggle="buttons">
+                    <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isListView" [disabled]="isListView" (click)="changeView(true)">
+                        <i class="icon-list"></i>
+                    </button>
+                    <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="!isListView" [disabled]="!isListView" (click)="changeView(false)">
+                        <i class="icon-grid"></i>
+                    </button>
+                </div>
+            </div>
         </div>
-            
+    </div>
-        <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
+
-            [isListView]="true"
+    <div class="row no-gutters">
-            (failed)="onAssetFailed(file)" 
+        <ng-container *ngIf="!isListView; else listTemplate">
-            (loaded)="onAssetLoaded(file, $event)">
+            <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
-        </sqx-asset>
+                (failed)="onAssetFailed(file)" 
-        <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
+                (loaded)="onAssetLoaded(file, $event)">
-            [isListView]="true"
+            </sqx-asset>
-            (removing)="onAssetRemoving($event)">
+            <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
-        </sqx-asset>
+                (removing)="onAssetRemoving($event)">
+            </sqx-asset>
+        </ng-container>
+
+        <ng-template #listTemplate>
+            <div class="col">
+                <div class="list">
+                    <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
+                        [isListView]="true"
+                        (failed)="onAssetFailed(file)" 
+                        (loaded)="onAssetLoaded(file, $event)">
+                    </sqx-asset>
+                    <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
+                        [isListView]="true"
+                        (removing)="onAssetRemoving($event)">
+                    </sqx-asset>
+                </div>
+            </div>
+        </ng-template>    
     </div>
 </div>
 

src/Squidex/app/features/content/shared/assets-editor.component.scss

@@ -18,15 +18,23 @@
     }
 }
 
+.header {
+    margin-bottom: .5rem;
+}
+
+.list {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
 .drop-area {
     & {
         @include transition(border-color .4s ease);
         @include border-radius;
         @include flex-box;
+        @include truncate;
         border: 2px dashed $color-border;
-        height: $asset-height;
+        height: 2.5rem;
-        width: $asset-width;
-        margin-left: 8px;
         font-size: 1.2rem;
         font-weight: normal;
         text-align: center;

src/Squidex/app/features/content/shared/assets-editor.component.ts

@@ -16,6 +16,7 @@ import {
     AssetsService,
     DialogModel,
     ImmutableArray,
+    LocalStoreService,
     Types
 } from '@app/shared';
 
@@ -40,12 +41,15 @@ export class AssetsEditorComponent implements ControlValueAccessor {
     public newAssets = ImmutableArray.empty<File>();
     public oldAssets = ImmutableArray.empty<AssetDto>();
 
+    public isListView = false;
     public isDisabled = false;
 
     constructor(
         private readonly appsState: AppsState,
-        private readonly assetsService: AssetsService
+        private readonly assetsService: AssetsService,
+        private readonly localStore: LocalStoreService
     ) {
+        this.isListView = this.localStore.get('assetView') === 'List';
     }
 
     public writeValue(obj: any) {
@@ -128,4 +132,10 @@ export class AssetsEditorComponent implements ControlValueAccessor {
         this.callTouched();
         this.callChange(ids);
     }
+
+    public changeView(isListView: boolean) {
+        this.localStore.set('assetView', isListView ? 'List' : 'Grid');
+
+        this.isListView = isListView;
+    }
 }

src/Squidex/app/shared/components/assets-selector.component.html

@@ -30,7 +30,7 @@
                 </div>
             </div>
             <div class="col col-auto pl-1">
-                <div class="btn-group mr-1" data-toggle="buttons">
+                <div class="btn-group" data-toggle="buttons">
                     <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isListView" [disabled]="isListView" (click)="changeView(true)">
                         <i class="icon-list"></i>
                     </button>