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..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": { @@ -26,6 +25,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..601084fc 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"; @@ -42,6 +44,7 @@ import { StreamOverlayComponent } from './components/stream/stream-overlay/strea import { DatabindedTextComponent } from './components/stream/status/databinded-text/databinded-text.component'; 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'; const routes: Routes = [ { path: "", redirectTo: "home", pathMatch: "full" }, @@ -76,9 +79,11 @@ const routes: Routes = [ StreamOverlayComponent, DatabindedTextComponent, TimeAgoPipe, - StreamStatusesComponent + StreamStatusesComponent, + StreamEditionComponent ], imports: [ + FontAwesomeModule, BrowserModule, HttpModule, HttpClientModule, diff --git a/src/app/components/floating-column/manage-account/manage-account.component.html b/src/app/components/floating-column/manage-account/manage-account.component.html index 3b4a51ba..08674412 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.html +++ b/src/app/components/floating-column/manage-account/manage-account.component.html @@ -1,16 +1,16 @@
-

Manage Account

+

Manage Account

-
- -
+
+ +
-

add column:

+

add column:

- - {{ stream.name }} - - + +

remove account from sengi:

+ + Delete +
\ 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 8de226e9..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,32 +1,43 @@ 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', - 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, + private readonly navigationService: NavigationService) { } - 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; + } + + removeAccount(): boolean { + const accountId = this.account.info.id; + this.store.dispatch([new RemoveAllStreams(accountId), new RemoveAccount(accountId)]); + this.navigationService.closePanel(); + return false; } - 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/components/stream/hashtag/hashtag.component.ts b/src/app/components/stream/hashtag/hashtag.component.ts index d6273593..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); + 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/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); + } + } } } diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html new file mode 100644 index 00000000..b736e313 --- /dev/null +++ b/src/app/components/stream/stream-edition/stream-edition.component.html @@ -0,0 +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 new file mode 100644 index 00000000..2a8d451c --- /dev/null +++ b/src/app/components/stream/stream-edition/stream-edition.component.scss @@ -0,0 +1,21 @@ +@import "variables"; +@import "mixins"; + +.stream-edition { + width: 100%; + // 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.spec.ts b/src/app/components/stream/stream-edition/stream-edition.component.spec.ts new file mode 100644 index 00000000..54e63caf --- /dev/null +++ b/src/app/components/stream/stream-edition/stream-edition.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StreamEditionComponent } from './stream-edition.component'; + +xdescribe('StreamEditionComponent', () => { + let component: StreamEditionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ StreamEditionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StreamEditionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts new file mode 100644 index 00000000..65f4aad0 --- /dev/null +++ b/src/app/components/stream/stream-edition/stream-edition.component.ts @@ -0,0 +1,38 @@ +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'; + +@Component({ + selector: 'app-stream-edition', + templateUrl: './stream-edition.component.html', + styleUrls: ['./stream-edition.component.scss'] +}) +export class StreamEditionComponent implements OnInit { + faChevronLeft = faChevronLeft; + faChevronRight = faChevronRight; + faTimes = faTimes; + + @Input() streamElement: StreamElement; + + constructor(private readonly store: Store) { } + + ngOnInit() { + } + + moveLeft(): boolean { + this.store.dispatch([new MoveStreamUp(this.streamElement.id)]); + return false; + } + + moveRight(): boolean { + this.store.dispatch([new MoveStreamDown(this.streamElement.id)]); + return false; + } + + delete(): boolean { + this.store.dispatch([new RemoveStream(this.streamElement.id)]); + 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/stream/stream.component.html b/src/app/components/stream/stream.component.html index c47d64f2..8cb5b6f1 100644 --- a/src/app/components/stream/stream.component.html +++ b/src/app/components/stream/stream.component.html @@ -1,17 +1,23 @@
- +
- -

{{ streamElement.name.toUpperCase() }}

+ + + + + +

{{ streamElement.name.toUpperCase() }}
- + + + +