mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
59 changed files with 775 additions and 304 deletions
@ -0,0 +1,35 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Directive, ElementRef, HostListener, OnInit, Renderer } from '@angular/core'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[sqxSquare]' |
||||
|
}) |
||||
|
export class SquareDirective implements OnInit { |
||||
|
|
||||
|
constructor( |
||||
|
private readonly element: ElementRef, |
||||
|
private readonly renderer: Renderer |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.resize(); |
||||
|
} |
||||
|
|
||||
|
@HostListener('resize') |
||||
|
public onResize() { |
||||
|
this.resize(); |
||||
|
} |
||||
|
|
||||
|
private resize() { |
||||
|
const size = this.element.nativeElement.getBoundingClientRect(); |
||||
|
|
||||
|
this.renderer.setElementStyle(this.element.nativeElement, 'height', size.width + 'px'); |
||||
|
} |
||||
|
} |
||||
@ -1,54 +1,60 @@ |
|||||
<div class="asset"> |
<div class="asset"> |
||||
<div class="card" (sqxFileDrop)="updateFile($event)"> |
<div class="card" (sqxFileDrop)="updateFile($event)" sqxSquare dnd-draggable [dragEnabled]="!!asset" [dragData]="asset"> |
||||
<div *ngIf="asset && progress == 0" [@fade]> |
<div class="card-block"> |
||||
<div class="card-block"> |
<div class="file-preview" *ngIf="asset && progress == 0" [@fade]> |
||||
<div class="file-preview"> |
<span class="file-type" *ngIf="fileType"> |
||||
<span class="file-type" *ngIf="fileType"> |
{{fileType}} |
||||
{{fileType}} |
</span> |
||||
</span> |
|
||||
|
<div *ngIf="asset.isImage" class="file-image"> |
||||
|
<img [sqxImageSource]="previewUrl"> |
||||
|
</div> |
||||
|
<div *ngIf="!asset.isImage" class="file-icon-container"> |
||||
|
<img class="file-icon" [attr.src]="fileIcon"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="file-overlay"> |
||||
|
<div class="file-overlay-background"></div> |
||||
|
|
||||
<div *ngIf="asset.isImage" class="file-image"> |
<a class="file-edit" (click)="renameDialog.show()"> |
||||
<img [sqxImageSource]="previewUrl"> |
<i class="icon-pencil"></i> |
||||
</div> |
</a> |
||||
<div *ngIf="!asset.isImage" class="file-icon-container"> |
<a class="file-download" [attr.href]="fileUrl" target="_blank"> |
||||
<img class="file-icon" [attr.src]="fileIcon"> |
<i class="icon-download"></i> |
||||
</div> |
</a> |
||||
|
|
||||
<div class="file-overlay"> |
<span *ngIf="!closeMode"> |
||||
<div class="file-overlay-background"></div> |
|
||||
|
|
||||
<a class="file-edit" (click)="renameDialog.show()"> |
|
||||
<i class="icon-pencil"></i> |
|
||||
</a> |
|
||||
<a class="file-download" [attr.href]="fileUrl" target="_blank"> |
|
||||
<i class="icon-download"></i> |
|
||||
</a> |
|
||||
<a class="file-delete" (click)="deleting.emit(asset)"> |
<a class="file-delete" (click)="deleting.emit(asset)"> |
||||
<i class="icon-delete"></i> |
<i class="icon-delete"></i> |
||||
</a> |
</a> |
||||
|
</span> |
||||
|
<span *ngIf="closeMode"> |
||||
|
<a class="file-delete" (click)="closing.emit(asset)"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</span> |
||||
|
|
||||
<span class="file-overlay-type" *ngIf="fileType"> |
<span class="file-overlay-type" *ngIf="fileType"> |
||||
{{fileType}} |
{{fileType}} |
||||
</span> |
</span> |
||||
<span class="file-user"> |
<span class="file-user"> |
||||
<i class="icon-user"></i> {{userName(asset.lastModifiedBy, true) | async}} |
<i class="icon-user"></i> {{asset.lastModifiedBy | userNameRef}} |
||||
</span> |
</span> |
||||
<span class="file-modified"> |
<span class="file-modified"> |
||||
{{asset.lastModified | fromNow}} |
{{asset.lastModified | fromNow}} |
||||
</span> |
</span> |
||||
|
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="card-footer"> |
</div> |
||||
<div class="file-name" [attr.title]="fileName"> |
<div class="card-footer"> |
||||
{{fileName}} |
<div class="file-name" [attr.title]="fileName"> |
||||
</div> |
{{fileName}} |
||||
<div class="file-info"> |
</div> |
||||
{{fileInfo}} |
<div class="file-info"> |
||||
</div> |
{{fileInfo}} |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<div *ngIf="progress > 0"> |
<div *ngIf="progress > 0"> |
||||
<sqx-progress-bar class="upload-progress" style="width: 120px; height: 120px" mode="Circle" [value]="progress"></sqx-progress-bar> |
<sqx-progress-bar class="upload-progress" style="width: 120px; height: 120px" mode="Circle" [value]="progress"></sqx-progress-bar> |
||||
</div> |
</div> |
||||
@ -1,3 +1,11 @@ |
|||||
<div class="assets-container"> |
<div class="assets-container" (sqxFileDrop)="addFiles($event)" dnd-droppable (onDropSuccess)="onAssetDropped($event.dragData)"> |
||||
|
<div class="row"> |
||||
|
<sqx-asset class="col-4" *ngFor="let file of newAssets" [initFile]="file" |
||||
|
(failed)="onAssetFailed(file)" |
||||
|
(loaded)="onAssetLoaded(file, $event)"> |
||||
|
</sqx-asset> |
||||
|
<sqx-asset class="col-4" *ngFor="let asset of oldAssets" [asset]="asset" [closeMode]="true" |
||||
|
(closing)="onAssetRemoving($event)"> |
||||
|
</sqx-asset> |
||||
|
</div> |
||||
</div> |
</div> |
||||
@ -0,0 +1,159 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core'; |
||||
|
import { Observable, Subscription } from 'rxjs'; |
||||
|
|
||||
|
import { UsersProviderService } from './../declarations-base'; |
||||
|
|
||||
|
class UserAsyncPipe implements OnDestroy { |
||||
|
private lastUserId: string; |
||||
|
private lastValue: string; |
||||
|
private subscription: Subscription; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly users: UsersProviderService, |
||||
|
private readonly changeDetector: ChangeDetectorRef |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
if (this.subscription) { |
||||
|
this.subscription.unsubscribe(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected transformInternal(userId: string, transform: (users: UsersProviderService) => Observable<string>): string { |
||||
|
if (this.lastUserId !== userId) { |
||||
|
this.lastUserId = userId; |
||||
|
|
||||
|
if (this.subscription) { |
||||
|
this.subscription.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
this.subscription = transform(this.users).subscribe(value => { |
||||
|
this.lastValue = value; |
||||
|
|
||||
|
this.changeDetector.markForCheck(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return this.lastValue; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userName', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserNamePipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string, placeholder = 'Me'): string { |
||||
|
return super.transformInternal(userId, users => users.getUser(userId, placeholder).map(u => u.displayName)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userNameRef', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserNameRefPipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string, placeholder = 'Me'): string { |
||||
|
return super.transformInternal(userId, users => { |
||||
|
const parts = userId.split(':'); |
||||
|
|
||||
|
if (parts[0] === 'subject') { |
||||
|
return users.getUser(parts[1], placeholder).map(u => u.displayName); |
||||
|
} else { |
||||
|
if (parts[1].endsWith('client')) { |
||||
|
return Observable.of(parts[1]); |
||||
|
} else { |
||||
|
return Observable.of(`${parts[1]}-client`); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userEmail', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserEmailPipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string): string { |
||||
|
return super.transformInternal(userId, users => users.getUser(userId).map(u => u.email)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userEmailRef', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserEmailRefPipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string): string { |
||||
|
return super.transformInternal(userId, users => { |
||||
|
const parts = userId.split(':'); |
||||
|
|
||||
|
if (parts[0] === 'subject') { |
||||
|
return users.getUser(parts[1]).map(u => u.email); |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userPicture', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserPicturePipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string): string { |
||||
|
return super.transformInternal(userId, users => users.getUser(userId).map(u => u.pictureUrl)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'userPictureRef', |
||||
|
pure: false |
||||
|
}) |
||||
|
export class UserPictureRefPipe extends UserAsyncPipe implements PipeTransform { |
||||
|
constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) { |
||||
|
super(users, changeDetector); |
||||
|
} |
||||
|
|
||||
|
public transform(userId: string): string { |
||||
|
return super.transformInternal(userId, users => { |
||||
|
const parts = userId.split(':'); |
||||
|
|
||||
|
if (parts[0] === 'subject') { |
||||
|
return users.getUser(parts[1]).map(u => u.pictureUrl); |
||||
|
} else { |
||||
|
return Observable.of('/images/client.png'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
export * from './guards/app-must-exist.guard'; |
||||
|
export * from './guards/must-be-authenticated.guard'; |
||||
|
export * from './guards/must-be-not-authenticated.guard'; |
||||
|
export * from './guards/resolve-app-languages.guard'; |
||||
|
export * from './guards/resolve-content.guard'; |
||||
|
export * from './guards/resolve-published-schema.guard'; |
||||
|
export * from './guards/resolve-schema.guard'; |
||||
|
|
||||
|
export * from './services/app-contributors.service'; |
||||
|
export * from './services/app-clients.service'; |
||||
|
export * from './services/app-languages.service'; |
||||
|
export * from './services/apps-store.service'; |
||||
|
export * from './services/apps.service'; |
||||
|
export * from './services/assets.service'; |
||||
|
export * from './services/auth.service'; |
||||
|
export * from './services/contents.service'; |
||||
|
export * from './services/event-consumers.service'; |
||||
|
export * from './services/help.service'; |
||||
|
export * from './services/history.service'; |
||||
|
export * from './services/languages.service'; |
||||
|
export * from './services/schemas.service'; |
||||
|
export * from './services/users-provider.service'; |
||||
|
export * from './services/users.service'; |
||||
|
|
||||
|
export * from './utils/file-helper'; |
||||
|
export * from './utils/messages'; |
||||
|
|
||||
|
export * from 'framework'; |
||||
Loading…
Reference in new issue