Sorting for assets.

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

@@ -19,16 +19,31 @@
         </div>
     </div>
 
-    <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 class="body">
+        <ng-container *ngIf="!isListView; else listTemplate">
+            <div class="row no-gutters">
+                <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>
+            </div>
+        </ng-container>
+    
+        <ng-template #listTemplate>
+            <sqx-asset *ngFor="let file of newAssets" [initFile]="file"
+                [isListView]="true" (failed)="onAssetFailed(file)" (loaded)="onAssetLoaded(file, $event)">
+            </sqx-asset>
+            
+            <div [sqxSortModel]="oldAssets.values" (sqxSorted)="sort($event)">
+                <div *ngFor="let asset of oldAssets">
+                    <sqx-asset [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,16 @@
     }
 }
 
-.header {
-    margin-bottom: .5rem;
-}
-
 .list {
     margin-left: 8px;
     margin-right: 8px;
 }
 
+.body {
+    margin-bottom: -.25rem;
+    margin-top: 1rem;
+}
+
 .unrow {
     display: block;
     padding-left: 8px;

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

@@ -133,6 +133,14 @@ export class AssetsEditorComponent implements ControlValueAccessor {
         this.callChange(ids);
     }
 
+    public sort(assets: AssetDto[]) {
+        if (assets) {
+            this.oldAssets = ImmutableArray.of(assets);
+
+            this.updateValue();
+        }
+    }
+
     public changeView(isListView: boolean) {
         this.localStore.set('assetView', isListView ? 'List' : 'Grid');
 

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

@@ -2,7 +2,7 @@
     <ng-container *ngIf="schema">
         <div class="drop-area-container">
             <div class="drop-area" (click)="selectorDialog.show()">
-                Click here to link a content.
+                Click here to link content items.
             </div>
         </div>
         
@@ -12,10 +12,10 @@
             <tbody *ngFor="let content of contentItems">
                 <tr [sqxContent]="content"
                     [language]="language"
+                    [isReadOnly]="true"
+                    [isReference]="true"
                     [schema]="schema"
-                    (deleting)="remove(content)"
-                    isReadOnly="true"
-                    isReference="true"></tr>
+                    (deleting)="remove(content)"></tr>
                 <tr class="spacer"></tr>
             </tbody>
         </table>