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/administration/pages/users/users-page.component.html b/src/Squidex/app/features/administration/pages/users/users-page.component.html index d28c96723..c4370b21f 100644 --- a/src/Squidex/app/features/administration/pages/users/users-page.component.html +++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html @@ -9,14 +9,14 @@ - - + +
- +
-
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.html b/src/Squidex/app/features/assets/pages/assets-page.component.html index a5b49b441..a127b3ab1 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -9,10 +9,10 @@ - +
- +
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/content/content-field.component.html b/src/Squidex/app/features/content/pages/content/content-field.component.html index 96c41260f..dfec38f83 100644 --- a/src/Squidex/app/features/content/pages/content/content-field.component.html +++ b/src/Squidex/app/features/content/pages/content/content-field.component.html @@ -7,7 +7,11 @@
- + + + + Please remember to check all languages when you see validation errors. +
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 05344393a..eaf689467 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 @@ -46,12 +46,16 @@
- + + + + The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time. +
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 0658e4ad9..20324d83a 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 @@ -9,18 +9,26 @@ - +
- + - +
+ + + 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/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts index 48d82ae43..f00531292 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -51,6 +51,10 @@ export class AssetsEditorComponent extends AppComponentBase implements ControlVa super(dialogs, apps, authService); } + public ngOnDestroy() { + this.assetUpdatedSubscription.unsubscribe(); + } + public ngOnInit() { this.assetUpdatedSubscription = this.messageBus.of(AssetUpdated) @@ -61,10 +65,6 @@ export class AssetsEditorComponent extends AppComponentBase implements ControlVa }); } - public ngOnDestroy() { - this.assetUpdatedSubscription.unsubscribe(); - } - public writeValue(value: string[]) { this.oldAssets = ImmutableArray.empty(); 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 b35ba9d6f..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 341cdf3ec..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 d9d3efc04..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..29831ee93 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 @@ -12,14 +12,14 @@
- +
- +
@@ -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/webhook-events-page.component.scss b/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.scss index 1d99250e8..e131e5532 100644 --- a/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.scss +++ b/src/Squidex/app/features/webhooks/pages/webhook-events-page.component.scss @@ -30,10 +30,8 @@ h3 { } &::before { - @include caret-top; - @include absolute(-.5rem, 1.9rem, auto, auto); - border-color: transparent transparent $color-border; - border-width: .6rem; + @include caret-top($color-border); + @include absolute(-1.1rem, 1.9rem, auto, auto); } h3 { 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/dropdown.component.scss b/src/Squidex/app/framework/angular/dropdown.component.scss index 5e893dae5..2b7ec23c4 100644 --- a/src/Squidex/app/framework/angular/dropdown.component.scss +++ b/src/Squidex/app/framework/angular/dropdown.component.scss @@ -30,7 +30,9 @@ $color-input-disabled: #eef1f4; .icon-caret-down { @include absolute(30%, .4rem, auto, auto); + cursor: pointer; font-size: .9rem; font-weight: normal; + pointer-events: none; } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/image-source.directive.ts b/src/Squidex/app/framework/angular/image-source.directive.ts index aef4eb390..96382fb5c 100644 --- a/src/Squidex/app/framework/angular/image-source.directive.ts +++ b/src/Squidex/app/framework/angular/image-source.directive.ts @@ -5,14 +5,17 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnChanges, OnInit, Renderer } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, Renderer } from '@angular/core'; import { MathHelper } from './../utils/math-helper'; @Directive({ selector: '[sqxImageSource]' }) -export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit { +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; @@ -32,15 +35,10 @@ export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit { ) { } - public ngOnChanges() { - this.loadQuery = null; - this.loadRetries = 0; - - this.setImageSource(); - } + public ngOnDestroy() { + clearTimeout(this.loadingTimer); - public ngAfterViewInit() { - this.resize(this.parent); + this.parentResizeListener(); } public ngOnInit() { @@ -48,9 +46,21 @@ export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit { this.parent = this.element.nativeElement.parentElement; } - this.renderer.listen(this.parent, 'resize', () => { - this.resize(this.parent); - }); + this.parentResizeListener = + this.renderer.listen(this.parent, 'resize', () => { + this.resize(this.parent); + }); + } + + public ngAfterViewInit() { + this.resize(this.parent); + } + + public ngOnChanges() { + this.loadQuery = null; + this.loadRetries = 0; + + this.setImageSource(); } @HostListener('load') @@ -98,11 +108,12 @@ export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit { 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 da66b3a72..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,7 +33,10 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { public offset = 2; @Input() - public position = 'left'; + public position = POSITION_BOTTOMRIGHT; + + @Input() + public autoPosition = true; constructor( private readonly renderer: Renderer, @@ -32,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; @@ -46,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'); @@ -78,28 +88,117 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { private updatePosition() { 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(); - const left = this.position === 'left' ? - targetRect.left : - targetRect.right - modalRect.width; + const fix = this.autoPosition; + + let t = 0 + let l = 0; + + switch (this.position) { + case POSITION_LEFTTOP: + case POSITION_RIGHTTOP: + { + t = targetRect.top; + break; + } + 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; + } + } + + 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; + } + 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; + } + } - let top = targetRect.bottom + this.offset; + if (this.position === POSITION_FULL) { + t = targetRect.top - this.offset; + l = targetRect.left - this.offset; - if (top + modalRect.height > viewportHeight) { - const potentialTop = targetRect.top - modalRect.height - this.offset; + const w = targetRect.width + 2 * this.offset; + const h = targetRect.height + 2 * this.offset; - if (potentialTop > 0) { - top = potentialTop; - } + 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 0082b4603..adceb0fad 100644 --- a/src/Squidex/app/framework/angular/modal-view.directive.ts +++ b/src/Squidex/app/framework/angular/modal-view.directive.ts @@ -17,7 +17,7 @@ import { RootViewService } from './../services/root-view.service'; }) export class ModalViewDirective implements OnChanges, OnDestroy { private subscription: Subscription | null = null; - private clickHandler: Function | null = null; + private documentClickListener: Function | null = null; private renderedView: EmbeddedViewRef | null = null; @Input('sqxModalView') @@ -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; } @@ -81,7 +84,7 @@ export class ModalViewDirective implements OnChanges, OnDestroy { } private startListening() { - this.clickHandler = + this.documentClickListener = this.renderer.listenGlobal('document', 'click', (event: MouseEvent) => { if (!event.target || this.renderedView === null) { return; @@ -109,9 +112,9 @@ export class ModalViewDirective implements OnChanges, OnDestroy { } private stopListening() { - if (this.clickHandler) { - this.clickHandler(); - this.clickHandler = null; + if (this.documentClickListener) { + this.documentClickListener(); + this.documentClickListener = null; } } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/onboarding-tooltip.component.html b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html new file mode 100644 index 000000000..4de8bb7f8 --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html @@ -0,0 +1,19 @@ +
+ +
+
+
+ +
+ +
+ + + +
+
+
\ 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 new file mode 100644 index 000000000..33430c7e2 --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss @@ -0,0 +1,28 @@ +@import '_mixins'; +@import '_vars'; + +$color: #1a2129; + +.onboarding { + &-help { + @include border-radius; + background: $color; + border: 0; + max-width: 20rem; + padding: .75rem; + } + + &-text { + font-size: .9rem; + font-weight: normal; + color: $color-dark-foreground; + } + + &-buttons { + margin: .8rem -.5rem 0; + } + + &-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 new file mode 100644 index 000000000..feeef5914 --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts @@ -0,0 +1,95 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { Component, Input, OnDestroy, OnInit, Renderer } from '@angular/core'; + +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', + animations: [ + fadeAnimation + ] +}) +export class OnboardingTooltipComponent implements OnDestroy, OnInit { + private showTimer: any; + private closeTimer: any; + private forMouseDownListener: Function; + + public tooltipModal = new ModalView(); + + @Input() + public for: any; + + @Input() + public id: string; + + @Input() + public after = 1000; + + @Input() + public position = 'left'; + + constructor( + private readonly onboardingService: OnboardingService, + private readonly renderer: Renderer + ) { + } + + public ngOnDestroy() { + clearTimeout(this.showTimer); + clearTimeout(this.closeTimer); + + this.tooltipModal.hide(); + + if (this.forMouseDownListener) { + this.forMouseDownListener(); + this.forMouseDownListener = null; + } + } + + public ngOnInit() { + if (this.for && this.id) { + this.showTimer = setTimeout(() => { + if (this.onboardingService.shouldShow(this.id)) { + this.tooltipModal.show(); + + this.closeTimer = setTimeout(() => { + this.hideThis(); + }, 10000); + + this.onboardingService.disable(this.id); + } + }, this.after); + + this.forMouseDownListener = + this.renderer.listen(this.for, 'mousedown', () => { + this.onboardingService.disable(this.id); + + this.hideThis(); + }); + } + } + + public hideThis() { + this.onboardingService.disable(this.id); + + this.ngOnDestroy(); + } + + public hideAll() { + this.onboardingService.disableAll(); + + this.ngOnDestroy(); + } +} \ No newline at end of file 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/slider.component.ts b/src/Squidex/app/framework/angular/slider.component.ts index bab84dbdb..df614fec4 100644 --- a/src/Squidex/app/framework/angular/slider.component.ts +++ b/src/Squidex/app/framework/angular/slider.component.ts @@ -23,8 +23,8 @@ export const SQX_SLIDER_CONTROL_VALUE_ACCESSOR: any = { export class SliderComponent implements ControlValueAccessor { private callChange = (v: any) => { /* NOOP */ }; private callTouched = () => { /* NOOP */ }; - private mouseMoveSubscription: Function | null = null; - private mouseUpSubscription: Function | null = null; + private windowMouseMoveListener: Function | null = null; + private windowMouseUpListener: Function | null = null; private centerStartOffset = 0; private startValue: number; private lastValue: number; @@ -69,7 +69,7 @@ export class SliderComponent implements ControlValueAccessor { } public onBarMouseClick(event: MouseEvent): boolean { - if (this.mouseMoveSubscription) { + if (this.windowMouseMoveListener) { return true; } @@ -89,12 +89,12 @@ export class SliderComponent implements ControlValueAccessor { this.startValue = this.value; - this.mouseMoveSubscription = + this.windowMouseMoveListener = this.renderer.listenGlobal('window', 'mousemove', (e: MouseEvent) => { this.onMouseMove(e); }); - this.mouseUpSubscription = + this.windowMouseUpListener = this.renderer.listenGlobal('window', 'mouseup', () => { this.onMouseUp(); }); @@ -175,14 +175,14 @@ export class SliderComponent implements ControlValueAccessor { } private releaseMouseHandlers() { - if (this.mouseMoveSubscription) { - this.mouseMoveSubscription(); - this.mouseMoveSubscription = null; + if (this.windowMouseMoveListener) { + this.windowMouseMoveListener(); + this.windowMouseMoveListener = null; } - if (this.mouseUpSubscription) { - this.mouseUpSubscription(); - this.mouseUpSubscription = null; + if (this.windowMouseUpListener) { + this.windowMouseUpListener(); + this.windowMouseUpListener = null; } this.isDragging = false; 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/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts index 50ea748ed..40c8b1d87 100644 --- a/src/Squidex/app/framework/declarations.ts +++ b/src/Squidex/app/framework/declarations.ts @@ -30,6 +30,7 @@ export * from './angular/modal-view.directive'; export * from './angular/money.pipe'; export * from './angular/name.pipe'; export * from './angular/numbers.pipes'; +export * from './angular/onboarding-tooltip.component'; export * from './angular/panel.component'; export * from './angular/panel-container.directive'; export * from './angular/parent-link.directive'; @@ -56,7 +57,8 @@ export * from './services/clipboard.service'; export * from './services/dialog.service'; export * from './services/local-store.service'; export * from './services/local-cache.service'; -export * from './services/message-bus'; +export * from './services/message-bus.service'; +export * from './services/onboarding.service'; export * from './services/resource-loader.service'; export * from './services/root-view.service'; export * from './services/shortcut.service'; diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts index 422e3931f..973635904 100644 --- a/src/Squidex/app/framework/module.ts +++ b/src/Squidex/app/framework/module.ts @@ -46,6 +46,8 @@ import { ModalViewDirective, MoneyPipe, MonthPipe, + OnboardingService, + OnboardingTooltipComponent, PanelContainerDirective, PanelComponent, ParentLinkDirective, @@ -107,6 +109,7 @@ import { ModalViewDirective, MoneyPipe, MonthPipe, + OnboardingTooltipComponent, PanelContainerDirective, PanelComponent, ParentLinkDirective, @@ -155,6 +158,7 @@ import { ModalViewDirective, MoneyPipe, MonthPipe, + OnboardingTooltipComponent, PanelContainerDirective, PanelComponent, ParentLinkDirective, @@ -193,6 +197,7 @@ export class SqxFrameworkModule { LocalCacheService, LocalStoreService, MessageBus, + OnboardingService, ResourceLoaderService, RootViewService, ShortcutService, diff --git a/src/Squidex/app/framework/services/local-store.service.ts b/src/Squidex/app/framework/services/local-store.service.ts index 367148d65..760359a2b 100644 --- a/src/Squidex/app/framework/services/local-store.service.ts +++ b/src/Squidex/app/framework/services/local-store.service.ts @@ -20,7 +20,7 @@ export class LocalStoreService { this.store = store; } - public get(key: string): any { + public get(key: string): string | null { try { return this.store.getItem(key); } catch (e) { @@ -28,7 +28,7 @@ export class LocalStoreService { } } - public set(key: string, value: any) { + public set(key: string, value: string) { try { this.store.setItem(key, value); } catch (e) { diff --git a/src/Squidex/app/framework/services/message-bus.spec.ts b/src/Squidex/app/framework/services/message-bus.service.spec.ts similarity index 100% rename from src/Squidex/app/framework/services/message-bus.spec.ts rename to src/Squidex/app/framework/services/message-bus.service.spec.ts diff --git a/src/Squidex/app/framework/services/message-bus.ts b/src/Squidex/app/framework/services/message-bus.service.ts similarity index 100% rename from src/Squidex/app/framework/services/message-bus.ts rename to src/Squidex/app/framework/services/message-bus.service.ts diff --git a/src/Squidex/app/framework/services/onboarding.service.ts b/src/Squidex/app/framework/services/onboarding.service.ts new file mode 100644 index 000000000..209e17e9f --- /dev/null +++ b/src/Squidex/app/framework/services/onboarding.service.ts @@ -0,0 +1,41 @@ + + + +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Sebastian Stehle. All rights reserved + */ + +import { Injectable } from '@angular/core'; + +import { LocalStoreService } from './local-store.service'; + +export const OnboardingServiceFactory = (localStore: LocalStoreService) => { + return new OnboardingService(localStore); +}; + +@Injectable() +export class OnboardingService { + constructor( + private readonly localStore: LocalStoreService + ) { + } + + public disableAll() { + this.disable('all'); + } + + public disable(key: string) { + this.localStore.set(`squidex.onboarding.disable.${key}`, '1'); + } + + public shouldShow(key: string) { + return this.shouldShowKey(key) && this.shouldShowKey('all'); + } + + private shouldShowKey(key: string) { + return this.localStore.get(`squidex.onboarding.disable.${key}`) !== '1'; + } +} \ 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 1519a7f3b..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/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss index 7ada9cc3c..3dcfdf5ad 100644 --- a/src/Squidex/app/theme/_bootstrap.scss +++ b/src/Squidex/app/theme/_bootstrap.scss @@ -317,7 +317,6 @@ a { // Special button groups &-group { - .btn-toggle { & { border: 2px solid $color-border; diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss index 47d92eeae..c6507c14a 100644 --- a/src/Squidex/app/theme/_forms.scss +++ b/src/Squidex/app/theme/_forms.scss @@ -92,7 +92,7 @@ @include absolute(2px, auto, auto, 0); @include border-radius(.25em); @include box-shadow; - max-height: 10rem; + max-height: 15rem; border: 1px solid $color-input-border; background: $color-dark-foreground; padding: .3rem 0; diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss index 6f53dd43b..178e03293 100644 --- a/src/Squidex/app/theme/_lists.scss +++ b/src/Squidex/app/theme/_lists.scss @@ -122,10 +122,8 @@ // Caret that is placed next to the expand button. &::before { - @include caret-top; - @include absolute(-.5rem, 5.2rem, auto, auto); - border-color: transparent transparent $color-border; - border-width: .6rem; + @include caret-top($color-border); + @include absolute(-1.1rem, 5.2rem, auto, auto); } &-tab { diff --git a/src/Squidex/app/theme/_mixins.scss b/src/Squidex/app/theme/_mixins.scss index 52904cf95..0d963d90f 100644 --- a/src/Squidex/app/theme/_mixins.scss +++ b/src/Squidex/app/theme/_mixins.scss @@ -130,29 +130,40 @@ box-sizing: border-box; } -@mixin caret-top() { - display: inline-block; - width: 0; - height: 0; - content: ''; - border-bottom: .3em solid; - border-right: .3em solid transparent; - border-left: .3em solid transparent; +@mixin caret-top($color, $size: .6rem) { + @include caret; + border: $size solid transparent; + border-bottom-color: $color; +} + +@mixin caret-left($color, $size: .6rem) { + @include caret; + border: $size solid transparent; + border-right-color: $color; +} + +@mixin caret-right($color, $size: .6rem) { + @include caret; + border: $size solid transparent; + border-left-color: $color; +} + +@mixin caret-bottom($color, $size: .6rem) { + @include caret; + border: $size solid transparent; + border-top-color: $color; } -@mixin caret-bottom() { +@mixin caret() { display: inline-block; - width: 0; - height: 0; + width: 0; + height: 0; content: ''; - border-top: .3em solid; - border-right: .3em solid transparent; - border-left: .3em solid transparent; } @mixin circle($size) { @include border-radius($size * .5); - width: $size; + width: $size; height: $size; } @@ -223,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() {