From 0209b7688620213444a46a3f5589b1e70fb976db Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 18:49:17 -0500 Subject: [PATCH 01/30] fix #27 --- .../status/reply-to-status/reply-to-status.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts b/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts index bb30e61b..a0ef45cd 100644 --- a/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts +++ b/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts @@ -28,7 +28,11 @@ export class ReplyToStatusComponent implements OnInit { private readonly mastodonService: MastodonService) { } ngOnInit() { - this.statusReplyingTo = this.statusReplyingToWrapper.status; + if( this.statusReplyingToWrapper.status.reblog){ + this.statusReplyingTo = this.statusReplyingToWrapper.status.reblog; + } else { + this.statusReplyingTo = this.statusReplyingToWrapper.status; + } this.status += `@${this.statusReplyingTo.account.acct} `; for (const mention of this.statusReplyingTo.mentions) { From eee6dd832952fdaa31477f4b5bada6398dec78ea Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 18:57:16 -0500 Subject: [PATCH 02/30] clean up --- .../add-new-status/add-new-status.component.ts | 3 --- .../components/floating-column/floating-column.component.ts | 2 +- src/app/components/floating-column/search/search.component.ts | 4 ---- src/app/components/left-side-bar/left-side-bar.component.ts | 2 -- .../stream/status/action-bar/action-bar.component.ts | 2 +- .../stream/stream-overlay/stream-overlay.component.ts | 2 -- .../stream/stream-statuses/stream-statuses.component.ts | 3 +-- src/app/services/tools.service.ts | 4 ---- 8 files changed, 3 insertions(+), 19 deletions(-) diff --git a/src/app/components/floating-column/add-new-status/add-new-status.component.ts b/src/app/components/floating-column/add-new-status/add-new-status.component.ts index 6f471b24..2ed452b3 100644 --- a/src/app/components/floating-column/add-new-status/add-new-status.component.ts +++ b/src/app/components/floating-column/add-new-status/add-new-status.component.ts @@ -32,9 +32,6 @@ export class AddNewStatusComponent implements OnInit { const accounts = this.getRegisteredAccounts(); const selectedAccounts = accounts.filter(x => x.isSelected); - console.warn(`selectedAccounts ${selectedAccounts.length}`); - console.warn(`statusHandle ${this.status}`); - let visibility: VisibilityEnum = VisibilityEnum.Unknown; switch (this.selectedPrivacy) { case 'Public': diff --git a/src/app/components/floating-column/floating-column.component.ts b/src/app/components/floating-column/floating-column.component.ts index 8f5116eb..3d6b1017 100644 --- a/src/app/components/floating-column/floating-column.component.ts +++ b/src/app/components/floating-column/floating-column.component.ts @@ -64,7 +64,7 @@ export class FloatingColumnComponent implements OnInit { } browseThread(thread: string): void { - console.warn('browseThread'); + console.warn('browseThread'); //TODO console.warn(thread); } diff --git a/src/app/components/floating-column/search/search.component.ts b/src/app/components/floating-column/search/search.component.ts index dea93cbe..20e8bad8 100644 --- a/src/app/components/floating-column/search/search.component.ts +++ b/src/app/components/floating-column/search/search.component.ts @@ -57,7 +57,6 @@ export class SearchComponent implements OnInit { // } browseAccount(accountName: string): boolean { - console.warn(accountName); if (accountName) { this.browseAccountEvent.next(accountName); } @@ -71,8 +70,6 @@ export class SearchComponent implements OnInit { this.hashtags.length = 0; this.isLoading = true; - console.warn(`search: ${data}`); - const enabledAccounts = this.toolsService.getSelectedAccounts(); //First candid implementation if (enabledAccounts.length > 0) { @@ -80,7 +77,6 @@ export class SearchComponent implements OnInit { this.mastodonService.search(this.lastAccountUsed, data, true) .then((results: Results) => { if (results) { - console.warn(results); this.accounts = results.accounts.slice(0, 5); this.hashtags = results.hashtags; diff --git a/src/app/components/left-side-bar/left-side-bar.component.ts b/src/app/components/left-side-bar/left-side-bar.component.ts index 5e356da5..ad6c0163 100644 --- a/src/app/components/left-side-bar/left-side-bar.component.ts +++ b/src/app/components/left-side-bar/left-side-bar.component.ts @@ -64,12 +64,10 @@ export class LeftSideBarComponent implements OnInit, OnDestroy { } onToogleAccountNotify(acc: AccountWrapper) { - console.warn(`onToogleAccountNotify username ${acc.info.username}`); this.store.dispatch([new SelectAccount(acc.info)]); } onOpenMenuNotify(acc: AccountWrapper) { - console.warn(`onOpenMenuNotify username ${acc.info.username}`); this.navigationService.openColumnEditor(acc); } diff --git a/src/app/components/stream/status/action-bar/action-bar.component.ts b/src/app/components/stream/status/action-bar/action-bar.component.ts index 84005dad..822aac68 100644 --- a/src/app/components/stream/status/action-bar/action-bar.component.ts +++ b/src/app/components/stream/status/action-bar/action-bar.component.ts @@ -180,7 +180,7 @@ export class ActionBarComponent implements OnInit, OnDestroy { } more(): boolean { - console.warn('more'); + console.warn('more'); //TODO return false; } diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.ts b/src/app/components/stream/stream-overlay/stream-overlay.component.ts index 6dcdcd9d..7efef29e 100644 --- a/src/app/components/stream/stream-overlay/stream-overlay.component.ts +++ b/src/app/components/stream/stream-overlay/stream-overlay.component.ts @@ -151,8 +151,6 @@ class OverlayBrowsing { public readonly account: string, public readonly thread: string) { - console.warn(`OverlayBrowsing: ${hashtag} ${account} ${thread}`); - if (hashtag) { this.type = OverlayEnum.hashtag; } else if (account) { diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts index 9c486025..94bff3f4 100644 --- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts +++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts @@ -32,7 +32,6 @@ export class StreamStatusesComponent implements OnInit, OnDestroy { @Input() set streamElement(streamElement: StreamElement) { - console.warn('new stream'); this.resetStream(); this._streamElement = streamElement; @@ -139,7 +138,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy { } textSelected(): void { - console.warn(`status comp: textSelected`); + console.warn(`status comp: textSelected`); //TODO } private scrolledToTop() { diff --git a/src/app/services/tools.service.ts b/src/app/services/tools.service.ts index a2c24ca8..64807dd4 100644 --- a/src/app/services/tools.service.ts +++ b/src/app/services/tools.service.ts @@ -24,10 +24,6 @@ export class ToolsService { findAccount(account: AccountInfo, accountName: string): Promise { return this.mastodonService.search(account, accountName, true) .then((result: Results) => { - console.warn('findAccount'); - console.warn(`accountName ${accountName}`); - console.warn(result); - if(accountName[0] === '@') accountName = accountName.substr(1); const foundAccount = result.accounts.filter( From 327c5c1c7c3b1ea743ee736c42485535c329efba Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 20:48:34 -0500 Subject: [PATCH 03/30] added module to handle tutorial --- src/app/app.component.html | 10 ++--- src/app/app.component.scss | 43 ++++++++++-------- src/app/app.module.ts | 4 +- .../floating-column.component.scss | 1 - .../tutorial/tutorial.component.html | 10 +++++ .../tutorial/tutorial.component.scss | 45 +++++++++++++++++++ .../tutorial/tutorial.component.spec.ts | 25 +++++++++++ .../components/tutorial/tutorial.component.ts | 15 +++++++ src/sass/_variables.scss | 1 + 9 files changed, 128 insertions(+), 26 deletions(-) create mode 100644 src/app/components/tutorial/tutorial.component.html create mode 100644 src/app/components/tutorial/tutorial.component.scss create mode 100644 src/app/components/tutorial/tutorial.component.spec.ts create mode 100644 src/app/components/tutorial/tutorial.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 2810e38f..b367d53f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,11 +5,9 @@ -->
- - - - - + + +
@@ -20,4 +18,4 @@ Welcome to {{ title }}! ---> +--> \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 2690e025..ebb2e9dc 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,26 +1,33 @@ #display-zone { - position: absolute; - top: 0; - right: 0; - bottom: 30px; - left: 50px; - overflow-y: hidden; - overflow-x: auto; - white-space: nowrap; + position: absolute; + top: 0; + right: 0; + bottom: 30px; + left: 50px; + overflow-y: hidden; + overflow-x: auto; + white-space: nowrap; } #floating-column { - top: 0; - left: 0; - bottom: 0; - z-index: 9999; + top: 0; + left: 0; + bottom: 0; + z-index: 9999; } +#tutorial { + position: relative; + top: 0; + left: 0; + bottom: 0; + z-index: 1; +} app-streams-selection-footer { - position: absolute; - height: 30px; - right: 0; - bottom: 0; - left: 50px; -} + position: absolute; + height: 30px; + right: 0; + bottom: 0; + left: 50px; +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 601084fc..2667f0b8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,7 @@ import { DatabindedTextComponent } from './components/stream/status/databinded-t import { TimeAgoPipe } from './pipes/time-ago.pipe'; import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component'; import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component'; +import { TutorialComponent } from './components/tutorial/tutorial.component'; const routes: Routes = [ { path: "", redirectTo: "home", pathMatch: "full" }, @@ -80,7 +81,8 @@ const routes: Routes = [ DatabindedTextComponent, TimeAgoPipe, StreamStatusesComponent, - StreamEditionComponent + StreamEditionComponent, + TutorialComponent ], imports: [ FontAwesomeModule, diff --git a/src/app/components/floating-column/floating-column.component.scss b/src/app/components/floating-column/floating-column.component.scss index dc5117a1..3d394747 100644 --- a/src/app/components/floating-column/floating-column.component.scss +++ b/src/app/components/floating-column/floating-column.component.scss @@ -1,7 +1,6 @@ @import "variables"; @import "mixins"; -$floating-column-size: 330px; .floating-column { width: calc(100%); diff --git a/src/app/components/tutorial/tutorial.component.html b/src/app/components/tutorial/tutorial.component.html new file mode 100644 index 00000000..864e5f1e --- /dev/null +++ b/src/app/components/tutorial/tutorial.component.html @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/src/app/components/tutorial/tutorial.component.scss b/src/app/components/tutorial/tutorial.component.scss new file mode 100644 index 00000000..b61779df --- /dev/null +++ b/src/app/components/tutorial/tutorial.component.scss @@ -0,0 +1,45 @@ +@import "variables"; +@import "mixins"; + +// .tutorial { +// width: $floating-column-size; + +// overflow: hidden; +// z-index: 99; +// position: fixed; +// top: 0; +// bottom: $stream-selector-height; +// padding: 0; + + +// font-size: $default-font-size; +// } + + +.add-account{ + position: absolute; + + &__arrow { + + } + + &__title{ + position: relative; + top: 30px; + left: 70px; + } + + &__description { + position: relative; + top: 40px; + left: 70px; + + text-align: center; + + width: 200px; + display: inline-block; + + word-break: break-all; + white-space: normal; + } +} \ No newline at end of file diff --git a/src/app/components/tutorial/tutorial.component.spec.ts b/src/app/components/tutorial/tutorial.component.spec.ts new file mode 100644 index 00000000..705c6ee7 --- /dev/null +++ b/src/app/components/tutorial/tutorial.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TutorialComponent } from './tutorial.component'; + +xdescribe('TutorialComponent', () => { + let component: TutorialComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TutorialComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TutorialComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/tutorial/tutorial.component.ts b/src/app/components/tutorial/tutorial.component.ts new file mode 100644 index 00000000..6d5e5ff5 --- /dev/null +++ b/src/app/components/tutorial/tutorial.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-tutorial', + templateUrl: './tutorial.component.html', + styleUrls: ['./tutorial.component.scss'] +}) +export class TutorialComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 554dd601..51db0290 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -31,6 +31,7 @@ $favorite-color: #ffc16f; $stream-selector-height: 30px; $stream-column-separator: 7px; $stream-column-width: 320px; +$floating-column-size: 330px; $avatar-column-space: 70px; //Bootstrap cuistomization From c0019d5dc5559f5aabe86cdef61a263988152815 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 21:59:00 -0500 Subject: [PATCH 04/30] always have an account selected --- src/app/states/accounts.state.ts | 35 ++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/src/app/states/accounts.state.ts b/src/app/states/accounts.state.ts index 1c5f6e0f..ae0be188 100644 --- a/src/app/states/accounts.state.ts +++ b/src/app/states/accounts.state.ts @@ -29,10 +29,13 @@ export interface AccountsStateModel { export class AccountsState { @Action(AddAccount) AddAccount(ctx: StateContext, action: AddAccount) { + const state = ctx.getState(); const newAcc = action.account; newAcc.id = `${newAcc.username}@${newAcc.instance}`; - const state = ctx.getState(); + if(state.accounts.filter(x => x.isSelected).length === 0) + newAcc.isSelected = true; + ctx.patchState({ accounts: [...state.accounts, newAcc] }); @@ -41,19 +44,25 @@ export class AccountsState { @Action(SelectAccount) SelectAccount(ctx: StateContext, action: SelectAccount){ const state = ctx.getState(); - const multiSelection = action.multiselection; + // const multiSelection = action.multiselection; const selectedAccount = action.account; - const copyAccounts = [...state.accounts]; - if(!multiSelection) { - copyAccounts - .filter(x => x.id !== selectedAccount.id) - .forEach(x => x.isSelected = false); - } - const acc = copyAccounts.find(x => x.id === selectedAccount.id); - acc.isSelected = !acc.isSelected; + + + // const copyAccounts = [...state.accounts]; + // copyAccounts + // .filter(x => x.id !== selectedAccount.id) + // .forEach(x => x.isSelected = false); + + const oldSelectedAccount = state.accounts.find(x => x.isSelected); + + if(selectedAccount.id === oldSelectedAccount.id) return; + + const acc = state.accounts.find(x => x.id === selectedAccount.id); + acc.isSelected = true; + oldSelectedAccount.isSelected = false; ctx.patchState({ - accounts: copyAccounts + accounts: [...state.accounts] }); } @@ -61,6 +70,10 @@ export class AccountsState { RemoveAccount(ctx: StateContext, action: RemoveAccount){ const state = ctx.getState(); const filteredAccounts = state.accounts.filter(x => x.id !== action.accountId); + + if(filteredAccounts.length === 1) + filteredAccounts[0].isSelected = true; + ctx.patchState({ accounts: filteredAccounts }); From 75f1ee95dde4a21586221904fc61ffb5e53fa9e6 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 22:23:10 -0500 Subject: [PATCH 05/30] added tutorial workflow --- src/app/app.component.html | 2 +- src/app/app.component.ts | 68 +++++++++++-------- .../left-side-bar.component.html | 8 +-- .../left-side-bar.component.scss | 5 ++ .../left-side-bar/left-side-bar.component.ts | 3 + .../tutorial/tutorial.component.html | 23 ++++--- .../tutorial/tutorial.component.scss | 36 +++++++++- .../components/tutorial/tutorial.component.ts | 63 ++++++++++++++--- 8 files changed, 157 insertions(+), 51 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index b367d53f..5d8518e6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,7 +5,7 @@ -->
- +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d2d98276..12cf64ec 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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; + + 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(); - } - } diff --git a/src/app/components/left-side-bar/left-side-bar.component.html b/src/app/components/left-side-bar/left-side-bar.component.html index f9bbc44c..310d3f50 100644 --- a/src/app/components/left-side-bar/left-side-bar.component.html +++ b/src/app/components/left-side-bar/left-side-bar.component.html @@ -1,8 +1,8 @@
- + - + @@ -11,11 +11,11 @@
- + - + \ No newline at end of file diff --git a/src/app/components/left-side-bar/left-side-bar.component.scss b/src/app/components/left-side-bar/left-side-bar.component.scss index 052f750e..4bc39ed3 100644 --- a/src/app/components/left-side-bar/left-side-bar.component.scss +++ b/src/app/components/left-side-bar/left-side-bar.component.scss @@ -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; +} \ No newline at end of file diff --git a/src/app/components/left-side-bar/left-side-bar.component.ts b/src/app/components/left-side-bar/left-side-bar.component.ts index ad6c0163..9b7f2dc7 100644 --- a/src/app/components/left-side-bar/left-side-bar.component.ts +++ b/src/app/components/left-side-bar/left-side-bar.component.ts @@ -16,6 +16,7 @@ import { MastodonService } from "../../services/mastodon.service"; }) export class LeftSideBarComponent implements OnInit, OnDestroy { accounts: AccountWrapper[] = []; + hasAccounts: boolean; private accounts$: Observable; // 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; } }); } diff --git a/src/app/components/tutorial/tutorial.component.html b/src/app/components/tutorial/tutorial.component.html index 864e5f1e..41292be0 100644 --- a/src/app/components/tutorial/tutorial.component.html +++ b/src/app/components/tutorial/tutorial.component.html @@ -1,10 +1,17 @@ - - + + \ No newline at end of file diff --git a/src/app/components/tutorial/tutorial.component.scss b/src/app/components/tutorial/tutorial.component.scss index b61779df..f6e3795e 100644 --- a/src/app/components/tutorial/tutorial.component.scss +++ b/src/app/components/tutorial/tutorial.component.scss @@ -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; } } \ No newline at end of file diff --git a/src/app/components/tutorial/tutorial.component.ts b/src/app/components/tutorial/tutorial.component.ts index 6d5e5ff5..b8fa998a 100644 --- a/src/app/components/tutorial/tutorial.component.ts +++ b/src/app/components/tutorial/tutorial.component.ts @@ -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; + @Select(state => state.registeredaccounts.accounts) accounts$: Observable; + 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(); + } } From 00a42c2092dc4177cb26e376b423434b5b32f16c Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 22:42:51 -0500 Subject: [PATCH 06/30] added arrows to tutorial --- .../components/tutorial/tutorial.component.html | 6 ++++-- .../components/tutorial/tutorial.component.scss | 12 ++++++++---- src/assets/img/arrow_1.png | Bin 0 -> 3000 bytes src/assets/img/arrow_2.png | Bin 0 -> 2197 bytes 4 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 src/assets/img/arrow_1.png create mode 100644 src/assets/img/arrow_2.png diff --git a/src/app/components/tutorial/tutorial.component.html b/src/app/components/tutorial/tutorial.component.html index 41292be0..6d5b6927 100644 --- a/src/app/components/tutorial/tutorial.component.html +++ b/src/app/components/tutorial/tutorial.component.html @@ -1,13 +1,15 @@