tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix onboarding dialog.

pull/282/head
Sebastian Stehle 8 years ago
parent
e6ac634147
commit
f867270cd6
5 changed files with 133 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/Squidex/app/features/apps/pages/apps-page.component.html
  2. 2
      src/Squidex/app/features/apps/pages/apps-page.component.ts
  3. 241
      src/Squidex/app/features/apps/pages/onboarding-dialog.component.html
  4. 8
      src/Squidex/app/features/apps/pages/onboarding-dialog.component.scss
  5. 12
      src/Squidex/app/features/apps/pages/onboarding-dialog.component.ts

4
src/Squidex/app/features/apps/pages/apps-page.component.html
View File

@ -80,4 +80,6 @@
</sqx-app-form>
</ng-container>
<sqx-onboarding-dialog [modalView]="onboardingModal"></sqx-onboarding-dialog>
<ng-container *sqxModalView="onboardingModal;onRoot:true;closeAuto:false">
<sqx-onboarding-dialog (close)="onboardingModal.hide()"></sqx-onboarding-dialog>
</ng-container>

2
src/Squidex/app/features/apps/pages/apps-page.component.ts
View File

@ -27,7 +27,7 @@ export class AppsPageComponent implements OnDestroy, OnInit {
public addAppDialog = new ModalView();
public apps: ImmutableArray<AppDto>;
public apps: ImmutableArray<AppDto> = ImmutableArray.empty();
public appTemplate = '';
public onboardingModal = new ModalView();

241
src/Squidex/app/features/apps/pages/onboarding-dialog.component.html
View File

@ -1,149 +1,146 @@
<ng-container *sqxModalView="modalView;onRoot:true;closeAuto:false">
<sqx-modal-dialog showHeader="false">
<ng-container content>
<a class="header-right modal-close" (click)="modalView.hide()">Skip Tour</a>
<sqx-modal-dialog [showHeader]="false">
<ng-container content>
<a class="header-right modal-close" (click)="close.emit()">Skip Tour</a>
<div class="onboarding-step" *ngIf="step === 0">
<img @fade class="header-left" src="/images/logo-white-small.png" />
<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>
<div @slide class="onboarding-enter-leave">
<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>
<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>
<button (click)="next()" class="btn btn-success">Let'ts take a look around</button>
</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-image">
<img src="/images/onboarding-step1.png" />
</div>
<div class="onboarding-step" *ngIf="step === 1">
<h1 @fade class="header-left header-focus">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="footer">
<button (click)="next()" class="btn btn-success">Continue</button>
<div class="col col-image">
<img src="/images/onboarding-step1.png" />
</div>
</div>
<div class="footer">
<button (click)="next()" class="btn btn-success">Continue</button>
</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>
Before you can add content to your schema, make sure to hit the 'Publish' button at the top to make the schema available to your content editors.
</p>
</div>
</div>
<div class="col col-image">
<img src="/images/onboarding-step2.png" />
</div>
<div class="onboarding-step" *ngIf="step === 2">
<h1 @fade class="header-left header-focus">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>
Before you can add content to your schema, make sure to hit the 'Publish' button at the top to make the schema available to your content editors.
</p>
</div>
</div>
<div class="footer">
<button (click)="next()" class="btn btn-success">Keep going!</button>
<div class="col col-image">
<img src="/images/onboarding-step2.png" />
</div>
</div>
<div class="footer">
<button (click)="next()" class="btn btn-success">Keep going!</button>
</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-image">
<img src="/images/onboarding-step3.png" />
</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="footer">
<button (click)="next()" class="btn btn-success">Almost there!</button>
<div class="col col-image">
<img src="/images/onboarding-step3.png" />
</div>
</div>
<div class="footer">
<button (click)="next()" class="btn btn-success">Almost there!</button>
</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-image">
<img src="/images/onboarding-step4.png" />
</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="footer">
<button (click)="next()" class="btn btn-success">Got It!</button>
<div class="col col-image">
<img src="/images/onboarding-step4.png" />
</div>
</div>
<div class="footer">
<button (click)="next()" class="btn btn-success">Got It!</button>
</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.herokuapp.com/" target="_blank">
Join us on Slack
</a> &nbsp;
<a class="btn btn-success" href="https://github.com/squidex/squidex" target="_blank">
Join us on Github
</a>
</div>
</div>
<div class="onboarding-step" *ngIf="step === 5">
<img @fade class="header-left" src="/images/logo-white-small.png" />
<div @slide class="onboarding-enter-leave">
<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.herokuapp.com/" target="_blank">
Join us on Slack
</a> &nbsp;
<a class="btn btn-success" href="https://github.com/squidex/squidex" target="_blank">
Join us on Github
</a>
</div>
</div>
</ng-container>
</sqx-modal-dialog>
</ng-container>
</div>
</ng-container>
</sqx-modal-dialog>

8
src/Squidex/app/features/apps/pages/onboarding-dialog.component.scss
View File

@ -19,7 +19,7 @@ p {
max-width: 489px;
}
.modal {
:host /deep/ .modal {
&-content,
&-dialog {
min-height: $size-height;
@ -32,10 +32,14 @@ p {
color: $color-dark-foreground;
background-color: $color-dark-onboarding;
background-image: url('/images/onboarding-background.png');
overflow: hidden;
position: relative;
}
&-body,
&-content {
overflow: hidden;
}
&-close {
text-decoration: underline !important;
cursor: pointer;

12
src/Squidex/app/features/apps/pages/onboarding-dialog.component.ts
View File

@ -5,13 +5,9 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
import { Component, Input } from '@angular/core';
import { Component, EventEmitter, Output } from '@angular/core';
import {
fadeAnimation,
ModalView,
slideAnimation
} from '@app/framework';
import { fadeAnimation, slideAnimation } from '@app/framework';
@Component({
selector: 'sqx-onboarding-dialog',
@ -24,8 +20,8 @@ import {
export class OnboardingDialogComponent {
public step = 0;
@Input()
public modalView = new ModalView();
@Output()
public close = new EventEmitter();
public next() {
this.step = this.step + 1;

Write Preview
Loading…
Cancel
Save