Merge branch 'feature-assetlistview'

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

@@ -32,15 +32,17 @@
         </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 class="list-view">
+                <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>
             </div>
         </ng-template>

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

@@ -18,6 +18,10 @@
     }
 }
 
+.list-view {
+    margin-bottom: 1rem;
+}
+
 .list {
     margin-left: 8px;
     margin-right: 8px;
@@ -47,8 +51,8 @@
         font-weight: normal;
         text-align: center;
         padding: 0 2rem;
-        cursor: pointer;
         color: darken($color-border, 30%);
+        cursor: pointer;
     }
 
     &:hover {

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

@@ -48,10 +48,9 @@
                 <sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar>
             </div>
         
-            <div class="drop-overlay" *ngIf="asset && progress === 0">
+            <div class="drop-overlay align-items-center justify-content-center" *ngIf="asset && progress === 0">
                 <div class="drop-overlay-background"></div>
-        
-                <span class="drop-overlay-text">Drop to update</span>
+                <div class="drop-overlay-text">Drop to update</div>
             </div>
         </div>
         <div class="card-footer">
@@ -89,13 +88,11 @@
     <div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)">
         <div class="left-border" [class.selected]="isSelected" ></div>
 
-        <div class="image" *ngIf="asset && progress === 0" @fade>
-            <div *ngIf="asset.isImage" class="file-image-small">
-                <img [sqxImageSource]="asset | sqxAssetPreviewUrl">
-            </div>
-            <div *ngIf="!asset.isImage" class="file-icon-small">
-                <img class="icon" [attr.src]="asset | sqxFileIcon">
-            </div>
+        <div *ngIf="asset && asset.isImage && progress === 0" class="image" @fade>
+            <img [sqxImageSource]="asset | sqxAssetPreviewUrl">
+        </div>
+        <div *ngIf="asset && !asset.isImage && progress === 0" class="image image-padded" @fade>
+            <img class="icon" [attr.src]="asset | sqxFileIcon">
         </div>
 
         <div class="row no-gutters" *ngIf="asset && progress === 0" @fade>
@@ -117,12 +114,12 @@
             <div class="col col-user">
                 <img class="user-picture" [attr.title]="asset.lastModifiedBy | sqxUserNameRef" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" />
             </div>
-            <div class="col col-actions">
+            <div class="col col-actions text-right">
                 <a class="btn btn-link btn-secondary" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()">
                     <i class="icon-download"></i>
                 </a>
             </div>
-            <div class="col col-actions" *ngIf="!isDisabled || removeMode">
+            <div class="col col-actions text-right" *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>
@@ -138,10 +135,9 @@
             </div>
         </div>
 
-        <div class="drop-overlay" *ngIf="asset && progress === 0">
+        <div class="drop-overlay align-items-center justify-content-center" *ngIf="asset && progress === 0">
             <div class="drop-overlay-background"></div>
-    
-            <span class="drop-overlay-text">Drop to update</span>
+            <div class="drop-overlay-text">Drop to update</div>
         </div>
     </div>
 </ng-template>

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

@@ -14,6 +14,7 @@ $list-height: 2.375rem;
         @include transition(opacity .4s ease);
         @include absolute(0, 0, 0, 0);
         @include opacity(0);
+        @include flex-box;
         color: $color-dark-foreground;
     }
 
@@ -33,20 +34,6 @@ $list-height: 2.375rem;
     color: $color-dark-foreground;
 }
 
-.drop-overlay {
-    & {
-        @include overlay;
-        pointer-events: none;
-    }
-
-    &-text {
-        @include absolute(40%, 0, 0, 0);
-        text-align: center;
-        font-size: 1.25rem;
-        font-weight: lighter;
-    }
-}
-
 :host {
     padding-bottom: 1rem;
     padding-left: 8px;
@@ -125,16 +112,10 @@ $list-height: 2.375rem;
         @include truncate;
     }
 
-    &-image,
-    &-icon {
+    &-image {
         height: $asset-image;
     }
 
-    &-image-small,
-    &-icon-small {
-        height: 2.375rem;
-    }
-
     &-name {
         line-height: 2rem;
     }
@@ -150,6 +131,7 @@ $list-height: 2.375rem;
     &-icon {
         line-height: $asset-image;
         background: $color-border;
+        height: $asset-image;
         border: 0;
         text-align: center;
     }
@@ -198,7 +180,7 @@ $list-height: 2.375rem;
 
 .editable {
     height: 2rem;
-    border-top: none;
+    border-top: 0;
     border-bottom: 1px solid transparent;
 }
 
@@ -209,15 +191,6 @@ $list-height: 2.375rem;
         height: $list-height + 2rem;
     }
 
-    .image {
-        @include absolute(0, auto, auto, 4px);
-        height: $list-height + 2rem;
-        padding: 1rem;
-        border: 0;
-        background: $color-border;
-        width: $list-height + 2rem;
-    }
-
     .left-border {
         & {
             @include absolute(0, auto, auto, 0);
@@ -232,6 +205,17 @@ $list-height: 2.375rem;
         }
     }
 
+    .image {
+        @include absolute(0, auto, 0, 4px);
+        border: 0;
+        background: $color-border;
+        width: $list-height + 2rem;
+    }
+
+    .image-padded {
+        padding: 1rem;
+    }
+
     .icon {
         max-width: 100%;
     }
@@ -246,7 +230,6 @@ $list-height: 2.375rem;
         }
 
         &-actions {
-            text-align: right;
             line-height: $list-height;
         }
 
@@ -271,9 +254,18 @@ $list-height: 2.375rem;
             min-width: 12rem;
         }
     }
+}
 
-    .drop-overlay-text {
-        top: 1.4rem;
+.drop-overlay {
+    & {
+        @include overlay;
+        pointer-events: none;
+    }
+
+    &-text {
+        position: absolute;
+        font-size: 1.25rem;
+        font-weight: lighter;
     }
 }