From 2800b0b125cd69e89d998843a3308bd4b4cbc0f9 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Mar 2017 23:32:21 +0100 Subject: [PATCH] 1) Styling fix 2) Disable fixes --- .../schemas/pages/schema/field.component.html | 2 +- .../angular/date-time-editor.component.html | 2 +- .../angular/date-time-editor.component.ts | 4 ++ .../angular/geolocation-editor.component.html | 2 +- .../angular/geolocation-editor.component.ts | 49 +++++++++++++++++-- .../angular/markdown-editor.component.ts | 1 + .../angular/rich-editor.component.ts | 1 + src/Squidex/app/theme/_bootstrap.scss | 5 ++ 8 files changed, 59 insertions(+), 7 deletions(-) diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html index 20b8b8ee8..1e5307adf 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html @@ -38,7 +38,7 @@ Show - + Delete diff --git a/src/Squidex/app/framework/angular/date-time-editor.component.html b/src/Squidex/app/framework/angular/date-time-editor.component.html index 9b29ddf05..2bc487744 100644 --- a/src/Squidex/app/framework/angular/date-time-editor.component.html +++ b/src/Squidex/app/framework/angular/date-time-editor.component.html @@ -7,7 +7,7 @@
- +
diff --git a/src/Squidex/app/framework/angular/date-time-editor.component.ts b/src/Squidex/app/framework/angular/date-time-editor.component.ts index 232fa1b37..755bd2f1e 100644 --- a/src/Squidex/app/framework/angular/date-time-editor.component.ts +++ b/src/Squidex/app/framework/angular/date-time-editor.component.ts @@ -52,6 +52,8 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnInit, Af @ViewChild('dateInput') public dateInput: ElementRef; + public isDisabled = false; + public ngOnInit() { this.timeControl.valueChanges.subscribe(value => { if (!value || value.length === 0) { @@ -92,6 +94,8 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnInit, Af } public setDisabledState(isDisabled: boolean): void { + this.isDisabled = isDisabled; + if (isDisabled) { this.dateControl.disable({ emitEvent: false }); this.timeControl.disable({ emitEvent: false }); diff --git a/src/Squidex/app/framework/angular/geolocation-editor.component.html b/src/Squidex/app/framework/angular/geolocation-editor.component.html index 720f0c22c..fd3392b28 100644 --- a/src/Squidex/app/framework/angular/geolocation-editor.component.html +++ b/src/Squidex/app/framework/angular/geolocation-editor.component.html @@ -10,7 +10,7 @@
- +
diff --git a/src/Squidex/app/framework/angular/geolocation-editor.component.ts b/src/Squidex/app/framework/angular/geolocation-editor.component.ts index c5db722aa..c14e9a36e 100644 --- a/src/Squidex/app/framework/angular/geolocation-editor.component.ts +++ b/src/Squidex/app/framework/angular/geolocation-editor.component.ts @@ -48,11 +48,11 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi ]] }); - public isDisabled = false; - @ViewChild('editor') public editor: ElementRef; + public isDisabled = false; + constructor( private readonly resourceLoader: ResourceLoaderService, private readonly formBuilder: FormBuilder @@ -69,6 +69,34 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; + + if (isDisabled) { + if (this.map) { + this.map.zoomControl.disable(); + this.map._handlers.forEach((handler: any) => { + handler.disable(); + }); + } + + if (this.marker) { + this.marker.dragging.disable(); + } + + this.geolocationForm.disable(); + } else { + if (this.map) { + this.map.zoomControl.enable(); + this.map._handlers.forEach((handler: any) => { + handler.enable(); + }); + } + + if (this.marker) { + this.marker.dragging.enable(); + } + + this.geolocationForm.enable(); + } } public registerOnChange(fn: any) { @@ -101,12 +129,21 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi }).addTo(this.map); this.map.on('click', (event: any) => { - this.value = { latitude: event.latlng.lat, longitude: event.latlng.lng }; + if (!this.marker) { + this.value = { latitude: event.latlng.lat, longitude: event.latlng.lng }; - this.updateMarker(false, true); + this.updateMarker(false, true); + } }); this.updateMarker(true, false); + + if (this.isDisabled) { + this.map.zoomControl.disable(); + this.map._handlers.forEach((handler: any) => { + handler.disable(); + }); + } }); } @@ -128,6 +165,10 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi this.marker.on('dragend', (event: any) => { this.updateMarker(false, true); }); + + if (this.isDisabled) { + this.marker.dragging.disable(); + } } const latLng = L.latLng(this.value.latitude, this.value.longitude); diff --git a/src/Squidex/app/framework/angular/markdown-editor.component.ts b/src/Squidex/app/framework/angular/markdown-editor.component.ts index a5f9de910..e194e015c 100644 --- a/src/Squidex/app/framework/angular/markdown-editor.component.ts +++ b/src/Squidex/app/framework/angular/markdown-editor.component.ts @@ -76,6 +76,7 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI this.resourceLoader.loadScript('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js').then(() => { this.simplemde = new SimpleMDE({ element: this.editor.nativeElement }); this.simplemde.value(this.value || ''); + this.simplemde.codemirror.setOption('readOnly', this.isDisabled); this.simplemde.codemirror.on('change', () => { const value = this.simplemde.value(); diff --git a/src/Squidex/app/framework/angular/rich-editor.component.ts b/src/Squidex/app/framework/angular/rich-editor.component.ts index a0f1da652..90ad46f85 100644 --- a/src/Squidex/app/framework/angular/rich-editor.component.ts +++ b/src/Squidex/app/framework/angular/rich-editor.component.ts @@ -70,6 +70,7 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, tinymce.init({ setup: (editor: any) => { self.tinyEditor = editor; + self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); self.tinyEditor.on('change', () => { const value = editor.getContent(); diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss index c44b29862..6f97e0b5e 100644 --- a/src/Squidex/app/theme/_bootstrap.scss +++ b/src/Squidex/app/theme/_bootstrap.scss @@ -56,6 +56,11 @@ body { &:active { background: $color-theme-error-dark; border: 0; + } + } + + &.dropdown-item { + &:active { color: $color-accent-dark; } }