From c9754cef6115dab182f0ff0157fee5a86e42b405 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Fri, 22 Sep 2017 20:05:14 +0200 Subject: [PATCH] Code cleanup. --- .../event-consumers-page.component.html | 2 +- .../event-consumers-page.component.ts | 8 +- .../apps/pages/apps-page.component.html | 2 +- .../assets/pages/assets-page.component.ts | 8 +- .../contents/contents-page.component.html | 10 +- .../content/shared/assets-editor.component.ts | 8 +- .../shared/content-item.component.html | 2 +- .../pages/dashboard-page.component.html | 2 +- .../schemas/pages/schema/field.component.html | 2 +- .../pages/schema/schema-page.component.html | 34 +++- .../pages/schemas/schemas-page.component.html | 2 +- .../pages/clients/client.component.html | 2 +- .../pages/clients/clients-page.component.html | 12 +- .../contributors-page.component.html | 12 +- .../pages/languages/language.component.ts | 8 +- .../languages/languages-page.component.html | 12 +- .../pages/webhooks-page.component.html | 12 +- .../angular/autocomplete.component.ts | 62 +++--- .../angular/control-errors.component.html | 2 +- .../angular/dialog-renderer.component.html | 2 +- .../angular/image-source.directive.ts | 34 ++-- .../angular/modal-target.directive.ts | 183 ++++++++++++------ .../framework/angular/modal-view.directive.ts | 5 +- .../angular/onboarding-tooltip.component.html | 27 +-- .../angular/onboarding-tooltip.component.scss | 48 ++--- .../angular/onboarding-tooltip.component.ts | 29 ++- .../angular/panel-container.directive.ts | 8 +- .../angular/rich-editor.component.ts | 56 +++--- .../angular/template-wrapper.directive.ts | 12 +- .../angular/user-report.component.ts | 17 +- .../shared/components/asset.component.html | 4 +- .../language-selector.component.html | 2 +- .../pages/internal/apps-menu.component.html | 4 +- .../internal/profile-menu.component.html | 2 +- src/Squidex/app/theme/_mixins.scss | 14 +- 35 files changed, 377 insertions(+), 272 deletions(-) diff --git a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html index 2fe1a7135..8fa8f7792 100644 --- a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html +++ b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html @@ -75,7 +75,7 @@ -
+
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 640a03bf7..a87dc7006 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 @@ -39,6 +39,10 @@ export class EventConsumersPageComponent extends ComponentBase implements OnDest super(dialogs); } + public ngOnDestroy() { + this.subscription.unsubscribe(); + } + public ngOnInit() { this.load(false, true); @@ -48,10 +52,6 @@ export class EventConsumersPageComponent extends ComponentBase implements OnDest }); } - public ngOnDestroy() { - this.subscription.unsubscribe(); - } - public load(showInfo = false, showError = false) { this.eventConsumersService.getEventConsumers() .subscribe(dtos => { diff --git a/src/Squidex/app/features/apps/pages/apps-page.component.html b/src/Squidex/app/features/apps/pages/apps-page.component.html index 36cc64369..92a9c4efc 100644 --- a/src/Squidex/app/features/apps/pages/apps-page.component.html +++ b/src/Squidex/app/features/apps/pages/apps-page.component.html @@ -16,7 +16,7 @@
-
+
diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.ts b/src/Squidex/app/features/assets/pages/assets-page.component.ts index f1d7bc2a0..4e879650f 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.ts +++ b/src/Squidex/app/features/assets/pages/assets-page.component.ts @@ -46,6 +46,10 @@ export class AssetsPageComponent extends AppComponentBase implements OnDestroy, super(dialogs, apps, authService); } + public ngOnDestroy() { + this.assetUpdatedSubscription.unsubscribe(); + } + public ngOnInit() { this.assetUpdatedSubscription = this.messageBus.of(AssetUpdated) @@ -58,10 +62,6 @@ export class AssetsPageComponent extends AppComponentBase implements OnDestroy, this.load(); } - public ngOnDestroy() { - this.assetUpdatedSubscription.unsubscribe(); - } - public search() { this.assetsPager = new Pager(0, 0, 12); this.assertQuery = this.assetsFilter.value; 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 34776f88a..62043f12f 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 @@ -20,15 +20,15 @@ - + + Click this icon to show the advanced search menu and to show the archive! - + + Search for content using full text search over all fields and languages! -
+
(); diff --git a/src/Squidex/app/features/content/shared/content-item.component.html b/src/Squidex/app/features/content/shared/content-item.component.html index 6ae2f3969..4f060f0f1 100644 --- a/src/Squidex/app/features/content/shared/content-item.component.html +++ b/src/Squidex/app/features/content/shared/content-item.component.html @@ -16,7 +16,7 @@ -
+
Publish diff --git a/src/Squidex/app/features/dashboard/pages/dashboard-page.component.html b/src/Squidex/app/features/dashboard/pages/dashboard-page.component.html index 2d799f403..3630a224a 100644 --- a/src/Squidex/app/features/dashboard/pages/dashboard-page.component.html +++ b/src/Squidex/app/features/dashboard/pages/dashboard-page.component.html @@ -1,6 +1,6 @@ -
+
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 7b01dba4a..07029367c 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html @@ -26,7 +26,7 @@ -
+
Enable diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html index ab88f073a..837c767dc 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html @@ -8,7 +8,7 @@ JSON Preview -
+
@@ -18,10 +18,10 @@
- -
+
Scripts @@ -30,6 +30,14 @@
+ + + Open the context menu to delete the schema or to create some scripts for content changes. + + + + Note, that you have to publish the schema before you can add content to it. +

@@ -76,7 +84,7 @@
-
@@ -96,17 +104,25 @@
- + - + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. + + + + Click the help icon to show a context specific help page. Go to https://docs.squidex.io for the full documentation. +

-
+
@@ -125,7 +141,7 @@
-
+
@@ -144,7 +160,7 @@
-
+
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 a9732fb3c..530e39327 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 @@ -53,7 +53,7 @@
-
+
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 9385a3b2b..fc6e57d12 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.html +++ b/src/Squidex/app/features/settings/pages/clients/client.component.html @@ -82,7 +82,7 @@
-
+
diff --git a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html index 7e4343c8d..3752e2957 100644 --- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html +++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html @@ -43,12 +43,20 @@
- + - + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. + + + + Click the help icon to show a context specific help page. Go to https://docs.squidex.io for the full documentation. +
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html index 14c14d369..3f7c25d14 100644 --- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html +++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html @@ -75,12 +75,20 @@
- + - + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. + + + + Click the help icon to show a context specific help page. Go to https://docs.squidex.io for the full documentation. +
diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.ts b/src/Squidex/app/features/settings/pages/languages/language.component.ts index 20d0f5a3b..d87f60111 100644 --- a/src/Squidex/app/features/settings/pages/languages/language.component.ts +++ b/src/Squidex/app/features/settings/pages/languages/language.component.ts @@ -54,6 +54,10 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy { ) { } + public ngOnDestroy() { + this.isMasterSubscription.unsubscribe(); + } + public ngOnInit() { this.isMasterSubscription = this.editForm.controls['isMaster'].valueChanges @@ -65,10 +69,6 @@ export class LanguageComponent implements OnInit, OnChanges, OnDestroy { this.resetEditForm(); } - public ngOnDestroy() { - this.isMasterSubscription.unsubscribe(); - } - public ngOnChanges() { this.resetEditForm(); } diff --git a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html index 159788802..6b507f902 100644 --- a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html +++ b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html @@ -35,12 +35,20 @@
- + - + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. + + + + Click the help icon to show a context specific help page. Go to https://docs.squidex.io for the full documentation. +
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 21144abc0..e49cc91eb 100644 --- a/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html +++ b/src/Squidex/app/features/webhooks/pages/webhooks-page.component.html @@ -51,12 +51,20 @@
- + - + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. + + + + Click the help icon to show a context specific help page. Go to https://docs.squidex.io for the full documentation. +
diff --git a/src/Squidex/app/framework/angular/autocomplete.component.ts b/src/Squidex/app/framework/angular/autocomplete.component.ts index 5f37f12f0..405d8aaaf 100644 --- a/src/Squidex/app/framework/angular/autocomplete.component.ts +++ b/src/Squidex/app/framework/angular/autocomplete.component.ts @@ -54,37 +54,6 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O public queryInput = new FormControl(); - public writeValue(value: any) { - if (!value) { - this.resetForm(); - } else { - const item = this.items.find(i => i === value); - - if (item) { - this.queryInput.setValue(value.title || ''); - } - } - - this.reset(); - } - - public setDisabledState(isDisabled: boolean): void { - if (isDisabled) { - this.reset(); - this.queryInput.disable(); - } else { - this.queryInput.enable(); - } - } - - public registerOnChange(fn: any) { - this.callChange = fn; - } - - public registerOnTouched(fn: any) { - this.callTouched = fn; - } - public ngOnDestroy() { this.subscription.unsubscribe(); } @@ -132,6 +101,37 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O return true; } + public writeValue(value: any) { + if (!value) { + this.resetForm(); + } else { + const item = this.items.find(i => i === value); + + if (item) { + this.queryInput.setValue(value.title || ''); + } + } + + this.reset(); + } + + public setDisabledState(isDisabled: boolean): void { + if (isDisabled) { + this.reset(); + this.queryInput.disable(); + } else { + this.queryInput.enable(); + } + } + + public registerOnChange(fn: any) { + this.callChange = fn; + } + + public registerOnTouched(fn: any) { + this.callTouched = fn; + } + public blur() { this.reset(); this.callTouched(); diff --git a/src/Squidex/app/framework/angular/control-errors.component.html b/src/Squidex/app/framework/angular/control-errors.component.html index 1e12c8b89..6468b69d6 100644 --- a/src/Squidex/app/framework/angular/control-errors.component.html +++ b/src/Squidex/app/framework/angular/control-errors.component.html @@ -1,4 +1,4 @@ -
+
{{message}} diff --git a/src/Squidex/app/framework/angular/dialog-renderer.component.html b/src/Squidex/app/framework/angular/dialog-renderer.component.html index cecaae279..a708ffc84 100644 --- a/src/Squidex/app/framework/angular/dialog-renderer.component.html +++ b/src/Squidex/app/framework/angular/dialog-renderer.component.html @@ -21,7 +21,7 @@
-
+
{{notification.message}} diff --git a/src/Squidex/app/framework/angular/image-source.directive.ts b/src/Squidex/app/framework/angular/image-source.directive.ts index 6fd651508..96382fb5c 100644 --- a/src/Squidex/app/framework/angular/image-source.directive.ts +++ b/src/Squidex/app/framework/angular/image-source.directive.ts @@ -15,6 +15,7 @@ import { MathHelper } from './../utils/math-helper'; export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit { private parentResizeListener: Function; + private loadingTimer: any; private size: any; private loadRetries = 0; private loadQuery: string | null = null; @@ -34,18 +35,9 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After ) { } - public ngOnChanges() { - this.loadQuery = null; - this.loadRetries = 0; - - this.setImageSource(); - } - - public ngAfterViewInit() { - this.resize(this.parent); - } - public ngOnDestroy() { + clearTimeout(this.loadingTimer); + this.parentResizeListener(); } @@ -60,6 +52,17 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After }); } + public ngAfterViewInit() { + this.resize(this.parent); + } + + public ngOnChanges() { + this.loadQuery = null; + this.loadRetries = 0; + + this.setImageSource(); + } + @HostListener('load') public onLoad() { this.renderer.setElementStyle(this.element.nativeElement, 'visibility', 'visible'); @@ -105,11 +108,12 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After this.loadRetries++; if (this.loadRetries <= 10) { - setTimeout(() => { - this.loadQuery = MathHelper.guid(); + this.loadingTimer = + setTimeout(() => { + this.loadQuery = MathHelper.guid(); - this.setImageSource(); - }, this.loadRetries * 1000); + this.setImageSource(); + }, this.loadRetries * 1000); } } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/modal-target.directive.ts b/src/Squidex/app/framework/angular/modal-target.directive.ts index 919950796..f94cb9f7e 100644 --- a/src/Squidex/app/framework/angular/modal-target.directive.ts +++ b/src/Squidex/app/framework/angular/modal-target.directive.ts @@ -6,7 +6,16 @@ */ import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; -import { Observable, Subscription } from 'rxjs'; + +const POSITION_TOPLEFT = 'topLeft'; +const POSITION_TOPRIGHT = 'topRight'; +const POSITION_BOTTOMLEFT = 'bottomLeft'; +const POSITION_BOTTOMRIGHT = 'bottomRight'; +const POSITION_LEFTTOP = 'leftTop'; +const POSITION_LEFTBOTTOM = 'leftBottom'; +const POSITION_RIGHTTOP = 'rightTop'; +const POSITION_RIGHTBOTTOM = 'rightBottom'; +const POSITION_FULL = 'full'; @Directive({ selector: '[sqxModalTarget]' @@ -14,7 +23,7 @@ import { Observable, Subscription } from 'rxjs'; export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { private elementResizeListener: Function; private targetResizeListener: Function; - private timer: Subscription; + private renderTimer: any; private targetElement: any; @Input('sqxModalTarget') @@ -24,10 +33,10 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { public offset = 2; @Input() - public position = 'topLeft'; + public position = POSITION_BOTTOMRIGHT; @Input() - public auto = true; + public autoPosition = true; constructor( private readonly renderer: Renderer, @@ -35,6 +44,18 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { ) { } + public ngOnDestroy() { + if (this.targetResizeListener) { + this.targetResizeListener(); + } + + if (this.elementResizeListener) { + this.elementResizeListener(); + } + + clearInterval(this.renderTimer); + } + public ngOnInit() { if (this.target) { this.targetElement = this.target; @@ -49,29 +70,15 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { this.updatePosition(); }); - this.timer = - Observable.timer(100, 100).subscribe(() => { + this.renderTimer = + setInterval(() => { this.updatePosition(); - }); - } - } - - public ngOnDestroy() { - if (this.targetResizeListener) { - this.targetResizeListener(); - } - - if (this.elementResizeListener) { - this.elementResizeListener(); - } - - if (this.timer) { - this.timer.unsubscribe(); + }, 100); } } public ngAfterViewInit() { - const modalRef = this.element.nativeElement; + const modalRef = this.element.nativeElement; this.renderer.setElementStyle(modalRef, 'position', 'fixed'); this.renderer.setElementStyle(modalRef, 'z-index', '1000000'); @@ -83,59 +90,115 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { const viewportHeight = document.documentElement.clientHeight; const viewportWidth = document.documentElement.clientWidth; - const modalRef = this.element.nativeElement; + const modalRef = this.element.nativeElement; const modalRect = this.element.nativeElement.getBoundingClientRect(); const targetRect: ClientRect = this.targetElement.getBoundingClientRect(); - let top = 0, left = 0; - - if (this.position === 'topLeft' || this.position === 'topRight') { - top = targetRect.bottom + this.offset; + const fix = this.autoPosition; - if (this.auto && top + modalRect.height > viewportHeight) { - const t = targetRect.top - modalRect.height - this.offset; + let t = 0 + let l = 0; - if (t > 0) { - top = t; + switch (this.position) { + case POSITION_LEFTTOP: + case POSITION_RIGHTTOP: + { + t = targetRect.top; + break; } - } - } else { - top = targetRect.top - modalRect.height - this.offset; - - if (this.auto && top < 0) { - const t = targetRect.bottom + this.offset; - - if (t + modalRect.height > viewportHeight) { - top = t; + case POSITION_LEFTBOTTOM: + case POSITION_RIGHTBOTTOM: + { + t = targetRect.bottom - modalRect.height; + break; + } + case POSITION_BOTTOMLEFT: + case POSITION_BOTTOMRIGHT: + { + t = targetRect.bottom + this.offset; + + if (fix && t + modalRect.height > viewportHeight) { + const candidate = targetRect.top - modalRect.height - this.offset; + + if (candidate > 0) { + t = candidate; + } + } + break; + } + case POSITION_TOPLEFT: + case POSITION_TOPRIGHT: + { + t = targetRect.top - modalRect.height - this.offset; + + if (fix && t < 0) { + const candidate = targetRect.bottom + this.offset; + + if (candidate + modalRect.height > viewportHeight) { + t = candidate; + } + } + break; } - } } - if (this.position === 'topLeft' || this.position === 'bottomLeft') { - left = targetRect.left + this.offset; - - if (this.auto && left + modalRect.width > viewportWidth) { - const l = targetRect.right - modalRect.width - this.offset; - - if (l > 0) { - left = l; + switch (this.position) { + case POSITION_TOPLEFT: + case POSITION_BOTTOMLEFT: + { + l = targetRect.left; + break; + } + case POSITION_TOPRIGHT: + case POSITION_BOTTOMRIGHT: + { + l = targetRect.right - modalRect.width + break; + } + case POSITION_RIGHTTOP: + case POSITION_RIGHTBOTTOM: + { + l = targetRect.right + this.offset; + + if (fix && l + modalRect.width > viewportWidth) { + const candidate = targetRect.right - modalRect.width - this.offset; + + if (candidate > 0) { + l = candidate; + } + } + break; } - } - } else { - left = targetRect.right - modalRect.width - this.offset; + case POSITION_LEFTTOP: + case POSITION_LEFTBOTTOM: + { + l = targetRect.left - modalRect.width - this.offset; + + if (this.autoPosition && l < 0) { + const candidate = targetRect.right + this.offset; + + if (candidate + modalRect.width > viewportWidth) { + l = candidate; + } + } + break; + } + } - if (this.auto && left < 0) { - const l = targetRect.left + this.offset; + if (this.position === POSITION_FULL) { + t = targetRect.top - this.offset; + l = targetRect.left - this.offset; - if (l + modalRect.width > viewportWidth) { - left = l; - } - } + const w = targetRect.width + 2 * this.offset; + const h = targetRect.height + 2 * this.offset; + + this.renderer.setElementStyle(modalRef, 'width', `${w}px`); + this.renderer.setElementStyle(modalRef, 'height', `${h}px`); } - this.renderer.setElementStyle(modalRef, 'top', top + 'px'); - this.renderer.setElementStyle(modalRef, 'left', left + 'px'); + this.renderer.setElementStyle(modalRef, 'top', `${t}px`); + this.renderer.setElementStyle(modalRef, 'left', `${l}px`); this.renderer.setElementStyle(modalRef, 'right', 'auto'); this.renderer.setElementStyle(modalRef, 'bottom', 'auto'); this.renderer.setElementStyle(modalRef, 'margin', '0'); diff --git a/src/Squidex/app/framework/angular/modal-view.directive.ts b/src/Squidex/app/framework/angular/modal-view.directive.ts index 4becbcdf1..adceb0fad 100644 --- a/src/Squidex/app/framework/angular/modal-view.directive.ts +++ b/src/Squidex/app/framework/angular/modal-view.directive.ts @@ -36,6 +36,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy { public ngOnDestroy() { this.stopListening(); + + this.modalView.hide(); } public ngOnChanges(changes: SimpleChanges) { @@ -49,7 +51,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy { } if (this.modalView) { - this.subscription = this.modalView.isOpen.subscribe(isOpen => { + this.subscription = + this.modalView.isOpen.subscribe(isOpen => { if (isOpen === (this.renderedView !== null)) { return; } diff --git a/src/Squidex/app/framework/angular/onboarding-tooltip.component.html b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html index acd37d0d2..4de8bb7f8 100644 --- a/src/Squidex/app/framework/angular/onboarding-tooltip.component.html +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html @@ -1,16 +1,19 @@ -
-
-
-
- -
{{text}}
+
- - - +
+
+
+ +
- +
+ + + +
\ No newline at end of file diff --git a/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss b/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss index 11481f5f4..33430c7e2 100644 --- a/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss @@ -1,46 +1,28 @@ @import '_mixins'; @import '_vars'; -$color: $color-theme-blue; +$color: #1a2129; -$size-arrow: 10px; - -// sass-lint:disable class-name-format - -.onboarding-tooltip { - & { - @include box-shadow(0, 2px, 20px, .3); +.onboarding { + &-help { + @include border-radius; + background: $color; + border: 0; max-width: 20rem; - background: $color-dark-foreground; - border: 1px solid $color; - position: relative; - } - - .content { - padding: 1.6rem 1.6rem 2.5rem; + padding: .75rem; } - .hide-this { - @include absolute(.1rem, .1rem, auto, auto); + &-text { + font-size: .9rem; + font-weight: normal; + color: $color-dark-foreground; } - .hide-all { - @include absolute(auto, .1rem, .1rem, auto); + &-buttons { + margin: .8rem -.5rem 0; } - &.topRight { - & { - margin-right: -$size-arrow - 1; - } - - .arrow1 { - @include caret-top($color, $size-arrow); - @include absolute(-$size-arrow * 2, $size-arrow * .5, auto, auto); - } - - .arrow2 { - @include caret-top($color-dark-foreground, $size-arrow); - @include absolute(-$size-arrow * 2 + 1, $size-arrow * .5, auto, auto); - } + &-rect { + @include box-shadow-raw(0 0 0 9999px rgba(0, 0, 0, .5)); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts b/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts index fc7d0c96c..8d56ca9a2 100644 --- a/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts @@ -11,10 +11,15 @@ import { ModalView } from './../utils/modal-view'; import { OnboardingService } from './../services/onboarding.service'; +import { fadeAnimation } from './animations'; + @Component({ selector: 'sqx-onboarding-tooltip', styleUrls: ['./onboarding-tooltip.component.scss'], - templateUrl: './onboarding-tooltip.component.html' + templateUrl: './onboarding-tooltip.component.html', + animations: [ + fadeAnimation + ] }) export class OnboardingTooltipComponent implements OnDestroy, OnInit { private showTimer: any; @@ -29,14 +34,11 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { @Input() public id: string; - @Input() - public position = 'left'; - @Input() public after = 1000; @Input() - public text: string; + public position = 'left'; constructor( private readonly onboardingService: OnboardingService, @@ -45,15 +47,10 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { } public ngOnDestroy() { - if (this.showTimer) { - clearTimeout(this.showTimer); - this.showTimer = null; - } + clearTimeout(this.showTimer); + clearTimeout(this.closeTimer); - if (this.closeTimer) { - clearTimeout(this.closeTimer); - this.closeTimer = null; - } + this.tooltipModal.hide(); if (this.forClickListener) { this.forClickListener(); @@ -64,12 +61,14 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { public ngOnInit() { if (this.for && this.id) { this.showTimer = setTimeout(() => { - if (this.onboardingService.shouldShow(this.id)) { + if (this.onboardingService.shouldShow(this.id) || true) { this.tooltipModal.show(); this.closeTimer = setTimeout(() => { this.hideThis(); }, 10000); + + this.onboardingService.disable(this.id); } }, this.after); @@ -84,14 +83,12 @@ export class OnboardingTooltipComponent implements OnDestroy, OnInit { public hideThis() { this.onboardingService.disable(this.id); - this.tooltipModal.hide(); this.ngOnDestroy(); } public hideAll() { this.onboardingService.disableAll(); - this.tooltipModal.hide(); this.ngOnDestroy(); } diff --git a/src/Squidex/app/framework/angular/panel-container.directive.ts b/src/Squidex/app/framework/angular/panel-container.directive.ts index 1a5b983bb..d5c1e30bd 100644 --- a/src/Squidex/app/framework/angular/panel-container.directive.ts +++ b/src/Squidex/app/framework/angular/panel-container.directive.ts @@ -28,14 +28,14 @@ export class PanelContainerDirective implements AfterViewInit, OnDestroy { this.invalidate(); } - public ngAfterViewInit() { - this.invalidate({ force: true, resize: true }); - } - public ngOnDestroy() { this.isInit = true; } + public ngAfterViewInit() { + this.invalidate({ force: true, resize: true }); + } + public push(panel: PanelComponent) { this.panels.push(panel); diff --git a/src/Squidex/app/framework/angular/rich-editor.component.ts b/src/Squidex/app/framework/angular/rich-editor.component.ts index 6c5806cc5..4e95a8152 100644 --- a/src/Squidex/app/framework/angular/rich-editor.component.ts +++ b/src/Squidex/app/framework/angular/rich-editor.component.ts @@ -28,6 +28,7 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, private callChange = (v: any) => { /* NOOP */ }; private callTouched = () => { /* NOOP */ }; private tinyEditor: any; + private tinyInitTimer: any; private value: string; private isDisabled = false; @@ -39,28 +40,10 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, ) { } - 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 ngOnDestroy() { + clearTimeout(this.tinyInitTimer); - public registerOnTouched(fn: any) { - this.callTouched = fn; + tinymce.remove(this.editor); } public ngAfterViewInit() { @@ -86,16 +69,37 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, self.callTouched(); }); - setTimeout(() => { - self.tinyEditor.setContent(this.value || ''); - }, 500); + this.tinyInitTimer = + setTimeout(() => { + self.tinyEditor.setContent(this.value || ''); + }, 500); }, removed_menuitems: 'newdocument', plugins: 'code', target: this.editor.nativeElement }); }); } - public ngOnDestroy() { - tinymce.remove(this.editor); + 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; } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/template-wrapper.directive.ts b/src/Squidex/app/framework/angular/template-wrapper.directive.ts index f9673dea4..2aaa67741 100644 --- a/src/Squidex/app/framework/angular/template-wrapper.directive.ts +++ b/src/Squidex/app/framework/angular/template-wrapper.directive.ts @@ -27,6 +27,12 @@ export class TemplateWrapperDirective implements OnDestroy, OnInit, OnChanges { ) { } + public ngOnDestroy() { + if (this.view) { + this.view.destroy(); + } + } + public ngOnInit() { this.view = this.viewContainer.createEmbeddedView(this.templateRef, { '\$implicit': this.item, @@ -43,10 +49,4 @@ export class TemplateWrapperDirective implements OnDestroy, OnInit, OnChanges { } } } - - public ngOnDestroy() { - if (this.view) { - this.view.destroy(); - } - } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/user-report.component.ts b/src/Squidex/app/framework/angular/user-report.component.ts index 9aaaf98d7..926337fcd 100644 --- a/src/Squidex/app/framework/angular/user-report.component.ts +++ b/src/Squidex/app/framework/angular/user-report.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ResourceLoaderService } from './../services/resource-loader.service'; import { UserReportConfig } from './../configurations'; @@ -14,7 +14,9 @@ import { UserReportConfig } from './../configurations'; selector: 'sqx-user-report', template: '' }) -export class UserReportComponent implements OnInit { +export class UserReportComponent implements OnDestroy, OnInit { + private loadingTimer: any; + constructor(config: UserReportConfig, private readonly resourceLoader: ResourceLoaderService ) { @@ -22,9 +24,14 @@ export class UserReportComponent implements OnInit { window['_urq'].push(['initSite', config.siteId]); } + public ngOnDestroy() { + clearTimeout(this.loadingTimer); + } + public ngOnInit() { - setTimeout(() => { - this.resourceLoader.loadScript('https://cdn.userreport.com/userreport.js'); - }, 4000); + this.loadingTimer = + setTimeout(() => { + this.resourceLoader.loadScript('https://cdn.userreport.com/userreport.js'); + }, 4000); } } \ 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 e392bcc6a..88fc97799 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -1,6 +1,6 @@
-
+
{{asset.fileType}} @@ -61,7 +61,7 @@
-
+
diff --git a/src/Squidex/app/shared/components/language-selector.component.html b/src/Squidex/app/shared/components/language-selector.component.html index 35105b0cf..2e3d06452 100644 --- a/src/Squidex/app/shared/components/language-selector.component.html +++ b/src/Squidex/app/shared/components/language-selector.component.html @@ -8,7 +8,7 @@ -
+
{{language.iso2Code}}     ({{language.englishName}})
diff --git a/src/Squidex/app/shell/pages/internal/apps-menu.component.html b/src/Squidex/app/shell/pages/internal/apps-menu.component.html index 2bcfec3e0..98c2a1073 100644 --- a/src/Squidex/app/shell/pages/internal/apps-menu.component.html +++ b/src/Squidex/app/shell/pages/internal/apps-menu.component.html @@ -2,7 +2,7 @@
  • {{appName}} -
    +
    All Apps {{apps.length}} @@ -23,7 +23,7 @@
    • -
    +
    diff --git a/src/Squidex/app/shell/pages/internal/profile-menu.component.html b/src/Squidex/app/shell/pages/internal/profile-menu.component.html index 425f5ea63..346576300 100644 --- a/src/Squidex/app/shell/pages/internal/profile-menu.component.html +++ b/src/Squidex/app/shell/pages/internal/profile-menu.component.html @@ -8,7 +8,7 @@ -
    +
    Administration diff --git a/src/Squidex/app/theme/_mixins.scss b/src/Squidex/app/theme/_mixins.scss index 35c5a6e7c..0d963d90f 100644 --- a/src/Squidex/app/theme/_mixins.scss +++ b/src/Squidex/app/theme/_mixins.scss @@ -234,16 +234,10 @@ box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); } -@mixin box-shadow-raw($shadow) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; - box-shadow: $shadow; -} - -@mixin box-shadow-raw($shadow1, $shadow2) { - -webkit-box-shadow: $shadow1, $shadow2; - -moz-box-shadow: $shadow1, $shadow2; - box-shadow: $shadow1, $shadow2; +@mixin box-shadow-raw($shadows...) { + -webkit-box-shadow: $shadows; + -moz-box-shadow: $shadows; + box-shadow: $shadows; } @mixin border-radius-clip() {