Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added tutorial workflow

This commit is contained in:
Nicolas Constant 2019-02-10 22:23:10 -05:00
parent c0019d5dc5
commit 75f1ee95dd
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
8 changed files with 157 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -5,7 +5,7 @@
</app-streams-main-display>-->
<div id="display-zone">
<app-tutorial id="tutorial"></app-tutorial>
<app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
<app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
<router-outlet></router-outlet>
</div>

68
src/app/app.component.ts
View File

@ -1,38 +1,48 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import { NavigationService, LeftPanelType } from './services/navigation.service';
import { Subscription } from 'rxjs';
import { AccountWrapper } from './models/account.models';
import { Subscription, Observable } from 'rxjs';
import { Select } from '@ngxs/store';
// import { ElectronService } from 'ngx-electron';
import { NavigationService, LeftPanelType } from './services/navigation.service';
import { StreamElement } from './states/streams.state';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy{
title = 'app';
export class AppComponent implements OnInit, OnDestroy {
title = 'Sengi';
floatingColumnActive: boolean;
private columnEditorSub: Subscription;
floatingColumnActive: boolean;
tutorialActive: boolean;
private columnEditorSub: Subscription;
constructor(private readonly navigationService: NavigationService) {
}
ngOnInit(): void {
this.columnEditorSub = this.navigationService.activatedPanelSubject.subscribe((type: LeftPanelType) => {
if(type === LeftPanelType.Closed) {
this.floatingColumnActive = false;
} else {
this.floatingColumnActive = true;
}
});
}
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
constructor(private readonly navigationService: NavigationService) {
}
ngOnInit(): void {
this.streamElements$.subscribe((streams: StreamElement[]) => {
if(streams && streams.length === 0){
this.tutorialActive = true;
} else {
this.tutorialActive = false;
}
});
this.columnEditorSub = this.navigationService.activatedPanelSubject.subscribe((type: LeftPanelType) => {
if (type === LeftPanelType.Closed) {
this.floatingColumnActive = false;
} else {
this.floatingColumnActive = true;
}
});
}
ngOnDestroy(): void {
this.columnEditorSub.unsubscribe();
}
ngOnDestroy(): void {
this.columnEditorSub.unsubscribe();
}
}

8
src/app/components/left-side-bar/left-side-bar.component.html
View File

@ -1,8 +1,8 @@
<div class="left-bar">
<a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()">
<a class="left-bar-button left-bar-button--status left-bar-link" href title="write new message" (click)="createNewStatus()" *ngIf="hasAccounts">
<ion-icon name="md-send"></ion-icon>
</a>
<a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()">
<a class="left-bar-button left-bar-button--search left-bar-link" href title="search" (click)="openSearch()" *ngIf="hasAccounts">
<ion-icon name="md-search"></ion-icon>
</a>
@ -11,11 +11,11 @@
</app-account-icon>
</div>
<a class="left-bar-button left-bar-button--add left-bar-link" href title="add new account" (click)="addNewAccount()">
<a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }" href title="add new account" (click)="addNewAccount()">
<ion-icon name="md-add"></ion-icon>
</a>
<a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()">
<a class="left-bar-button left-bar-button--cog left-bar-link" href title="settings" (click)="openSettings()" *ngIf="hasAccounts">
<ion-icon name="md-cog"></ion-icon>
</a>
</div>

5
src/app/components/left-side-bar/left-side-bar.component.scss
View File

@ -1,6 +1,7 @@
@import "variables";
$width-button: 50px;
$height-button: 40px;
.left-bar {
width: $width-button;
height: calc(100%);
@ -62,3 +63,7 @@ $height-button: 40px;
}
}
.no-accounts {
margin-top: 10px;
// color: cornflowerblue;
}

3
src/app/components/left-side-bar/left-side-bar.component.ts
View File

@ -16,6 +16,7 @@ import { MastodonService } from "../../services/mastodon.service";
})
export class LeftSideBarComponent implements OnInit, OnDestroy {
accounts: AccountWrapper[] = [];
hasAccounts: boolean;
private accounts$: Observable<AccountInfo[]>;
// private loadedAccounts: { [index: string]: AccountInfo } = {};
@ -55,6 +56,8 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
for(let delAcc of deletedAccounts){
this.accounts = this.accounts.filter(x => x.info.id !== delAcc.info.id);
}
this.hasAccounts = this.accounts.length > 0;
}
});
}

23
src/app/components/tutorial/tutorial.component.html
View File

@ -1,10 +1,17 @@
<!-- <div class="tutorial"> -->
<div class="add-account">
<div class="add-account__arrow"></div>
<h3 class="add-account__title">Welcome to Sengi!</h3>
<p class="add-account__description">
Let's start, click the "+" button to add a new account.
</p>
</div>
<div class="open-account"></div>
<div class="add-account" *ngIf="showAddAccount">
<div class="add-account__arrow"></div>
<h3 class="add-account__title">Welcome to Sengi!</h3>
<p class="add-account__description">
Let's start, click the "+" button to add a new account.
</p>
</div>
<div class="open-account" *ngIf="showOpenAccount">
<div class="open-account__arrow"></div>
<div class="open-account__mouse-icon"></div>
<h3 class="open-account__title">Nice!</h3>
<p class="open-account__description">
Now <span class="underline">left-click</span> on your avatar to open your account and be able to add some timelines!
</p>
</div>
<!-- </div> -->

36
src/app/components/tutorial/tutorial.component.scss
View File

@ -15,6 +15,10 @@
// font-size: $default-font-size;
// }
.underline {
text-decoration: underline;
}
.add-account{
position: absolute;
@ -39,7 +43,37 @@
width: 200px;
display: inline-block;
word-break: break-all;
//word-break: break-all;
white-space: normal;
}
}
.open-account{
position: absolute;
&__arrow {
position: relative;
}
&__title{
position: relative;
top: 30px;
left: 160px;
width: 50px;
}
&__description {
position: relative;
top: 40px;
left: 90px;
text-align: right;
width: 200px;
display: inline-block;
// word-break: break-all;
white-space: normal;
}
}

63
src/app/components/tutorial/tutorial.component.ts
View File

@ -1,15 +1,62 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Select } from '@ngxs/store';
import { Observable, Subscription } from 'rxjs';
import { AccountInfo } from '../../states/accounts.state';
import { StreamElement } from '../../states/streams.state';
@Component({
selector: 'app-tutorial',
templateUrl: './tutorial.component.html',
styleUrls: ['./tutorial.component.scss']
selector: 'app-tutorial',
templateUrl: './tutorial.component.html',
styleUrls: ['./tutorial.component.scss']
})
export class TutorialComponent implements OnInit {
export class TutorialComponent implements OnInit, OnDestroy {
public showAddAccount: boolean;
public showOpenAccount: boolean;
constructor() { }
private hasAccounts: boolean;
private hasColumns: boolean;
ngOnInit() {
}
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
@Select(state => state.registeredaccounts.accounts) accounts$: Observable<AccountInfo[]>;
private accountsSub: Subscription;
private steamsSub: Subscription;
constructor() {
}
ngOnInit() {
this.accountsSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
if (accounts) {
if (accounts.length === 0) {
this.showAddAccount = true;
this.showOpenAccount = false;
} else {
this.hasAccounts = true;
this.showAddAccount = false;
if (!this.hasColumns) {
this.showOpenAccount = true;
}
}
}
});
this.steamsSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
if (streams) {
if (streams.length === 0 && this.hasAccounts) {
this.showOpenAccount = true;
} else if(streams.length > 0 && this.hasAccounts){
this.hasColumns = true;
this.showOpenAccount = false;
}
}
});
}
ngOnDestroy(): void {
this.accountsSub.unsubscribe();
this.steamsSub.unsubscribe();
}
}