Asset management improved

src/Squidex/app/features/assets/pages/asset.component.html

@@ -1,12 +1,21 @@
 <div class="asset">
     <div class="card">
         <div class="card-block">
-            <div *ngIf="asset && asset.isImage">
+            <div *ngIf="asset">
-                <img [attr.src]="previewUrl | async">
+                <div class="file-type">{{fileType}}</div>
+                
+                <div *ngIf="asset.isImage" [@fade]>
+                    <img [attr.src]="previewUrl | async" sqxHideInvalidImage>
+                </div>
             </div>
         </div>
         <div class="card-footer">
-            {{fileInfo}}
+            <div class="file-name">
+                {{fileName}}
+            </div>
+            <div class="file-info">
+                {{fileInfo}}
+            </div>
         </div>
     </div>
 </div>

src/Squidex/app/features/assets/pages/asset.component.scss

@@ -3,6 +3,9 @@
 
 $card-size: 240px;
 
+$color-type-background: #000;
+$color-type-foreground: #fff;
+
 :host {
     padding-bottom: 1rem;
 }
@@ -14,12 +17,38 @@ $card-size: 240px;
 
     &-block {
         padding: .8rem .8rem 0;
+        position: relative;
     }
 
     &-footer {
         border: 0;
+        background: transparent;
+        padding: .8rem;
+        padding-top: .4rem;
+    }
+}
+
+.file {
+    &-info {
         font-size: .8rem;
+    }
+
+    &-name {
+        @include truncate;
+        font-size: 1rem;
         font-weight: normal;
-        padding: .8rem;
+        line-height: 2rem;
+    }
+
+    &-type {
+        @include absolute(1.1rem, auto, auto, 1.1rem);
+        @include border-radius(2px);
+        @include opacity(.8);
+        background: $color-type-background;
+        border: 0;
+        padding: .1rem .3rem;
+        font-size: .8rem;
+        font-weight: normal;
+        color: $color-type-foreground;
     }
 }

src/Squidex/app/features/assets/pages/asset.component.ts

@@ -14,6 +14,7 @@ import {
     AppsStoreService,
     AssetDto,
     AssetsService,
+    fadeAnimation,
     NotificationService,
     UsersProviderService
 } from 'shared';
@@ -21,7 +22,10 @@ import {
 @Component({
     selector: 'sqx-asset',
     styleUrls: ['./asset.component.scss'],
-    templateUrl: './asset.component.html'
+    templateUrl: './asset.component.html',
+    animations: [
+        fadeAnimation
+    ]
 })
 export class AssetComponent extends AppComponentBase implements OnInit {
     @Input()
@@ -31,7 +35,27 @@ export class AssetComponent extends AppComponentBase implements OnInit {
     public asset: AssetDto;
 
     public get previewUrl(): Observable<string> {
-        return this.appName().map(app => this.apiUrl.buildUrl(`api/assets/${this.asset.id}/?width=230&height=140&mode=Crop`));
+        return this.appName().map(app => this.apiUrl.buildUrl(`api/assets/${this.asset.id}/?width=230&height=155&mode=Crop`));
+    }
+
+    public get fileType(): string {
+        let result = '';
+
+        if (this.asset != null) {
+            result = this.asset.mimeType.split('/')[1];
+        }
+
+        return result;
+    }
+
+    public get fileName(): string {
+        let result = '';
+
+        if (this.asset != null) {
+            result = this.asset.fileName;
+        }
+
+        return result;
     }
 
     public get fileInfo(): string {

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

@@ -3,6 +3,7 @@
 
 .file-drop {
     & {
+        @include transition(border-color .4s ease);
         border: 2px dashed $color-border;
         background: transparent;
         padding: 1rem;
@@ -11,17 +12,23 @@
         margin-right: 0;
     }
 
-    &-or {
+    &.drag {
-        font-size: .8rem;
+        border-color: darken($color-border, 10%);
+        border-style: dashed;
+        cursor: copy;
     }
 
-    &-button {
+    &-or {
-        margin: .5rem 0;
+        font-size: .8rem;
     }
 
     &-info {
         color: $color-subtext;
     }
+
+    &-button {
+        margin: .5rem 0;
+    }
 }
 
 .btn {

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

@@ -6,7 +6,7 @@
             <h3 class="panel-title">Schemas</h3>
         </div>
 
-        <a class="panel-close" dashboardLink>
+        <a class="panel-close" sqxDashboardLink>
             <i class="icon-close"></i>
         </a>
 

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

@@ -6,7 +6,7 @@
             <h3 class="panel-title">Schemas</h3>
         </div>
 
-        <a class="panel-close" dashboardLink>
+        <a class="panel-close" sqxDashboardLink>
             <i class="icon-close"></i>
         </a>
 

src/Squidex/app/features/settings/settings-area.component.html

@@ -4,7 +4,7 @@
             <h3 class="panel-title">Settings</h3>
         </div>
 
-        <a class="panel-close" dashboardLink>
+        <a class="panel-close" sqxDashboardLink>
             <i class="icon-close"></i>
         </a>
     </div>

src/Squidex/app/framework/angular/file-drop.directive.ts

@@ -5,18 +5,31 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, HostListener, Output, Renderer } from '@angular/core';
 
 @Directive({
     selector: '[sqxFileDrop]'
 })
 export class FileDropDirective {
+    private dragCounter = 0;
+
     @Output('sqxFileDrop')
     public drop = new EventEmitter<FileList>();
 
+    constructor(
+        private readonly elementRef: ElementRef,
+        private readonly renderer: Renderer
+    ) {
+    }
+
+    @HostListener('dragleave', ['$event'])
+    public onDragLeave(event: DragDropEvent) {
+        this.dragEnd();
+    }
+
     @HostListener('dragenter', ['$event'])
     public onDragEnter(event: DragDropEvent) {
-        this.tryStopEvent(event);
+        this.dragStart();
     }
 
     @HostListener('dragover', ['$event'])
@@ -28,6 +41,7 @@ export class FileDropDirective {
     public onDrop(event: DragDropEvent) {
         this.drop.emit(event.dataTransfer.files);
 
+        this.dragEnd(0);
         this.stopEvent(event);
     }
 
@@ -36,6 +50,22 @@ export class FileDropDirective {
         event.stopPropagation();
     }
 
+    private dragStart() {
+        this.dragCounter++;
+
+        if (this.dragCounter === 1) {
+            this.renderer.setElementClass(this.elementRef.nativeElement, 'drag', true);
+        }
+    }
+
+    private dragEnd(number?: number ) {
+        this.dragCounter = number || this.dragCounter - 1;
+
+        if (this.dragCounter === 0) {
+            this.renderer.setElementClass(this.elementRef.nativeElement, 'drag', false);
+        }
+    }
+
     private tryStopEvent(event: DragDropEvent) {
         const hasFiles = this.hasFiles(event.dataTransfer.types);
 

src/Squidex/app/framework/angular/hide-invalid-image.directive.ts

@@ -0,0 +1,29 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';
+
+@Directive({
+    selector: '[sqxHideInvalidImage]'
+})
+export class HideInvalidImage {
+    constructor(
+        private readonly elementRef: ElementRef,
+        private readonly renderer: Renderer
+    ) {
+    }
+
+    @HostListener('error')
+    public onError() {
+        this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'hidden');
+    }
+
+    @HostListener('load')
+    public onLoad() {
+        this.renderer.setElementStyle(this.elementRef.nativeElement, 'visibility', 'visible');
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -17,6 +17,7 @@ export * from './angular/file-drop.directive';
 export * from './angular/focus-on-change.directive';
 export * from './angular/focus-on-init.directive';
 export * from './angular/geolocation-editor.component';
+export * from './angular/hide-invalid-image.directive';
 export * from './angular/http-utils';
 export * from './angular/indeterminate-value.directive';
 export * from './angular/json-editor.component';

src/Squidex/app/framework/module.ts

@@ -27,6 +27,7 @@ import {
     FocusOnInitDirective,
     FromNowPipe,
     GeolocationEditorComponent,
+    HideInvalidImage,
     IndeterminateValueDirective,
     JsonEditorComponent,
     LocalStoreService,
@@ -78,6 +79,7 @@ import {
         FocusOnInitDirective,
         FromNowPipe,
         GeolocationEditorComponent,
+        HideInvalidImage,
         IndeterminateValueDirective,
         JsonEditorComponent,
         MarkdownEditorComponent,
@@ -113,6 +115,7 @@ import {
         FocusOnInitDirective,
         FromNowPipe,
         GeolocationEditorComponent,
+        HideInvalidImage,
         IndeterminateValueDirective,
         JsonEditorComponent,
         MarkdownEditorComponent,

src/Squidex/app/shared/components/dashboard-link.directive.ts

@@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
 import { AppsStoreService } from './../services/apps-store.service';
 
 @Directive({
-    selector: '[dashboardLink]'
+    selector: '[sqxDashboardLink]'
 })
 export class DashboardLinkDirective implements OnInit, OnDestroy {
     private appSubscription: Subscription;