From 42dcbf5813879f527a9364e126846a8d9e705082 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Mon, 10 Apr 2017 22:36:36 +0200 Subject: [PATCH] Asset management improved --- .../assets/pages/asset.component.html | 15 ++++++-- .../assets/pages/asset.component.scss | 31 ++++++++++++++++- .../features/assets/pages/asset.component.ts | 28 +++++++++++++-- .../assets/pages/assets-page.component.scss | 15 +++++--- .../pages/schemas/schemas-page.component.html | 2 +- .../pages/schemas/schemas-page.component.html | 2 +- .../settings/settings-area.component.html | 2 +- .../framework/angular/file-drop.directive.ts | 34 +++++++++++++++++-- .../angular/hide-invalid-image.directive.ts | 29 ++++++++++++++++ src/Squidex/app/framework/declarations.ts | 1 + src/Squidex/app/framework/module.ts | 3 ++ .../components/dashboard-link.directive.ts | 2 +- 12 files changed, 148 insertions(+), 16 deletions(-) create mode 100644 src/Squidex/app/framework/angular/hide-invalid-image.directive.ts diff --git a/src/Squidex/app/features/assets/pages/asset.component.html b/src/Squidex/app/features/assets/pages/asset.component.html index 056377cbf..91669dc4b 100644 --- a/src/Squidex/app/features/assets/pages/asset.component.html +++ b/src/Squidex/app/features/assets/pages/asset.component.html @@ -1,12 +1,21 @@
-
- +
+
{{fileType}}
+ +
+ +
- {{fileInfo}} +
+ {{fileName}} +
+
+ {{fileInfo}} +
\ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/asset.component.scss b/src/Squidex/app/features/assets/pages/asset.component.scss index 1cb4dbd71..54771de50 100644 --- a/src/Squidex/app/features/assets/pages/asset.component.scss +++ b/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; } } \ No newline at end of file diff --git a/src/Squidex/app/features/assets/pages/asset.component.ts b/src/Squidex/app/features/assets/pages/asset.component.ts index e4570eafb..31c419099 100644 --- a/src/Squidex/app/features/assets/pages/asset.component.ts +++ b/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 { - 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 { diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.scss b/src/Squidex/app/features/assets/pages/assets-page.component.scss index c69b86595..e392eee55 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.scss +++ b/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 { - font-size: .8rem; + &.drag { + border-color: darken($color-border, 10%); + border-style: dashed; + cursor: copy; } - &-button { - margin: .5rem 0; + &-or { + font-size: .8rem; } &-info { color: $color-subtext; } + + &-button { + margin: .5rem 0; + } } .btn { diff --git a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html index f17f76336..2274b91b3 100644 --- a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html +++ b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html @@ -6,7 +6,7 @@

Schemas

- + diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html index de126bfec..33ab0c471 100644 --- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html @@ -6,7 +6,7 @@

Schemas

- + diff --git a/src/Squidex/app/features/settings/settings-area.component.html b/src/Squidex/app/features/settings/settings-area.component.html index f911bd8cf..3947075f2 100644 --- a/src/Squidex/app/features/settings/settings-area.component.html +++ b/src/Squidex/app/features/settings/settings-area.component.html @@ -4,7 +4,7 @@

Settings

- + diff --git a/src/Squidex/app/framework/angular/file-drop.directive.ts b/src/Squidex/app/framework/angular/file-drop.directive.ts index 78a89a448..550968cbb 100644 --- a/src/Squidex/app/framework/angular/file-drop.directive.ts +++ b/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(); + 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); diff --git a/src/Squidex/app/framework/angular/hide-invalid-image.directive.ts b/src/Squidex/app/framework/angular/hide-invalid-image.directive.ts new file mode 100644 index 000000000..346c5db0a --- /dev/null +++ b/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'); + } +} \ No newline at end of file diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index a506c6d58..67afb631d 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/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'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index 22b4474b5..6d841759c 100644 --- a/src/Squidex/app/framework/module.ts +++ b/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, diff --git a/src/Squidex/app/shared/components/dashboard-link.directive.ts b/src/Squidex/app/shared/components/dashboard-link.directive.ts index ee884975d..5c858a387 100644 --- a/src/Squidex/app/shared/components/dashboard-link.directive.ts +++ b/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;