List view finalized.

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

@@ -19,32 +19,16 @@
         </div>
     </div>
 
-    <div class="row no-gutters">
-        <ng-container *ngIf="!isListView; else listTemplate">
-            <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
-                (failed)="onAssetFailed(file)" 
-                (loaded)="onAssetLoaded(file, $event)">
-            </sqx-asset>
-            <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
-                (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 class="row no-gutters" [class.unrow]="isListView">
+        <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
+            [isListView]="isListView"
+            (failed)="onAssetFailed(file)" 
+            (loaded)="onAssetLoaded(file, $event)">
+        </sqx-asset>
+        <sqx-asset *ngFor="let asset of oldAssets" [asset]="asset" removeMode="true" isDisabled="true"
+            [isListView]="isListView"
+            (removing)="onAssetRemoving($event)">
+        </sqx-asset>
     </div>
 </div>
 

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

@@ -27,6 +27,13 @@
     margin-right: 8px;
 }
 
+.unrow {
+    display: block;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin: 0;
+}
+
 .drop-area {
     & {
         @include transition(border-color .4s ease);

src/Squidex/app/shared/components/asset.component.html

@@ -122,7 +122,7 @@
                     <i class="icon-download"></i>
                 </a>
             </div>
-            <div class="col col-actions" *ngIf="!isDisabled">
+            <div class="col col-actions" *ngIf="!isDisabled || removeMode">
                 <button class="btn btn-link btn-danger" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode">
                     <i class="icon-bin2"></i>
                 </button>

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

@@ -14,48 +14,25 @@
     <div class="file-drop-info">Drop file on existing item to replace the asset with a newer version.</div>
 </div>
 
-<div class="row assets" *ngIf="state.tagsNames | async; let tags">
-    <ng-container *ngIf="!isListView; else listTemplate">
-        <sqx-asset *ngFor="let file of newFiles" [initFile]="file"
-            (failed)="remove(file)" 
-            (loaded)="add(file, $event)">
+<div class="row assets" [class.unrow]="isListView" *ngIf="state.tagsNames | async; let tags">
+    <sqx-asset *ngFor="let file of newFiles" [initFile]="file"
+        [isListView]="isListView"
+        (failed)="remove(file)" 
+        (loaded)="add(file, $event)">
+    </sqx-asset>
+
+    <ng-container *ngIf="state.assets | async; let assets">
+        <sqx-asset *ngFor="let asset of assets; trackBy: trackByAsset" [asset]="asset"
+            [isListView]="isListView"
+            [isDisabled]="isDisabled"
+            [isSelectable]="selectedIds"
+            [isSelected]="isSelected(asset)"
+            [allTags]="tags"
+            (updated)="update($event)"
+            (selected)="select($event)"
+            (deleting)="delete($event)">
         </sqx-asset>
-    
-        <ng-container *ngIf="state.assets | async; let assets">
-            <sqx-asset *ngFor="let asset of assets; trackBy: trackByAsset" [asset]="asset" 
-                [isDisabled]="isDisabled"
-                [isSelectable]="selectedIds"
-                [isSelected]="isSelected(asset)"
-                [allTags]="tags"
-                (updated)="update($event)"
-                (selected)="select($event)"
-                (deleting)="delete($event)">
-            </sqx-asset>
-        </ng-container>
     </ng-container>
-
-    <ng-template #listTemplate>
-        <div class="col">
-            <sqx-asset *ngFor="let file of newFiles" [initFile]="file" 
-                [isListView]="true"
-                (failed)="remove(file)" 
-                (loaded)="add(file, $event)">
-            </sqx-asset>
-        
-            <ng-container *ngIf="state.assets | async; let assets">
-                <sqx-asset *ngFor="let asset of assets; trackBy: trackByAsset" [asset]="asset" 
-                    [isListView]="true"
-                    [isDisabled]="isDisabled"
-                    [isSelectable]="selectedIds"
-                    [isSelected]="isSelected(asset)"
-                    [allTags]="tags"
-                    (updated)="update($event)"
-                    (selected)="select($event)"
-                    (deleting)="delete($event)">
-                </sqx-asset>
-            </ng-container>
-        </div>
-    </ng-template>
 </div>
 
 <sqx-pager [hideWhenButtonsDisabled]="true" [pager]="state.assetsPager | async" (prev)="goPrev()" (next)="goNext()"></sqx-pager>

src/Squidex/app/shared/components/assets-list.component.scss

@@ -1,6 +1,13 @@
 @import '_vars';
 @import '_mixins';
 
+.unrow {
+    display: block;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin: 0;
+}
+
 .file-drop {
     & {
         @include transition(border-color .4s ease);