diff --git a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.ts b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.ts index e96237e2a..640a03bf7 100644 --- a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.ts +++ b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.ts @@ -26,7 +26,7 @@ import { fadeAnimation ] }) -export class EventConsumersPageComponent extends ComponentBase implements OnInit, OnDestroy { +export class EventConsumersPageComponent extends ComponentBase implements OnDestroy, OnInit { private subscription: Subscription; public eventConsumerErrorDialog = new ModalView(); diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html index dd13b10ac..3a8f06e69 100644 --- a/src/Squidex/app/features/content/pages/content/content-page.component.html +++ b/src/Squidex/app/features/content/pages/content/content-page.component.html @@ -54,24 +54,4 @@ - - -
-
-
-
-
-

Unsaved changes

-
- -
- You have unsaved changes, do you want to close the current content view? -
- -
- - -
-
-
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.ts b/src/Squidex/app/features/content/pages/content/content-page.component.ts index f323a88a6..0bcb87ed5 100644 --- a/src/Squidex/app/features/content/pages/content/content-page.component.ts +++ b/src/Squidex/app/features/content/pages/content/content-page.component.ts @@ -8,7 +8,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; -import { Observable, Subject, Subscription } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; import { ContentCreated, @@ -26,8 +26,6 @@ import { ContentDto, ContentsService, DialogService, - fadeAnimation, - ModalView, MessageBus, SchemaDetailsDto, Version @@ -36,20 +34,15 @@ import { @Component({ selector: 'sqx-content-page', styleUrls: ['./content-page.component.scss'], - templateUrl: './content-page.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './content-page.component.html' }) export class ContentPageComponent extends AppComponentBase implements CanComponentDeactivate, OnDestroy, OnInit { private contentDeletedSubscription: Subscription; private version = new Version(''); - private cancelPromise: Subject | null = null; private content: ContentDto; public schema: SchemaDetailsDto; - public cancelDialog = new ModalView(); public contentFormSubmitted = false; public contentForm: FormGroup; public contentData: any = null; @@ -100,27 +93,7 @@ export class ContentPageComponent extends AppComponentBase implements CanCompone if (!this.contentForm.dirty || this.isNewMode) { return Observable.of(true); } else { - this.cancelDialog.show(); - - return this.cancelPromise = new Subject(); - } - } - - public confirmLeave() { - this.cancelDialog.hide(); - - if (this.cancelPromise) { - this.cancelPromise.next(true); - this.cancelPromise = null; - } - } - - public cancelLeave() { - this.cancelDialog.hide(); - - if (this.cancelPromise) { - this.cancelPromise.next(false); - this.cancelPromise = null; + return this.dialogs.confirmUnsavedChanges(); } } diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html index 2b138cddd..6111235dd 100644 --- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html +++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html @@ -68,7 +68,7 @@ - Unpublish - + Delete 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 647444d0b..70cfddbf5 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html @@ -27,9 +27,6 @@
- - Lock - Enable @@ -41,8 +38,17 @@ Show + + + Lock - + Delete
@@ -186,24 +192,4 @@ - - -
-
-
-
-
-

Lock Field

-
- -
- Do you really want to lock the field? Lock fields cannot be changed and deleted. -
- -
- - -
-
-
\ No newline at end of file diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.ts b/src/Squidex/app/features/schemas/pages/schema/field.component.ts index 9705f8c43..0233f931a 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.ts @@ -32,28 +32,27 @@ export class FieldComponent implements OnInit { public schemas: SchemaDto[]; @Output() - public locking = new EventEmitter(); + public locking = new EventEmitter(); @Output() - public hiding = new EventEmitter(); + public hiding = new EventEmitter(); @Output() - public showing = new EventEmitter(); + public showing = new EventEmitter(); @Output() - public saving= new EventEmitter(); + public saving= new EventEmitter(); @Output() - public enabling = new EventEmitter(); + public enabling = new EventEmitter(); @Output() - public disabling = new EventEmitter(); + public disabling = new EventEmitter(); @Output() - public deleting = new EventEmitter(); + public deleting = new EventEmitter(); public dropdown = new ModalView(false, true); - public lockDialog = new ModalView(false, true); public isEditing = false; public selectedTab = 0; @@ -118,23 +117,6 @@ export class FieldComponent implements OnInit { } } - public confirmLock() { - this.lockDialog.hide(); - this.emitLocking(this.field); - } - - public cancelLock() { - this.lockDialog.hide(); - } - - public askLock() { - this.lockDialog.show(); - } - - private emitLocking(field: FieldDto) { - this.locking.emit(field); - } - private emitSaving(field: FieldDto) { this.saving.emit(field); } diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts index cc193b6bc..a30142527 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts @@ -47,8 +47,6 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { public schema: SchemaDetailsDto; public schemas: SchemaDto[]; - public confirmDeleteDialog = new ModalView(); - public exportSchemaDialog = new ModalView(); public editOptionsDropdown = new ModalView(); @@ -202,10 +200,8 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { .switchMap(app => this.schemasService.deleteSchema(app, this.schema.name, this.schema.version)).retry(2) .subscribe(() => { this.emitSchemaDeleted(this.schema); - this.hideDeleteDialog(); this.back(); }, error => { - this.hideDeleteDialog(); this.notifyError(error); }); } @@ -300,10 +296,6 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { this.messageBus.emit(new SchemaUpdated(schema)); } - private hideDeleteDialog() { - this.confirmDeleteDialog.hide(); - } - private notify() { this.messageBus.emit(new HistoryChannelUpdated()); } diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html index 414ed5ff3..9385a3b2b 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.html +++ b/src/Squidex/app/features/settings/pages/clients/client.component.html @@ -39,7 +39,10 @@
Access tokens expire after 30 days
- diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.html b/src/Squidex/app/features/settings/pages/languages/language.component.html index 36258b647..72e8ed4c6 100644 --- a/src/Squidex/app/features/settings/pages/languages/language.component.html +++ b/src/Squidex/app/features/settings/pages/languages/language.component.html @@ -13,7 +13,10 @@ - diff --git a/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html b/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html index 221cba78b..5368acec3 100644 --- a/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html +++ b/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html @@ -42,7 +42,10 @@ - diff --git a/src/Squidex/app/framework/angular/confirm-click.directive.ts b/src/Squidex/app/framework/angular/confirm-click.directive.ts index 4c3450b1b..74d9980b0 100644 --- a/src/Squidex/app/framework/angular/confirm-click.directive.ts +++ b/src/Squidex/app/framework/angular/confirm-click.directive.ts @@ -5,14 +5,37 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; +import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'; import { DialogService } from './../services/dialog.service'; +class DelayEventEmitter extends EventEmitter { + private delayedNexts: any[] = []; + + public delayEmit() { + for (let callback of this.delayedNexts) { + callback(); + } + } + + public clear() { + this.delayedNexts = null; + } + + public subscribe(generatorOrNext?: any, error?: any, complete?: any): any { + this.delayedNexts.push(generatorOrNext); + + return super.subscribe(generatorOrNext, error, complete); + } +} + @Directive({ selector: '[sqxConfirmClick]' }) -export class ConfirmClickDirective { +export class ConfirmClickDirective implements OnDestroy { + private isOpen = false; + private isDestroyed = false; + @Input() public confirmTitle: string; @@ -20,13 +43,21 @@ export class ConfirmClickDirective { public confirmText: string; @Output('sqxConfirmClick') - public click = new EventEmitter(); + public clickConfirmed = new DelayEventEmitter(); constructor( private readonly dialogService: DialogService ) { } + public ngOnDestroy() { + this.isDestroyed = true; + + if (!this.isOpen) { + this.clickConfirmed.clear(); + } + } + @HostListener('click', ['$event']) public onClick(event: Event) { if (this.confirmTitle && @@ -34,17 +65,27 @@ export class ConfirmClickDirective { this.confirmText && this.confirmText.length > 0) { + this.isOpen = true; + let subscription = this.dialogService.confirm(this.confirmTitle, this.confirmText) .subscribe(result => { + this.isOpen = false; + if (result) { - this.click.emit(); + if (result) { + this.clickConfirmed.delayEmit(); + } } subscription.unsubscribe(); + + if (this.isDestroyed) { + this.clickConfirmed.clear(); + } }); } else { - this.click.emit(); + this.clickConfirmed.emit(); } event.stopPropagation(); 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 8168326f2..85360418d 100644 --- a/src/Squidex/app/framework/angular/date-time-editor.component.ts +++ b/src/Squidex/app/framework/angular/date-time-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { AfterViewInit, Component, forwardRef, ElementRef, Input, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, forwardRef, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subscription } from 'rxjs'; import * as moment from 'moment'; diff --git a/src/Squidex/app/framework/angular/dialog-renderer.component.html b/src/Squidex/app/framework/angular/dialog-renderer.component.html index d73b99be0..958e422e3 100644 --- a/src/Squidex/app/framework/angular/dialog-renderer.component.html +++ b/src/Squidex/app/framework/angular/dialog-renderer.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/Squidex/app/framework/angular/dialog-renderer.component.scss b/src/Squidex/app/framework/angular/dialog-renderer.component.scss index 0e88def61..e4d5246c6 100644 --- a/src/Squidex/app/framework/angular/dialog-renderer.component.scss +++ b/src/Squidex/app/framework/angular/dialog-renderer.component.scss @@ -10,19 +10,19 @@ z-index: 100000; } - &-righttop { + &-topright { @include fixed(0, 0, auto, auto); } - &-rightbottom { - @include fixed(auto, 0, 0, auto); + &-topleft { + @include fixed(0, auto, auto, 0); } - &-lefttop { - @include fixed(0, auto, auto, 0); + &-bottomright { + @include fixed(auto, 0, 0, auto); } - &-leftbottom { + &-bottomleft { @include fixed(auto, auto, 0, 0); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/dialog-renderer.component.ts b/src/Squidex/app/framework/angular/dialog-renderer.component.ts index a9427c0bf..242f7aed4 100644 --- a/src/Squidex/app/framework/angular/dialog-renderer.component.ts +++ b/src/Squidex/app/framework/angular/dialog-renderer.component.ts @@ -8,8 +8,6 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; -import { fadeAnimation } from './animations'; - import { DialogRequest, DialogService, @@ -21,12 +19,10 @@ import { ModalView } from './../utils/modal-view'; @Component({ selector: 'sqx-dialog-renderer', styleUrls: ['./dialog-renderer.component.scss'], - templateUrl: './dialog-renderer.component.html', - animations: [ - fadeAnimation - ] + templateUrl: './dialog-renderer.component.html' }) export class DialogRendererComponent implements OnDestroy, OnInit { + private dialogSubscription: Subscription; private dialogsSubscription: Subscription; private notificationsSubscription: Subscription; @@ -45,10 +41,18 @@ export class DialogRendererComponent implements OnDestroy, OnInit { public ngOnDestroy() { this.notificationsSubscription.unsubscribe(); + this.dialogSubscription.unsubscribe(); this.dialogsSubscription.unsubscribe(); } public ngOnInit() { + this.dialogSubscription = + this.dialogView.isOpen.subscribe(isOpen => { + if (!isOpen) { + this.cancel(); + } + }); + this.notificationsSubscription = this.dialogService.notifications.subscribe(notification => { this.notifications.push(notification); diff --git a/src/Squidex/app/framework/angular/parent-link.directive.ts b/src/Squidex/app/framework/angular/parent-link.directive.ts index bdd3ef643..3503a464f 100644 --- a/src/Squidex/app/framework/angular/parent-link.directive.ts +++ b/src/Squidex/app/framework/angular/parent-link.directive.ts @@ -12,7 +12,7 @@ import { Subscription } from 'rxjs'; @Directive({ selector: '[sqxParentLink]' }) -export class ParentLinkDirective implements OnInit, OnDestroy { +export class ParentLinkDirective implements OnDestroy, OnInit { private urlSubscription: Subscription; private url: string; diff --git a/src/Squidex/app/framework/angular/shortcut.component.ts b/src/Squidex/app/framework/angular/shortcut.component.ts index 183eae992..b266f5f96 100644 --- a/src/Squidex/app/framework/angular/shortcut.component.ts +++ b/src/Squidex/app/framework/angular/shortcut.component.ts @@ -13,7 +13,7 @@ import { ShortcutService } from './../services/shortcut.service'; selector: 'sqx-shortcut', template: '' }) -export class ShortcutComponent implements OnInit, OnDestroy { +export class ShortcutComponent implements OnDestroy, OnInit { @Input() public keys: string; diff --git a/src/Squidex/app/framework/angular/template-wrapper.directive.ts b/src/Squidex/app/framework/angular/template-wrapper.directive.ts index 3f98d67f9..f9673dea4 100644 --- a/src/Squidex/app/framework/angular/template-wrapper.directive.ts +++ b/src/Squidex/app/framework/angular/template-wrapper.directive.ts @@ -10,7 +10,7 @@ import { Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, OnInit, Simple @Directive({ selector: '[sqxTemplateWrapper]' }) -export class TemplateWrapperDirective implements OnInit, OnDestroy, OnChanges { +export class TemplateWrapperDirective implements OnDestroy, OnInit, OnChanges { @Input() public item: any; diff --git a/src/Squidex/app/framework/services/dialog.service.ts b/src/Squidex/app/framework/services/dialog.service.ts index 6e86994ff..b0d41856b 100644 --- a/src/Squidex/app/framework/services/dialog.service.ts +++ b/src/Squidex/app/framework/services/dialog.service.ts @@ -65,6 +65,10 @@ export class DialogService { this.notificationsStream$.next(notification); } + public confirmUnsavedChanges(): Observable { + return this.confirm('Unsaved changes', 'You have unsaved changes, do you want to close the current content view?'); + } + public confirm(title: string, text: string): Observable { const request = new DialogRequest(title, text); diff --git a/src/Squidex/app/shared/components/component-base.ts b/src/Squidex/app/shared/components/component-base.ts index 21db7fb75..8471f8488 100644 --- a/src/Squidex/app/shared/components/component-base.ts +++ b/src/Squidex/app/shared/components/component-base.ts @@ -13,7 +13,7 @@ import { export abstract class ComponentBase { constructor( - private readonly dialogs: DialogService + public readonly dialogs: DialogService ) { } diff --git a/src/Squidex/app/shell/pages/app/left-menu.component.ts b/src/Squidex/app/shell/pages/app/left-menu.component.ts index c7e1400ea..6ef51cc48 100644 --- a/src/Squidex/app/shell/pages/app/left-menu.component.ts +++ b/src/Squidex/app/shell/pages/app/left-menu.component.ts @@ -15,7 +15,7 @@ import { AppsStoreService } from 'shared'; styleUrls: ['./left-menu.component.scss'], templateUrl: './left-menu.component.html' }) -export class LeftMenuComponent implements OnInit, OnDestroy { +export class LeftMenuComponent implements OnDestroy, OnInit { private appSubscription: Subscription; public permission: string | null = null; diff --git a/src/Squidex/app/shell/pages/internal/apps-menu.component.ts b/src/Squidex/app/shell/pages/internal/apps-menu.component.ts index b64e4781c..32982458a 100644 --- a/src/Squidex/app/shell/pages/internal/apps-menu.component.ts +++ b/src/Squidex/app/shell/pages/internal/apps-menu.component.ts @@ -25,7 +25,7 @@ const FALLBACK_NAME = 'Apps Overview'; fadeAnimation ] }) -export class AppsMenuComponent implements OnInit, OnDestroy { +export class AppsMenuComponent implements OnDestroy, OnInit { private appsSubscription: Subscription; private appSubscription: Subscription; diff --git a/src/Squidex/app/shell/pages/internal/internal-area.component.ts b/src/Squidex/app/shell/pages/internal/internal-area.component.ts index 8d641e6a2..a57913aa4 100644 --- a/src/Squidex/app/shell/pages/internal/internal-area.component.ts +++ b/src/Squidex/app/shell/pages/internal/internal-area.component.ts @@ -16,7 +16,7 @@ import { DialogService, Notification } from 'shared'; styleUrls: ['./internal-area.component.scss'], templateUrl: './internal-area.component.html' }) -export class InternalAreaComponent implements OnInit, OnDestroy { +export class InternalAreaComponent implements OnDestroy, OnInit { private queryParamsSubscription: Subscription; public notifications: Notification[] = []; diff --git a/src/Squidex/app/shell/pages/internal/profile-menu.component.ts b/src/Squidex/app/shell/pages/internal/profile-menu.component.ts index d15f586e0..1f9ebbdc5 100644 --- a/src/Squidex/app/shell/pages/internal/profile-menu.component.ts +++ b/src/Squidex/app/shell/pages/internal/profile-menu.component.ts @@ -23,7 +23,7 @@ import { fadeAnimation ] }) -export class ProfileMenuComponent implements OnInit, OnDestroy { +export class ProfileMenuComponent implements OnDestroy, OnInit { private authenticationSubscription: Subscription; public modalMenu = new ModalView(false, true); diff --git a/src/Squidex/app/theme/_bootstrap-vars.scss b/src/Squidex/app/theme/_bootstrap-vars.scss index e08f5b838..a75f33324 100644 --- a/src/Squidex/app/theme/_bootstrap-vars.scss +++ b/src/Squidex/app/theme/_bootstrap-vars.scss @@ -16,15 +16,19 @@ $brand-danger: $color-theme-error; $brand-warning: $color-theme-orange; $alert-success-bg: $color-theme-green; +$alert-success-border: $color-theme-green; $alert-success-text: #fff; $alert-info-bg: $color-theme-blue; +$alert-info-border: $color-theme-blue; $alert-info-text: #fff; $alert-warning-bg: $color-theme-orange; +$alert-warning-border: $color-theme-orange; $alert-warning-text: #fff; $alert-danger-bg: $color-theme-error; +$alert-danger-border: $color-theme-error; $alert-danger-text: #fff; $btn-secondary-bg: $color-theme-secondary;