diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html index 402bcdbad..920d9baef 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -35,7 +35,7 @@
-
+
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.html b/src/Squidex/app/features/content/shared/assets-editor.component.html index 115d7fceb..1a24aa4ed 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -1,18 +1,50 @@
-
-
- Drop files here to add them. +
+
+
+
+ Drop files or click here to add assets. +
+
+
+
+ + +
+
- - - - - +
+ +
+ + + + + + + + +
+
+ + + + +
+
+
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss index 30c6f3189..be74dae8c 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.scss +++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss @@ -18,15 +18,23 @@ } } +.header { + margin-bottom: .5rem; +} + +.list { + margin-left: 8px; + margin-right: 8px; +} + .drop-area { & { @include transition(border-color .4s ease); @include border-radius; @include flex-box; + @include truncate; border: 2px dashed $color-border; - height: $asset-height; - width: $asset-width; - margin-left: 8px; + height: 2.5rem; font-size: 1.2rem; font-weight: normal; text-align: center; diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts index cb022c704..4665593f4 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -16,6 +16,7 @@ import { AssetsService, DialogModel, ImmutableArray, + LocalStoreService, Types } from '@app/shared'; @@ -40,12 +41,15 @@ export class AssetsEditorComponent implements ControlValueAccessor { public newAssets = ImmutableArray.empty(); public oldAssets = ImmutableArray.empty(); + public isListView = false; public isDisabled = false; constructor( private readonly appsState: AppsState, - private readonly assetsService: AssetsService + private readonly assetsService: AssetsService, + private readonly localStore: LocalStoreService ) { + this.isListView = this.localStore.get('assetView') === 'List'; } public writeValue(obj: any) { @@ -128,4 +132,10 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.callTouched(); this.callChange(ids); } + + public changeView(isListView: boolean) { + this.localStore.set('assetView', isListView ? 'List' : 'Grid'); + + this.isListView = isListView; + } } \ No newline at end of file diff --git a/src/Squidex/app/shared/components/assets-selector.component.html b/src/Squidex/app/shared/components/assets-selector.component.html index 8959285df..7b6ca4234 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.html +++ b/src/Squidex/app/shared/components/assets-selector.component.html @@ -30,7 +30,7 @@
-
+