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 52bd7698f..9d55fe35e 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 @@ -26,11 +26,13 @@ - - +
+ + +
diff --git a/src/Squidex/app/framework/angular/drag-helper.ts b/src/Squidex/app/framework/angular/drag-helper.ts index 8e49daec3..5b5da47ea 100644 --- a/src/Squidex/app/framework/angular/drag-helper.ts +++ b/src/Squidex/app/framework/angular/drag-helper.ts @@ -7,10 +7,27 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { Types } from './../utils/types'; + export function sorted(event: CdkDragDrop>): ReadonlyArray { const items = event.container.data; moveItemInArray(items, event.previousIndex, event.currentIndex); return items; +} + +export function getFiles(files: FileList | ReadonlyArray) { + if (Types.isArray(files)) { + return files; + } + + const result: File[] = []; + + // tslint:disable-next-line: prefer-for-of + for (let i = 0; i < files.length; i++) { + result.push(files[i]); + } + + return result; } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/sorted.directive.ts b/src/Squidex/app/framework/angular/sorted.directive.ts deleted file mode 100644 index 30edd908b..000000000 --- a/src/Squidex/app/framework/angular/sorted.directive.ts +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Squidex Headless CMS - * - * @license - * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. - */ - -// tslint:disable: readonly-array - -import { Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core'; -import Sortable from 'sortablejs'; - -const DEFAULT_PROPS = { sort: true, animation: 150 }; - -@Directive({ - selector: '[sqxSortModel]' -}) -export class SortedDirective implements OnChanges, OnDestroy, OnInit { - private sortable: Sortable.Ref; - - @Input() - public dragHandle = '.drag-handle'; - - @Input('sqxSortModel') - public sortModel: any[]; - - @Output('sqxSort') - public sort = new EventEmitter(); - - @Input('sqxSortDisabled') - public isDisabled = false; - - constructor( - private readonly elementRef: ElementRef - ) { - } - - public ngOnChanges() { - if (this.sortable) { - this.sortable.option('disabled', this.isDisabled); - } - } - - public ngOnDestroy() { - if (this.sortable) { - this.sortable.destroy(); - } - } - - public ngOnInit() { - this.sortable = Sortable.create(this.elementRef.nativeElement, { - ...DEFAULT_PROPS, - - onSort: (event: { oldIndex: number, newIndex: number }) => { - if (this.sortModel && event.newIndex !== event.oldIndex) { - const newModel = [...this.sortModel]; - - const item = this.sortModel[event.oldIndex]; - - newModel.splice(event.oldIndex, 1); - newModel.splice(event.newIndex, 0, item); - - this.sort.emit(newModel); - } - }, - - handle: this.dragHandle - }); - - this.sortable.option('disabled', this.isDisabled); - } -} \ No newline at end of file diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index 297ba6e3a..c12dd61a4 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/src/Squidex/app/framework/declarations.ts @@ -67,7 +67,6 @@ export * from './angular/popup-link.directive'; export * from './angular/safe-html.pipe'; export * from './angular/scroll-active.directive'; export * from './angular/shortcut.component'; -export * from './angular/sorted.directive'; export * from './angular/status-icon.component'; export * from './angular/stop-click.directive'; export * from './angular/sync-scrolling.directive'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index e1d5a1178..b1879c237 100644 --- a/src/Squidex/app/framework/module.ts +++ b/src/Squidex/app/framework/module.ts @@ -82,7 +82,6 @@ import { ShortcutService, ShortDatePipe, ShortTimePipe, - SortedDirective, StarsComponent, StatusIconComponent, StopClickDirective, @@ -162,7 +161,6 @@ import { ShortcutComponent, ShortDatePipe, ShortTimePipe, - SortedDirective, StarsComponent, StatusIconComponent, StopClickDirective, @@ -236,7 +234,6 @@ import { ShortcutComponent, ShortDatePipe, ShortTimePipe, - SortedDirective, StarsComponent, StatusIconComponent, StopClickDirective, diff --git a/src/Squidex/app/shared/components/asset.component.scss b/src/Squidex/app/shared/components/asset.component.scss index a8031ecf6..0aa1b7b3c 100644 --- a/src/Squidex/app/shared/components/asset.component.scss +++ b/src/Squidex/app/shared/components/asset.component.scss @@ -107,7 +107,8 @@ $list-height: 2.375rem; background: $color-dark-black; } - &-name, &-info { + &-name, + &-info { @include truncate; } diff --git a/src/Squidex/app/shared/components/assets-list.component.ts b/src/Squidex/app/shared/components/assets-list.component.ts index 8667a521b..f27736491 100644 --- a/src/Squidex/app/shared/components/assets-list.component.ts +++ b/src/Squidex/app/shared/components/assets-list.component.ts @@ -8,7 +8,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { onErrorResumeNext } from 'rxjs/operators'; -import { AssetDto, AssetsState } from '@app/shared/internal'; +import { + AssetDto, + AssetsState, + getFiles +} from '@app/shared/internal'; @Component({ selector: 'sqx-assets-list', @@ -86,7 +90,7 @@ export class AssetsListComponent { } public addFiles(files: ReadonlyArray) { - this.newFiles = [...files, ...this.newFiles]; + this.newFiles = [...getFiles(files), ...this.newFiles]; return true; } diff --git a/src/Squidex/package-lock.json b/src/Squidex/package-lock.json index d8e399e6a..e2495cb60 100644 --- a/src/Squidex/package-lock.json +++ b/src/Squidex/package-lock.json @@ -12647,11 +12647,6 @@ "is-plain-obj": "^1.0.0" } }, - "sortablejs": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz", - "integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ==" - }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/src/Squidex/package.json b/src/Squidex/package.json index 19d42b21e..912278e8b 100644 --- a/src/Squidex/package.json +++ b/src/Squidex/package.json @@ -43,7 +43,6 @@ "react-dom": "16.10.2", "rxjs": "6.5.3", "slugify": "1.3.5", - "sortablejs": "^1.10.1", "tslib": "1.10.0", "zone.js": "0.10.2" },