From fed953301523c0b409404935667b3d036779c70c Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Mon, 28 Jan 2019 00:46:37 -0500 Subject: [PATCH 01/16] display column names in footer --- .../manage-account.component.ts | 37 ++++++++++--------- .../stream/hashtag/hashtag.component.ts | 2 +- .../stream-overlay.component.ts | 2 +- .../streams-selection-footer.component.html | 2 +- src/app/states/streams.state.ts | 3 +- 5 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts index 8de226e9..22ff8ace 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.ts +++ b/src/app/components/floating-column/manage-account/manage-account.component.ts @@ -5,28 +5,29 @@ import { AccountsStateModel, AccountInfo } from '../../../states/accounts.state' import { AccountWrapper } from '../../../models/account.models'; @Component({ - selector: 'app-manage-account', - templateUrl: './manage-account.component.html', - styleUrls: ['./manage-account.component.scss'] + selector: 'app-manage-account', + templateUrl: './manage-account.component.html', + styleUrls: ['./manage-account.component.scss'] }) export class ManageAccountComponent implements OnInit { - @Input() account: AccountWrapper; + @Input() account: AccountWrapper; - availableStreams: StreamElement[] = []; + availableStreams: StreamElement[] = []; - constructor(private readonly store: Store) { } + constructor(private readonly store: Store) { } - ngOnInit() { - this.availableStreams.length = 0; - this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.account.info.id, null, null)); - this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null)); - this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.account.info.id, null, null)); - } - - addStream(stream: StreamElement): boolean { - if (stream) { - this.store.dispatch([new AddStream(stream)]); + ngOnInit() { + const instance = this.account.info.instance; + this.availableStreams.length = 0; + this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, `federate@${instance}`)); + this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, `local@${instance}`)); + this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, `home@${instance}`)); + } + + addStream(stream: StreamElement): boolean { + if (stream) { + this.store.dispatch([new AddStream(stream)]); + } + return false; } - return false; - } } diff --git a/src/app/components/stream/hashtag/hashtag.component.ts b/src/app/components/stream/hashtag/hashtag.component.ts index d6273593..b2d05308 100644 --- a/src/app/components/stream/hashtag/hashtag.component.ts +++ b/src/app/components/stream/hashtag/hashtag.component.ts @@ -33,7 +33,7 @@ export class HashtagComponent implements OnInit { event.stopPropagation(); const hashtag = this.hashtagElement.tag; - const newStream = new StreamElement(StreamTypeEnum.tag, `#${hashtag}`, this.hashtagElement.accountId, hashtag, null); + const newStream = new StreamElement(StreamTypeEnum.tag, `#${hashtag}`, this.hashtagElement.accountId, hashtag, null, this.hashtagElement.displayableFullName); this.store.dispatch([new AddStream(newStream)]); 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 f7eeafcc..6dcdcd9d 100644 --- a/src/app/components/stream/stream-overlay/stream-overlay.component.ts +++ b/src/app/components/stream/stream-overlay/stream-overlay.component.ts @@ -116,7 +116,7 @@ export class StreamOverlayComponent implements OnInit { } const selectedAccount = this.toolsService.getSelectedAccounts()[0]; - const hashTagElement = new StreamElement(StreamTypeEnum.tag, hashtag, selectedAccount.id, hashtag, null); + const hashTagElement = new StreamElement(StreamTypeEnum.tag, hashtag, selectedAccount.id, hashtag, null, `#${hashtag}@${selectedAccount.instance}`); const newElement = new OverlayBrowsing(hashTagElement, null, null); this.loadElement(newElement); this.canGoForward = false; diff --git a/src/app/components/streams-selection-footer/streams-selection-footer.component.html b/src/app/components/streams-selection-footer/streams-selection-footer.component.html index 087f14bb..7f87690d 100644 --- a/src/app/components/streams-selection-footer/streams-selection-footer.component.html +++ b/src/app/components/streams-selection-footer/streams-selection-footer.component.html @@ -1,5 +1,5 @@
- +
\ No newline at end of file diff --git a/src/app/states/streams.state.ts b/src/app/states/streams.state.ts index 005542a7..8b2ee20b 100644 --- a/src/app/states/streams.state.ts +++ b/src/app/states/streams.state.ts @@ -31,7 +31,8 @@ export class StreamElement { public name: string, public accountId: string, public tag: string, - public list: string) { + public list: string, + public displayableFullName: string) { } } From fb2711cfed2639a596826eea61bd626480343724 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Mon, 28 Jan 2019 01:10:18 -0500 Subject: [PATCH 02/16] better display of the column header --- .../components/stream/stream.component.html | 2 +- .../components/stream/stream.component.scss | 23 ++++++++++++------- src/sass/_variables.scss | 3 ++- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html index c47d64f2..55a58718 100644 --- a/src/app/components/stream/stream.component.html +++ b/src/app/components/stream/stream.component.html @@ -7,7 +7,7 @@ [browseThreadData]="overlayThreadToBrowse">
- +

{{ streamElement.name.toUpperCase() }}
diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss index ae66203e..03ba4536 100644 --- a/src/app/components/stream/stream.component.scss +++ b/src/app/components/stream/stream.component.scss @@ -1,30 +1,39 @@ @import "variables"; @import "commons"; +$stream-header-height: 40px; .stream-column { position: relative; - width: $stream-column-width; height: calc(100%); background-color: $column-color; margin: 0 0 0 $stream-column-separator; - &__stream-header { + &__stream-header { + border-bottom: 1px solid #222736; + } + + &__stream-selector { + display: block; width: calc(100%); - height: 30px; + height: $stream-header-height; background-color: $column-header-background-color; - border-bottom: 1px solid black; + + &:hover { + text-decoration: none; + } + & h1 { color: whitesmoke; font-size: 0.8em; font-weight: normal; margin: 0; - padding: 8px 0 0 10px; + padding: 13px 0 0 10px; } } } .stream-statuses { display: block; - height: calc(100% - 30px); + height: calc(100% - #{$stream-header-height}); width: 320px; } @@ -37,10 +46,8 @@ // border-width: 0 0 1px 0; // } // } - .stream-overlay { position: absolute; - z-index: 50; width: $stream-column-width; height: calc(100%); diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index d5c27427..554dd601 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -6,7 +6,7 @@ $color-primary: #141824; $color-secondary: #090b10; $column-color: #0f111a; -$column-header-background-color: black; +$column-header-background-color: #0c0c10; @@ -32,6 +32,7 @@ $stream-selector-height: 30px; $stream-column-separator: 7px; $stream-column-width: 320px; $avatar-column-space: 70px; + //Bootstrap cuistomization $enable-rounded: false; From 75a1c96c1d7c1e2cf108fb22283a0280c9d024e6 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Mon, 28 Jan 2019 01:28:17 -0500 Subject: [PATCH 03/16] click on status time will open original url --- .../components/stream/status/status.component.html | 14 +++++++++----- .../components/stream/status/status.component.scss | 12 ++++++++++-- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html index 9161e98c..82177e44 100644 --- a/src/app/components/stream/status/status.component.html +++ b/src/app/components/stream/status/status.component.html @@ -1,6 +1,6 @@
- {{ status.account.display_name }} boosted + {{ status.account.display_name }} boosted
@@ -12,11 +12,15 @@ class="status__name--username">{{displayedStatus.account.acct}} -
{{ - status.created_at | timeAgo | async }}
+
+ + {{ status.created_at | timeAgo | async }} + +
- + diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss index 6fd305fa..efa40fcd 100644 --- a/src/app/components/stream/status/status.component.scss +++ b/src/app/components/stream/status/status.component.scss @@ -83,11 +83,19 @@ // margin: 0 !important; // font-size: 0.85em; // } - &__created-at { - color: $status-secondary-color; + &__created-at { position: absolute; top: 7px; right: 5px; + + &--link { + color: $status-secondary-color; + text-decoration: none; + + &:hover { + color: lighten($status-secondary-color, 20); + } + } } } From 46e0d4e1b583de1337748c8b1366c6e50d521a55 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Mon, 28 Jan 2019 21:29:13 -0500 Subject: [PATCH 04/16] added support to fontawesome --- package-lock.json | 45 +++++++++++++++++++ package.json | 5 +++ src/app/app.module.ts | 3 ++ .../components/stream/stream.component.html | 11 +++-- src/app/components/stream/stream.component.ts | 3 ++ 5 files changed, 61 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index f253d328..9ad3bd39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -647,6 +647,51 @@ "tslib": "^1.9.0" } }, + "@fortawesome/angular-fontawesome": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.3.0.tgz", + "integrity": "sha512-wXvyPI7GidoNiqeMz2re9iemUMFH4zBmuv94CfXlaanQ8+kMP/fYs/k69PLVN1KsebQY4kRA9GHmc1U1ndBkJg==", + "requires": { + "tslib": "^1.9.0" + } + }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.13.tgz", + "integrity": "sha512-Qy1eMKylnbsCRXod8C4CfwqlNtLU7OkJiLsFJZlHY4rY9ky2VYUKNnRj0b+3lnGwA1dWNY+pI0XWbP/mrLCohw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.13.tgz", + "integrity": "sha512-1Q0grmELVTBDbk/Jo4dRCptkYMQjikPEcoPo+eZS+oLVowv1afP4177m4gvqMwdk3l+9KYoiMBJzfY2qDbs+Dg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.13" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.7.0.tgz", + "integrity": "sha512-MA4FLVKfuamBlfkRznoAOHyCywGj0MToDyomvtpuJeB9BqNBPDQ/TpGTyRZ8TEyHqo8ejjjACXYjr2fIEB7FZA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.13" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.7.0.tgz", + "integrity": "sha512-q6u0JTCr8T8RDRYytVcPg/RvPXv67fVcxSa/pdF59OAF5scM03QakX+W+x0vuaWvrpUwU0VK2AXJzSYnBUNpJA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.13" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.0.tgz", + "integrity": "sha512-bWHNC9Mho8gJ/MFmnc+u6af0jXtdgNWdL6mxHE2lrPsSUGTBCr7AcYeTf+f0Q7JZDjIy/kW8FKpHcfuesScK5A==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.13" + } + }, "@ngtools/webpack": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.1.1.tgz", diff --git a/package.json b/package.json index aad4eab5..7983eaf2 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,11 @@ "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", + "@fortawesome/angular-fontawesome": "^0.3.0", + "@fortawesome/fontawesome-svg-core": "^1.2.13", + "@fortawesome/free-brands-svg-icons": "^5.7.0", + "@fortawesome/free-regular-svg-icons": "^5.7.0", + "@fortawesome/free-solid-svg-icons": "^5.7.0", "@ngxs/storage-plugin": "^3.2.0", "@ngxs/store": "^3.2.0", "bootstrap": "^4.1.3", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a58959f7..1246ddf8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,8 @@ import { NgxElectronModule } from "ngx-electron"; import { NgxsModule } from '@ngxs/store'; import { NgxsStoragePluginModule } from '@ngxs/storage-plugin'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + import { AppComponent } from "./app.component"; import { LeftSideBarComponent } from "./components/left-side-bar/left-side-bar.component"; import { StreamsMainDisplayComponent } from "./pages/streams-main-display/streams-main-display.component"; @@ -79,6 +81,7 @@ const routes: Routes = [ StreamStatusesComponent ], imports: [ + FontAwesomeModule, BrowserModule, HttpModule, HttpClientModule, diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html index 55a58718..a6569a37 100644 --- a/src/app/components/stream/stream.component.html +++ b/src/app/components/stream/stream.component.html @@ -1,17 +1,16 @@
- +
+

{{ streamElement.name.toUpperCase() }}
- + + + +
\ No newline at end of file diff --git a/src/app/components/floating-column/manage-account/manage-account.component.scss b/src/app/components/floating-column/manage-account/manage-account.component.scss index 2ce018d1..c31c4d31 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.scss +++ b/src/app/components/floating-column/manage-account/manage-account.component.scss @@ -20,25 +20,48 @@ } } -.add-column { +.account { &__label { // text-decoration: underline; font-size: $small-font-size; margin-left: 5px; color: $font-color-secondary; } + &__margin-top { + margin-top: 25px; + } &__link { text-decoration: none; display: block; // width: calc(100% - 20px); width: 100%; // height: 30px; padding: 5px 10px; // border: solid 1px black; - background-color: $color-primary; - color: #fff; &:not(:last-child) { margin-bottom: 5px; } + } + &__mid-link { + text-decoration: none; + display: block; // width: calc(100% - 20px); + width: 45%; // height: 30px; + padding: 5px 10px; // border: solid 1px black; + &:not(:last-child) { + margin-bottom: 5px; + } + } + &__blue { + background-color: $color-primary; + color: #fff; &:hover { background-color: lighten($color-primary, 15); } } + + &__red { + $red-button-color: rgb(65, 3, 3); + background-color: $red-button-color; + color: #fff; + &:hover { + background-color: lighten($red-button-color, 15); + } + } } \ No newline at end of file diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts index 22ff8ace..a64f2a6a 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.ts +++ b/src/app/components/floating-column/manage-account/manage-account.component.ts @@ -30,4 +30,9 @@ export class ManageAccountComponent implements OnInit { } return false; } + + removeAccount(): boolean { + + return false; + } } From ed0d7c57c831a71c2f97b4646b75188ee49e48ee Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Tue, 29 Jan 2019 22:50:25 -0500 Subject: [PATCH 10/16] added ability to remove column --- .../stream/stream-edition/stream-edition.component.ts | 9 +++++++-- src/app/components/stream/stream.component.html | 3 ++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts index 1d29cc06..83ef305b 100644 --- a/src/app/components/stream/stream-edition/stream-edition.component.ts +++ b/src/app/components/stream/stream-edition/stream-edition.component.ts @@ -1,4 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { Store } from '@ngxs/store'; + +import { StreamElement, RemoveStream } from '../../../states/streams.state'; @Component({ selector: 'app-stream-edition', @@ -6,8 +9,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./stream-edition.component.scss'] }) export class StreamEditionComponent implements OnInit { + @Input() streamElement: StreamElement; - constructor() { } + constructor(private readonly store: Store) { } ngOnInit() { } @@ -24,6 +28,7 @@ export class StreamEditionComponent implements OnInit { delete(): boolean { console.log('delete'); + this.store.dispatch([new RemoveStream(this.streamElement.id)]); return false; } } diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html index 3f6268f8..8cb5b6f1 100644 --- a/src/app/components/stream/stream.component.html +++ b/src/app/components/stream/stream.component.html @@ -13,7 +13,8 @@
- + From 15ad95615b384518e7b06a17166f5f36a2c3c705 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Tue, 29 Jan 2019 23:35:44 -0500 Subject: [PATCH 11/16] fix hashtag column name --- src/app/components/stream/hashtag/hashtag.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/stream/hashtag/hashtag.component.ts b/src/app/components/stream/hashtag/hashtag.component.ts index b2d05308..7760d2a0 100644 --- a/src/app/components/stream/hashtag/hashtag.component.ts +++ b/src/app/components/stream/hashtag/hashtag.component.ts @@ -33,7 +33,7 @@ export class HashtagComponent implements OnInit { event.stopPropagation(); const hashtag = this.hashtagElement.tag; - const newStream = new StreamElement(StreamTypeEnum.tag, `#${hashtag}`, this.hashtagElement.accountId, hashtag, null, this.hashtagElement.displayableFullName); + const newStream = new StreamElement(StreamTypeEnum.tag, `${hashtag}`, this.hashtagElement.accountId, hashtag, null, this.hashtagElement.displayableFullName); this.store.dispatch([new AddStream(newStream)]); return false; From a69a39e666268417ebcf0315392db59730efa94a Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Tue, 29 Jan 2019 23:36:05 -0500 Subject: [PATCH 12/16] added moving column capability --- .../stream-edition.component.ts | 7 ++-- src/app/states/streams.state.ts | 38 +++++++++++++++++++ 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts index 83ef305b..2982ce95 100644 --- a/src/app/components/stream/stream-edition/stream-edition.component.ts +++ b/src/app/components/stream/stream-edition/stream-edition.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Input } from '@angular/core'; import { Store } from '@ngxs/store'; -import { StreamElement, RemoveStream } from '../../../states/streams.state'; +import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../../../states/streams.state'; @Component({ selector: 'app-stream-edition', @@ -17,17 +17,16 @@ export class StreamEditionComponent implements OnInit { } moveLeft(): boolean { - console.log('move left'); + this.store.dispatch([new MoveStreamUp(this.streamElement.id)]); return false; } moveRight(): boolean { - console.log('move right'); + this.store.dispatch([new MoveStreamDown(this.streamElement.id)]); return false; } delete(): boolean { - console.log('delete'); this.store.dispatch([new RemoveStream(this.streamElement.id)]); return false; } diff --git a/src/app/states/streams.state.ts b/src/app/states/streams.state.ts index 517b10da..4511ba8a 100644 --- a/src/app/states/streams.state.ts +++ b/src/app/states/streams.state.ts @@ -15,6 +15,16 @@ export class RemoveStream { constructor(public streamId :string) {} } +export class MoveStreamUp { + static readonly type = '[Streams] Move stream up'; + constructor(public streamId :string) {} +} + +export class MoveStreamDown { + static readonly type = '[Streams] Move stream down'; + constructor(public streamId :string) {} +} + export interface StreamsStateModel { streams: StreamElement[]; } @@ -49,6 +59,34 @@ export class StreamsState { streams: [...filteredStreams] }); } + @Action(MoveStreamUp) + MoveStreamUp(ctx: StateContext, action: MoveStreamUp){ + const state = ctx.getState(); + const sourceIndex = state.streams.findIndex(x => x.id === action.streamId); + if(sourceIndex === 0) return; + + let streamsCopy = [...state.streams]; + streamsCopy[sourceIndex - 1] = state.streams[sourceIndex]; + streamsCopy[sourceIndex] = state.streams[sourceIndex - 1]; + + ctx.patchState({ + streams: streamsCopy + }); + } + @Action(MoveStreamDown) + MoveStreamDown(ctx: StateContext, action: MoveStreamDown){ + const state = ctx.getState(); + const sourceIndex = state.streams.findIndex(x => x.id === action.streamId); + if(sourceIndex === state.streams.length - 1) return; + + let streamsCopy = [...state.streams]; + streamsCopy[sourceIndex + 1] = state.streams[sourceIndex]; + streamsCopy[sourceIndex] = state.streams[sourceIndex + 1]; + + ctx.patchState({ + streams: streamsCopy + }); + } } export class StreamElement { From 759b7c3ee95e073a881143402761320a143583d2 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 31 Jan 2019 01:01:48 -0500 Subject: [PATCH 13/16] removing account functionnal --- .../manage-account/manage-account.component.ts | 13 +++++++++---- .../left-side-bar/left-side-bar.component.ts | 11 ++++++----- src/app/states/accounts.state.ts | 14 ++++++++++++++ 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts index a64f2a6a..dcbb2c92 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.ts +++ b/src/app/components/floating-column/manage-account/manage-account.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit, Input } from '@angular/core'; -import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/streams.state'; +import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state'; import { Store } from '@ngxs/store'; -import { AccountsStateModel, AccountInfo } from '../../../states/accounts.state'; +import { AccountsStateModel, AccountInfo, RemoveAccount } from '../../../states/accounts.state'; import { AccountWrapper } from '../../../models/account.models'; +import { NavigationService } from '../../../services/navigation.service'; @Component({ selector: 'app-manage-account', @@ -14,7 +15,9 @@ export class ManageAccountComponent implements OnInit { availableStreams: StreamElement[] = []; - constructor(private readonly store: Store) { } + constructor( + private readonly store: Store, + private readonly navigationService: NavigationService) { } ngOnInit() { const instance = this.account.info.instance; @@ -32,7 +35,9 @@ export class ManageAccountComponent implements OnInit { } removeAccount(): boolean { - + const accountId = this.account.info.id; + this.store.dispatch([new RemoveAllStreams(accountId), new RemoveAccount(accountId)]); + this.navigationService.closePanel(); return false; } } 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 01b2b7a7..5e356da5 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 @@ -33,7 +33,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy { ngOnInit() { this.accounts$.subscribe((accounts: AccountInfo[]) => { if (accounts) { - + //Update and Add for (let acc of accounts) { const previousAcc = this.accounts.find(x => x.info.id === acc.id) if (previousAcc) { @@ -41,7 +41,6 @@ export class LeftSideBarComponent implements OnInit, OnDestroy { } else { const accWrapper = new AccountWrapper(); accWrapper.info = acc; - this.accounts.push(accWrapper); this.mastodonService.retrieveAccountDetails(acc) @@ -49,10 +48,12 @@ export class LeftSideBarComponent implements OnInit, OnDestroy { accWrapper.avatar = result.avatar; }); } + } - //TODO: see when deleted - - + //Delete + const deletedAccounts = this.accounts.filter(x => accounts.findIndex(y => y.id === x.info.id) === -1); + for(let delAcc of deletedAccounts){ + this.accounts = this.accounts.filter(x => x.info.id !== delAcc.info.id); } } }); diff --git a/src/app/states/accounts.state.ts b/src/app/states/accounts.state.ts index 30b49693..1c5f6e0f 100644 --- a/src/app/states/accounts.state.ts +++ b/src/app/states/accounts.state.ts @@ -11,6 +11,11 @@ export class SelectAccount { constructor(public account: AccountInfo, public multiselection: boolean = false) {} } +export class RemoveAccount { + static readonly type = '[Accounts] Remove account'; + constructor(public accountId: string) {} +} + export interface AccountsStateModel { accounts: AccountInfo[]; } @@ -51,6 +56,15 @@ export class AccountsState { accounts: copyAccounts }); } + + @Action(RemoveAccount) + RemoveAccount(ctx: StateContext, action: RemoveAccount){ + const state = ctx.getState(); + const filteredAccounts = state.accounts.filter(x => x.id !== action.accountId); + ctx.patchState({ + accounts: filteredAccounts + }); + } } export class AccountInfo { From db68131693f9c2627aea85c93626c3fcdc92d7b1 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 17:29:38 -0500 Subject: [PATCH 14/16] launch ng serve for npm start --- package.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 7983eaf2..4b789d79 100644 --- a/package.json +++ b/package.json @@ -5,15 +5,14 @@ "main": "main.js", "scripts": { "ng": "ng", - "start": "ng build && electron .", - "serve": "ng serve", + "start": "ng serve", "build": "ng build --prod", "test": "ng test", "test-nowatch": "ng test --watch=false", "lint": "ng lint", "e2e": "ng e2e", - "electron": "ng build && electron .", - "electron-prod": "ng build --prod && electron ." + "electron": "ng build --prod && electron .", + "electron-debug": "ng build && electron ." }, "private": true, "dependencies": { From b917e30591fb05b6a2b5937e9d13ec080938acc0 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 17:40:43 -0500 Subject: [PATCH 15/16] Fix #28 --- .../streams-main-display/streams-main-display.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/streams-main-display/streams-main-display.component.ts b/src/app/pages/streams-main-display/streams-main-display.component.ts index de1b8287..a1a724e7 100644 --- a/src/app/pages/streams-main-display/streams-main-display.component.ts +++ b/src/app/pages/streams-main-display/streams-main-display.component.ts @@ -33,7 +33,7 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy { private focusOnColumn(columnIndex: number): void { if (columnIndex > -1) { setTimeout(() => { - this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' }); + this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); }); } } From 52e9a14f12d953b4b70c268d28268143d3d73c85 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Sun, 10 Feb 2019 18:05:07 -0500 Subject: [PATCH 16/16] better design for the column editions --- .../stream-edition.component.html | 6 +++--- .../stream-edition.component.scss | 18 +++++++++++++++++- .../stream-edition/stream-edition.component.ts | 5 +++++ .../components/stream/stream.component.scss | 2 +- src/sass/_mixins.scss | 10 ++++++++++ 5 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html index b98819cd..b736e313 100644 --- a/src/app/components/stream/stream-edition/stream-edition.component.html +++ b/src/app/components/stream/stream-edition/stream-edition.component.html @@ -1,5 +1,5 @@
- - - + + +
\ No newline at end of file diff --git a/src/app/components/stream/stream-edition/stream-edition.component.scss b/src/app/components/stream/stream-edition/stream-edition.component.scss index 7e0f4b27..2a8d451c 100644 --- a/src/app/components/stream/stream-edition/stream-edition.component.scss +++ b/src/app/components/stream/stream-edition/stream-edition.component.scss @@ -1,5 +1,21 @@ +@import "variables"; +@import "mixins"; + .stream-edition { width: 100%; - min-height: 50px; + // min-height: 50px; background-color: #222736; + &__button { + @include clearButton; + padding: 5px 10px 5px 10px; + margin: 3px 0; + &--delete{ + float: right; + margin-right: 5px; + } + + &:hover { + color: darken($font-color-primary, 20); + } + } } \ No newline at end of file diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts index 2982ce95..65f4aad0 100644 --- a/src/app/components/stream/stream-edition/stream-edition.component.ts +++ b/src/app/components/stream/stream-edition/stream-edition.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; import { Store } from '@ngxs/store'; +import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons"; import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../../../states/streams.state'; @@ -9,6 +10,10 @@ import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../.. styleUrls: ['./stream-edition.component.scss'] }) export class StreamEditionComponent implements OnInit { + faChevronLeft = faChevronLeft; + faChevronRight = faChevronRight; + faTimes = faTimes; + @Input() streamElement: StreamElement; constructor(private readonly store: Store) { } diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss index 94f70678..8b107cac 100644 --- a/src/app/components/stream/stream.component.scss +++ b/src/app/components/stream/stream.component.scss @@ -72,7 +72,7 @@ $stream-header-height: 40px; // } .stream-overlay { position: absolute; - z-index: 50; + z-index: 100; width: $stream-column-width; height: calc(100%); } \ No newline at end of file diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss index fb6ba491..39bb90e3 100644 --- a/src/sass/_mixins.scss +++ b/src/sass/_mixins.scss @@ -4,4 +4,14 @@ display: table; clear: both; } +} + +@mixin clearButton { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; } \ No newline at end of file