From bf65ebe9a426e7896228ea12b1adc3203ec2882e Mon Sep 17 00:00:00 2001 From: sowobm Date: Fri, 3 Nov 2017 15:19:06 +0200 Subject: [PATCH] rich text editor assets selector changes - show only image mime types (jpeg, png and gif) - hide edit, download and delete icons on asset listing - use absolute urls for inserted images --- .../angular/rich-editor.component.html | 37 ----- .../angular/rich-editor.component.scss | 36 ----- .../angular/rich-editor.component.ts | 141 ------------------ .../shared/components/asset.component.html | 8 +- .../app/shared/components/asset.component.ts | 3 + .../components/rich-editor.component.html | 2 +- .../components/rich-editor.component.ts | 5 +- 7 files changed, 11 insertions(+), 221 deletions(-) delete mode 100644 src/Squidex/app/framework/angular/rich-editor.component.html delete mode 100644 src/Squidex/app/framework/angular/rich-editor.component.scss delete mode 100644 src/Squidex/app/framework/angular/rich-editor.component.ts diff --git a/src/Squidex/app/framework/angular/rich-editor.component.html b/src/Squidex/app/framework/angular/rich-editor.component.html deleted file mode 100644 index 009451124..000000000 --- a/src/Squidex/app/framework/angular/rich-editor.component.html +++ /dev/null @@ -1,37 +0,0 @@ -
- -
-
-
-
-
-

Select an asset

- - -
- -
-
-
- - - - - -
- -
- -
- -
- - -
-
-
-
-
-
\ No newline at end of file diff --git a/src/Squidex/app/framework/angular/rich-editor.component.scss b/src/Squidex/app/framework/angular/rich-editor.component.scss deleted file mode 100644 index 33c03a1e5..000000000 --- a/src/Squidex/app/framework/angular/rich-editor.component.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import '_mixins'; -@import '_vars'; - -.editor { - background: $color-dark-foreground; - border: 1px solid $color-input; - height: 30rem; -} -.asset-selector { - z-index: 65560; - - .modal-header { - background: transparent; - border-bottom: 1px solid #c5c5c5; - - .modal-title { - text-decoration: none; - color: #333; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - text-shadow: none; - } - } - - .modal-content { - width: 100%; - border-radius: 0; - -webkit-border-radius: 0; - } - .modal-dialog { - max-width: 900px; - } - - .btn { - border-radius: 0; - } -} \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/rich-editor.component.ts b/src/Squidex/app/framework/angular/rich-editor.component.ts deleted file mode 100644 index cb742dc84..000000000 --- a/src/Squidex/app/framework/angular/rich-editor.component.ts +++ /dev/null @@ -1,141 +0,0 @@ -/* - * Squidex Headless CMS - * - * @license - * Copyright (c) Sebastian Stehle. All rights reserved - */ - -import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms'; - -import { Types } from './../utils/types'; - -import { ResourceLoaderService } from './../services/resource-loader.service'; - -import { AppComponentBase } from './../../shared/components/app.component-base'; -import { ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager } from './../../shared/declarations-base'; - -declare var tinymce: any; - -export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = { - provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true -}; - -@Component({ - selector: 'sqx-rich-editor', - styleUrls: ['./rich-editor.component.scss'], - templateUrl: './rich-editor.component.html', - providers: [SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR] -}) -export class RichEditorComponent extends AppComponentBase implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit { - private callChange = (v: any) => { /* NOOP */ }; - private callTouched = () => { /* NOOP */ }; - private tinyEditor: any; - private tinyInitTimer: any; - private value: string; - private isDisabled = false; - public assetsItems: ImmutableArray; - public assetsPager = new Pager(0, 0, 12); - - @ViewChild('editor') - public editor: ElementRef; - - public assetsDialog = new ModalView(); - public assetsForm = this.formBuilder.group({ - name: [''] - }); - - constructor(dialogs: DialogService, apps: AppsStoreService, authService: AuthService, - private readonly resourceLoader: ResourceLoaderService, - private readonly formBuilder: FormBuilder, - private readonly assetsService: AssetsService - ) { - super(dialogs, apps, authService); - } - - public ngOnInit() { - - this.appNameOnce() - .switchMap(app => this.assetsService.getAssets(app, this.assetsPager.pageSize, this.assetsPager.skip)) - .subscribe(dtos => { - this.assetsItems = ImmutableArray.of(dtos.items); - this.assetsPager = this.assetsPager.setCount(dtos.total); - }, error => { - this.notifyError(error); - }); - } - - public ngOnDestroy() { - clearTimeout(this.tinyInitTimer); - - tinymce.remove(this.editor); - } - - public ngAfterViewInit() { - const self = this; - - this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.4/tinymce.min.js').then(() => { - tinymce.init({ - setup: (editor: any) => { - self.tinyEditor = editor; - self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); - - self.tinyEditor.on('change', () => { - const value = editor.getContent(); - - if (this.value !== value) { - this.value = value; - - self.callChange(value); - } - }); - - self.tinyEditor.on('blur', () => { - self.callTouched(); - }); - - this.tinyInitTimer = - setTimeout(() => { - self.tinyEditor.setContent(this.value || ''); - }, 500); - }, - removed_menuitems: 'newdocument', plugins: 'code,image', target: this.editor.nativeElement, file_picker_types: 'image', file_picker_callback: (cb: any, value: any, meta: any) => { - self.assetsDialog.show(); - } - }); - }); - } - - public writeValue(value: string) { - this.value = Types.isString(value) ? value : ''; - - if (this.tinyEditor) { - this.tinyEditor.setContent(this.value); - } - } - - public setDisabledState(isDisabled: boolean): void { - this.isDisabled = isDisabled; - - if (this.tinyEditor) { - this.tinyEditor.setMode(isDisabled ? 'readonly' : 'design'); - } - } - - public registerOnChange(fn: any) { - this.callChange = fn; - } - - public registerOnTouched(fn: any) { - this.callTouched = fn; - } - - public selecteAsset() { - console.log('Selecting asset ' + this.assetsForm.controls['name'].value); - } - - public cancelSelectAsset() { - console.log('asset selection canceled'); - this.assetsDialog.hide(); - } -} \ No newline at end of file diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index 96e1f7633..af8ff345b 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -15,17 +15,17 @@
- + - + - + - + diff --git a/src/Squidex/app/shared/components/asset.component.ts b/src/Squidex/app/shared/components/asset.component.ts index d559efba6..1a78c7dc4 100644 --- a/src/Squidex/app/shared/components/asset.component.ts +++ b/src/Squidex/app/shared/components/asset.component.ts @@ -44,6 +44,9 @@ export class AssetComponent extends AppComponentBase implements OnInit { @Input() public closeMode = false; + @Input() + public hideIcons = false; + @Output() public loaded = new EventEmitter(); diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html index 413c8e708..69a0991e9 100644 --- a/src/Squidex/app/shared/components/rich-editor.component.html +++ b/src/Squidex/app/shared/components/rich-editor.component.html @@ -15,7 +15,7 @@
- +