From 318422790754ac6b7d66b3f193d17d0ba688afd3 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Thu, 21 Sep 2017 23:06:49 +0200 Subject: [PATCH] Onboarding component --- .../contents/contents-page.component.html | 12 ++- .../shared/content-item.component.html | 2 +- .../schemas/pages/schema/field.component.html | 2 +- .../pages/schema/schema-page.component.html | 2 +- .../pages/webhook-events-page.component.scss | 6 +- .../framework/angular/dropdown.component.scss | 2 + .../angular/image-source.directive.ts | 17 +++- .../angular/modal-target.directive.ts | 54 ++++++++-- .../framework/angular/modal-view.directive.ts | 10 +- .../angular/onboarding-tooltip.component.html | 16 +++ .../angular/onboarding-tooltip.component.scss | 46 +++++++++ .../angular/onboarding-tooltip.component.ts | 98 +++++++++++++++++++ .../app/framework/angular/slider.component.ts | 22 ++--- src/Squidex/app/framework/declarations.ts | 4 +- src/Squidex/app/framework/module.ts | 5 + .../framework/services/local-store.service.ts | 4 +- ...us.spec.ts => message-bus.service.spec.ts} | 0 ...{message-bus.ts => message-bus.service.ts} | 0 .../framework/services/onboarding.service.ts | 41 ++++++++ .../language-selector.component.html | 2 +- src/Squidex/app/theme/_bootstrap.scss | 1 - src/Squidex/app/theme/_forms.scss | 2 +- src/Squidex/app/theme/_lists.scss | 6 +- src/Squidex/app/theme/_mixins.scss | 41 +++++--- 24 files changed, 331 insertions(+), 64 deletions(-) create mode 100644 src/Squidex/app/framework/angular/onboarding-tooltip.component.html create mode 100644 src/Squidex/app/framework/angular/onboarding-tooltip.component.scss create mode 100644 src/Squidex/app/framework/angular/onboarding-tooltip.component.ts rename src/Squidex/app/framework/services/{message-bus.spec.ts => message-bus.service.spec.ts} (100%) rename src/Squidex/app/framework/services/{message-bus.ts => message-bus.service.ts} (100%) create mode 100644 src/Squidex/app/framework/services/onboarding.service.ts 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..34776f88a 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 @@ -15,12 +15,20 @@
- +
+ + + + + + -
+
-
+
Publish 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..7b01dba4a 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..ab88f073a 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 @@ -21,7 +21,7 @@ -
+
Scripts 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/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..6fd651508 100644 --- a/src/Squidex/app/framework/angular/image-source.directive.ts +++ b/src/Squidex/app/framework/angular/image-source.directive.ts @@ -5,14 +5,16 @@ * 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 size: any; private loadRetries = 0; private loadQuery: string | null = null; @@ -43,14 +45,19 @@ export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit { this.resize(this.parent); } + public ngOnDestroy() { + this.parentResizeListener(); + } + public ngOnInit() { if (this.parent === null) { 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); + }); } @HostListener('load') diff --git a/src/Squidex/app/framework/angular/modal-target.directive.ts b/src/Squidex/app/framework/angular/modal-target.directive.ts index da66b3a72..919950796 100644 --- a/src/Squidex/app/framework/angular/modal-target.directive.ts +++ b/src/Squidex/app/framework/angular/modal-target.directive.ts @@ -24,7 +24,10 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit { public offset = 2; @Input() - public position = 'left'; + public position = 'topLeft'; + + @Input() + public auto = true; constructor( private readonly renderer: Renderer, @@ -78,23 +81,56 @@ 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 modalRect = this.element.nativeElement.getBoundingClientRect(); const targetRect: ClientRect = this.targetElement.getBoundingClientRect(); - const left = this.position === 'left' ? - targetRect.left : - targetRect.right - modalRect.width; + let top = 0, left = 0; + + if (this.position === 'topLeft' || this.position === 'topRight') { + top = targetRect.bottom + this.offset; + + if (this.auto && top + modalRect.height > viewportHeight) { + const t = targetRect.top - modalRect.height - this.offset; + + if (t > 0) { + top = t; + } + } + } else { + top = targetRect.top - modalRect.height - this.offset; + + if (this.auto && top < 0) { + const t = targetRect.bottom + this.offset; - let top = targetRect.bottom + this.offset; + if (t + modalRect.height > viewportHeight) { + top = t; + } + } + } + + 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; + } + } + } else { + left = targetRect.right - modalRect.width - this.offset; - if (top + modalRect.height > viewportHeight) { - const potentialTop = targetRect.top - modalRect.height - this.offset; + if (this.auto && left < 0) { + const l = targetRect.left + this.offset; - if (potentialTop > 0) { - top = potentialTop; + if (l + modalRect.width > viewportWidth) { + left = l; + } } } diff --git a/src/Squidex/app/framework/angular/modal-view.directive.ts b/src/Squidex/app/framework/angular/modal-view.directive.ts index 0082b4603..4becbcdf1 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') @@ -81,7 +81,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 +109,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..acd37d0d2 --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html @@ -0,0 +1,16 @@ +
+
+
+
+ +
{{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 new file mode 100644 index 000000000..11481f5f4 --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.scss @@ -0,0 +1,46 @@ +@import '_mixins'; +@import '_vars'; + +$color: $color-theme-blue; + +$size-arrow: 10px; + +// sass-lint:disable class-name-format + +.onboarding-tooltip { + & { + @include box-shadow(0, 2px, 20px, .3); + max-width: 20rem; + background: $color-dark-foreground; + border: 1px solid $color; + position: relative; + } + + .content { + padding: 1.6rem 1.6rem 2.5rem; + } + + .hide-this { + @include absolute(.1rem, .1rem, auto, auto); + } + + .hide-all { + @include absolute(auto, .1rem, .1rem, auto); + } + + &.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); + } + } +} \ 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..fc7d0c96c --- /dev/null +++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.ts @@ -0,0 +1,98 @@ +/* + * 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'; + +@Component({ + selector: 'sqx-onboarding-tooltip', + styleUrls: ['./onboarding-tooltip.component.scss'], + templateUrl: './onboarding-tooltip.component.html' +}) +export class OnboardingTooltipComponent implements OnDestroy, OnInit { + private showTimer: any; + private closeTimer: any; + private forClickListener: Function; + + public tooltipModal = new ModalView(); + + @Input() + public for: any; + + @Input() + public id: string; + + @Input() + public position = 'left'; + + @Input() + public after = 1000; + + @Input() + public text: string; + + constructor( + private readonly onboardingService: OnboardingService, + private readonly renderer: Renderer + ) { + } + + public ngOnDestroy() { + if (this.showTimer) { + clearTimeout(this.showTimer); + this.showTimer = null; + } + + if (this.closeTimer) { + clearTimeout(this.closeTimer); + this.closeTimer = null; + } + + if (this.forClickListener) { + this.forClickListener(); + this.forClickListener = 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.after); + + this.forClickListener = + this.renderer.listen(this.for, 'mousedown', () => { + this.onboardingService.disable(this.id); + + this.hideThis(); + }); + } + } + + public hideThis() { + this.onboardingService.disable(this.id); + this.tooltipModal.hide(); + + this.ngOnDestroy(); + } + + public hideAll() { + this.onboardingService.disableAll(); + this.tooltipModal.hide(); + + this.ngOnDestroy(); + } +} \ 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/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/language-selector.component.html b/src/Squidex/app/shared/components/language-selector.component.html index 1519a7f3b..35105b0cf 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/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..35c5a6e7c 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-bottom() { +@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() { 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; }