mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
24 changed files with 331 additions and 64 deletions
@ -0,0 +1,16 @@ |
|||||
|
<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" [sqxModalTarget]="for" [position]="position" [offset]="4" [auto]="false"> |
||||
|
<div class="onboarding-tooltip" [ngClass]="position"> |
||||
|
<div class="arrow1"></div> |
||||
|
<div class="arrow2"></div> |
||||
|
|
||||
|
<div class="content">{{text}}</div> |
||||
|
|
||||
|
<a (click)="hideThis()" class="hide-this btn-link btn-default btn-sm"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
|
||||
|
<button (click)="hideAll()" class="hide-all btn-link btn-primary btn-sm"> |
||||
|
Hide all Tooltips |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -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(); |
||||
|
} |
||||
|
} |
||||
@ -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'; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue