mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
19 changed files with 410 additions and 10 deletions
@ -0,0 +1,154 @@ |
|||
<div class="modal" *sqxModalView="modalView;onRoot:true;closeAuto:false" @fade> |
|||
<div class="modal-backdrop"></div> |
|||
<div class="modal-dialog"> |
|||
<div class="modal-content"> |
|||
<a class="header-right modal-close" (click)="modalView.hide()">Skip Tour</a> |
|||
|
|||
<div class="onboarding-step" *ngIf="step === 0"> |
|||
<img @fade class="header-left" src="/images/logo-white-small.png" /> |
|||
|
|||
<div class="onboarding-enter-leave" @slide> |
|||
<h1>Welcome to <span class="header-focus">Squidex CMS</span></h1> |
|||
|
|||
<p> |
|||
You can start managing and distributing your content right away, but we we'd like to walk you through some basics first... |
|||
</p> |
|||
<p> |
|||
How's that? |
|||
</p> |
|||
|
|||
<button (click)="next()" class="btn btn-success">Let'ts take a look around</button> |
|||
</div> |
|||
</div> |
|||
<div class="onboarding-step" *ngIf="step === 1"> |
|||
<h1 class="header-left header-focus" @fade>Apps</h1> |
|||
|
|||
<div @slide> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="onboarding-text"> |
|||
<p> |
|||
An App is the repository for your project, e.g. (blog, webshop or mobile app). You can assign contributors to your app to |
|||
work together. |
|||
</p> |
|||
<p> |
|||
You can create an unlimited number of Apps in Squidex to manage multiple projects at the same time. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="col col-auto"> |
|||
<img src="/images/onboarding-step1.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<button (click)="next()" class="btn btn-success">Continue</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="onboarding-step" *ngIf="step === 2"> |
|||
<h1 class="header-left header-focus" @fade>Schemas</h1> |
|||
|
|||
<div @slide> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="onboarding-text"> |
|||
<p> |
|||
Schemas define the structure of your content, the fields and the data types of a content item. |
|||
</p> |
|||
<p> |
|||
Beforew you can add content to your schema, make sure to hit the 'Publish' button at the top to make the schema availabel |
|||
to your content editors. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="col col-auto"> |
|||
<img src="/images/onboarding-step2.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<button (click)="next()" class="btn btn-success">Keep going!</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="onboarding-step" *ngIf="step === 3"> |
|||
<h1 @fade class="header-left header-focus">Contents</h1> |
|||
|
|||
<div @slide> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="onboarding-text"> |
|||
<p> |
|||
Content is the actual data in your app which is grouped by the schema. |
|||
</p> |
|||
<p> |
|||
Select a published schema first, then add content for this schema. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="col col-auto"> |
|||
<img src="/images/onboarding-step3.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<button (click)="next()" class="btn btn-success">Almost there!</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="onboarding-step" *ngIf="step === 4"> |
|||
<h1 @fade class="header-left header-focus">Assets</h1> |
|||
|
|||
<div @slide> |
|||
|
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="onboarding-text"> |
|||
<p> |
|||
The assets contains all files that can also be linked to your content. For example images, videos or documents. |
|||
</p> |
|||
<p> |
|||
You can upload the assets here and use them later or also upload them directly when you create a new content item with an |
|||
asset field. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="col col-auto"> |
|||
<img src="/images/onboarding-step4.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<button (click)="next()" class="btn btn-success">Got It!</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="onboarding-step" *ngIf="step === 5"> |
|||
<img @fade class="header-left" src="/images/logo-white-small.png" /> |
|||
|
|||
<div class="onboarding-enter-leave" @slide> |
|||
<h1>Awesome, now you know the basics!</h1> |
|||
|
|||
<p> |
|||
But that's not all of the support we can provide. <br />You can go to <a href="https://docs.squidex.io/" |
|||
target="_blank">https://docs.squidex.io/</a> to read more. |
|||
</p> |
|||
<p> |
|||
Do you want to join our community? |
|||
</p> |
|||
|
|||
<div> |
|||
<a class="btn btn-success" href="https://squidex.slack.com/signup" target="_blank"> |
|||
Join us on Slack |
|||
</a> |
|||
|
|||
<a class="btn btn-success" href="https://github.com/squidex/squidex" target="_blank"> |
|||
Join us on Github |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,78 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
$size-width: 825px; |
|||
$size-height: 576px; |
|||
|
|||
$size-image: 476px; |
|||
|
|||
h1 { |
|||
font-size: 1.6rem; |
|||
} |
|||
|
|||
p { |
|||
line-height: 1.8rem; |
|||
} |
|||
|
|||
.modal { |
|||
&-content, |
|||
&-dialog { |
|||
min-height: $size-height; |
|||
max-height: $size-height; |
|||
min-width: $size-width; |
|||
max-width: $size-width; |
|||
} |
|||
|
|||
&-content { |
|||
color: $color-dark-foreground; |
|||
background-color: $color-dark-onboarding; |
|||
background-image: url('/images/onboarding-background.png'); |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
&-close { |
|||
text-decoration: underline !important; |
|||
cursor: pointer; |
|||
color: $color-dark-foreground; |
|||
} |
|||
} |
|||
|
|||
.header-focus { |
|||
color: $color-theme-blue; |
|||
} |
|||
|
|||
.header-left { |
|||
@include absolute(-70px, auto, auto, 2rem); |
|||
} |
|||
|
|||
.header-right { |
|||
@include absolute(2rem, 2rem, auto, auto); |
|||
} |
|||
|
|||
.footer { |
|||
@include absolute(auto, auto, 5rem, 2rem); |
|||
} |
|||
|
|||
.onboarding { |
|||
&-enter-leave { |
|||
& { |
|||
text-align: center; |
|||
margin: 4rem auto 0; |
|||
max-width: 28rem; |
|||
min-width: 28rem; |
|||
} |
|||
|
|||
p { |
|||
margin: 2rem 0; |
|||
} |
|||
} |
|||
|
|||
&-text { |
|||
padding-left: 2rem; |
|||
} |
|||
|
|||
&-step { |
|||
@include absolute($size-height - $size-image, 0, 0, 0); |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, Input } from '@angular/core'; |
|||
|
|||
import { |
|||
fadeAnimation, |
|||
ModalView, |
|||
slideAnimation |
|||
} from 'framework'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-onboarding-dialog', |
|||
styleUrls: ['./onboarding-dialog.component.scss'], |
|||
templateUrl: './onboarding-dialog.component.html', |
|||
animations: [ |
|||
fadeAnimation, slideAnimation |
|||
] |
|||
}) |
|||
export class OnboardingDialogComponent { |
|||
public step = 0; |
|||
|
|||
@Input() |
|||
public modalView = new ModalView(); |
|||
|
|||
public next() { |
|||
this.step = this.step + 1; |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { OnboardingService, OnboardingServiceFactory } from './../'; |
|||
|
|||
class LocalStoreMock { |
|||
private store = {}; |
|||
|
|||
public get(key: string) { |
|||
return this.store[key]; |
|||
} |
|||
|
|||
public set(key: string, value: string) { |
|||
this.store[key] = value; |
|||
} |
|||
} |
|||
|
|||
describe('OnboardingService', () => { |
|||
const localStore = new LocalStoreMock(); |
|||
|
|||
it('should instantiate from factory', () => { |
|||
const onboardingService = OnboardingServiceFactory(<any>localStore); |
|||
|
|||
expect(onboardingService).toBeDefined(); |
|||
}); |
|||
|
|||
it('should instantiate', () => { |
|||
const onboardingService = new OnboardingService(<any>localStore); |
|||
|
|||
expect(onboardingService).toBeDefined(); |
|||
}); |
|||
|
|||
it('should return true when value not in store', () => { |
|||
localStore.set('squidex.onboarding.disable.feature1', '0'); |
|||
|
|||
const onboardingService = new OnboardingService(<any>localStore); |
|||
|
|||
onboardingService.disable('feature2'); |
|||
|
|||
expect(onboardingService.shouldShow('feature1')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should return false when value in store', () => { |
|||
localStore.set('squidex.onboarding.disable.feature1', '1'); |
|||
|
|||
const onboardingService = new OnboardingService(<any>localStore); |
|||
|
|||
expect(onboardingService.shouldShow('feature1')).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return false when disabled', () => { |
|||
const onboardingService = new OnboardingService(<any>localStore); |
|||
|
|||
onboardingService.disable('feature1'); |
|||
|
|||
expect(onboardingService.shouldShow('feature1')).toBeFalsy(); |
|||
}); |
|||
|
|||
it('should return false when all disabled', () => { |
|||
const onboardingService = new OnboardingService(<any>localStore); |
|||
|
|||
onboardingService.disableAll(); |
|||
|
|||
expect(onboardingService.shouldShow('feature1')).toBeFalsy(); |
|||
}); |
|||
}); |
|||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 40 KiB |
Loading…
Reference in new issue