starting integration of thread browsing

This commit is contained in:
Nicolas Constant 2018-12-12 01:08:29 -05:00
parent c7b256b16f
commit 98d6fd6963
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
14 changed files with 106 additions and 77 deletions

View File

@ -1,5 +1,7 @@
<div class="floating-column">
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse" [browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
[browseAccountData]="overlayAccountToBrowse"
[browseHashtagData]="overlayHashtagToBrowse"></app-stream-overlay>
<div class="floating-column__header">
<a class="close-button" href (click)="closePanel()" title="close">x</a>
@ -8,6 +10,8 @@
<app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"></app-manage-account>
<app-add-new-status *ngIf="openPanel === 'createNewStatus'"></app-add-new-status>
<app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
<app-search *ngIf="openPanel === 'search'" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-search>
<app-search *ngIf="openPanel === 'search'"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"></app-search>
<app-settings *ngIf="openPanel === 'settings'"></app-settings>
</div>

View File

@ -12,7 +12,7 @@
<div *ngIf="accounts.length > 0" class="search-results">
<h3 class="search-results__title">Accounts</h3>
<a href *ngFor="let account of accounts" class="account" title="open account"
(click)="selectAccount(account.acct)">
(click)="browseAccount(account.acct)">
<img src="{{account.avatar}}" class="account__avatar" />
<div class="account__name">{{ account.username }}</div>
<div class="account__fullhandle">@{{ account.acct }}</div>
@ -21,7 +21,7 @@
<div *ngIf="hashtags.length > 0" class="search-results">
<h3 class="search-results__title">Hashtags</h3>
<a (click)="selectHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
<a (click)="browseHashtag(hashtag)" href *ngFor="let hashtag of hashtags" class="search-results__hashtag" title="browse hashtag">
#{{ hashtag }}
</a>
</div>
@ -30,7 +30,9 @@
<h3 class="search-results__title">Statuses</h3>
<div class="search-results__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>
<app-status [statusWrapper]="statusWrapper"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"></app-status>
</div>
</div>
</div>

View File

@ -23,12 +23,11 @@ export class SearchComponent implements OnInit {
isLoading: boolean;
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Output() browseThread = new EventEmitter<string>();
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Output() browseThreadEvent = new EventEmitter<string>();
constructor(
private readonly store: Store,
private readonly toolsService: ToolsService,
private readonly mastodonService: MastodonService) { }
@ -41,9 +40,9 @@ export class SearchComponent implements OnInit {
return false;
}
selectHashtag(hashtag: string): boolean {
browseHashtag(hashtag: string): boolean {
if (hashtag) {
this.browseHashtag.next(hashtag);
this.browseHashtagEvent.next(hashtag);
}
return false;
}
@ -57,10 +56,10 @@ export class SearchComponent implements OnInit {
// return false;
// }
selectAccount(accountName: string): boolean {
browseAccount(accountName: string): boolean {
console.warn(accountName);
if (accountName) {
this.browseAccount.next(accountName);
this.browseAccountEvent.next(accountName);
}
return false;
}
@ -97,9 +96,4 @@ export class SearchComponent implements OnInit {
.then(() => { this.isLoading = false; });
}
}
private getRegisteredAccounts(): AccountInfo[] {
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
return regAccounts;
}
}

View File

@ -6,6 +6,9 @@
<button class="btn-custom-secondary hashtag-header__add-column" (click)="addColumn($event)" title="add column to board">add column</button>
</a>
</div>
<app-stream-statuses class="hashtag-stream" *ngIf="hashtagElement" [streamElement]="hashtagElement" [goToTop]="goToTopSubject.asObservable()"
(browseAccount)="selectAccount($event)" (browseHashtag)="selectHashtag($event)"></app-stream-statuses>
<app-stream-statuses class="hashtag-stream" *ngIf="hashtagElement"
[streamElement]="hashtagElement"
[goToTop]="goToTopSubject.asObservable()"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"></app-stream-statuses>
</div>

View File

@ -10,8 +10,8 @@ import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/stream
styleUrls: ['./hashtag.component.scss']
})
export class HashtagComponent implements OnInit {
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Input() hashtagElement: StreamElement;
@ -38,11 +38,11 @@ export class HashtagComponent implements OnInit {
return false;
}
selectAccount(account: string) {
this.browseAccount.next(account);
browseAccount(account: string) {
this.browseAccountEvent.next(account);
}
selectHashtag(hashtag: string) {
this.browseHashtag.next(hashtag);
browseHashtag(hashtag: string) {
this.browseHashtagEvent.next(hashtag);
}
}

View File

@ -13,9 +13,9 @@ export class StatusComponent implements OnInit {
hasAttachments: boolean;
replyingToStatus: boolean;
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Output() browseThread = new EventEmitter<string>();
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Output() browseThreadEvent = new EventEmitter<string>();
private _statusWrapper: StatusWrapper;
status: Status;
@ -53,7 +53,7 @@ export class StatusComponent implements OnInit {
if(!accountName.includes('@'))
accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
this.browseAccount.next(accountName);
this.browseAccountEvent.next(accountName);
return false;
}
@ -69,16 +69,14 @@ export class StatusComponent implements OnInit {
}
accountSelected(accountName: string): void {
console.warn(`status comp: accountSelected ${accountName}`);
this.browseAccount.next(accountName);
this.browseAccountEvent.next(accountName);
}
hashtagSelected(hashtag: string): void {
console.warn(`status comp: hashtagSelected ${hashtag}`);
this.browseHashtag.next(hashtag);
this.browseHashtagEvent.next(hashtag);
}
textSelected(): void {
console.warn(`status comp: textSelected`);
this.browseThreadEvent.next(this._statusWrapper.status.uri);
}
}

View File

@ -5,11 +5,12 @@
<a href class="overlay-refresh" *ngIf="canRefresh" (click)="refresh()">REFRESH</a>
<a href class="overlay-next" *ngIf="canGoForward" (click)="next()">NEXT</a>
</div>
<!-- <div class="stream-overlay__title">
Account
</div> -->
<app-user-profile *ngIf="accountName" [currentAccount]="accountName" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-user-profile>
<app-hashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-hashtag>
<app-user-profile *ngIf="accountName" [currentAccount]="accountName"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"></app-user-profile>
<app-hashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"></app-hashtag>
<app-thread *ngIf="browseThread"></app-thread>
</div>

View File

@ -10,6 +10,7 @@ import { StreamElement, StreamTypeEnum } from '../../../states/streams.state';
styleUrls: ['./stream-overlay.component.scss']
})
export class StreamOverlayComponent implements OnInit {
private previousElements: OverlayBrowsing[] = [];
private nextElements: OverlayBrowsing[] = [];
private currentElement: OverlayBrowsing;
@ -24,21 +25,20 @@ export class StreamOverlayComponent implements OnInit {
@Output() closeOverlay = new EventEmitter();
@Input('browseAccount')
set browseAccount(accountName: string) {
this.accountSelected(accountName);
@Input('browseAccountData')
set browseAccountData(accountName: string) {
this.browseAccount(accountName);
// this.accountName = accountName;
}
@Input('browseThread')
set browseThread(thread: string) {
// this.thread = thread;
@Input('browseThreadData')
set browseThreadData(statusUri: string) {
this.browseThread(statusUri);
}
@Input('browseHashtag')
set browseHashtag(hashtag: string) {
this.hashtagSelected(hashtag);
// this.hashtag = hashtag;
@Input('browseHashtagData')
set browseHashtagData(hashtag: string) {
this.browseHashtag(hashtag);
}
constructor(private toolsService: ToolsService) { }
@ -93,7 +93,7 @@ export class StreamOverlayComponent implements OnInit {
return false;
}
accountSelected(accountName: string): void {
browseAccount(accountName: string): void {
if(!accountName) return;
console.log('accountSelected');
@ -106,7 +106,7 @@ export class StreamOverlayComponent implements OnInit {
this.canGoForward = false;
}
hashtagSelected(hashtag: string): void {
browseHashtag(hashtag: string): void {
if(!hashtag) return;
console.log('hashtagSelected');
@ -122,6 +122,20 @@ export class StreamOverlayComponent implements OnInit {
this.canGoForward = false;
}
browseThread(statusUri: string): any {
if(!statusUri) return;
console.log('thread selected')
this.nextElements.length = 0;
if (this.currentElement) {
this.previousElements.push(this.currentElement);
}
const newElement = new OverlayBrowsing(null, null, statusUri);
this.loadElement(newElement);
this.canGoForward = false;
}
private loadElement(element: OverlayBrowsing) {
this.currentElement = element;

View File

@ -1,6 +1,6 @@
<div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
<!-- data-simplebar -->
<div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-status>
<app-status [statusWrapper]="statusWrapper" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-status>
</div>
</div>

View File

@ -25,9 +25,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
private bufferStream: Status[] = [];
private bufferWasCleared: boolean;
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Output() browseThread = new EventEmitter<string>();
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Output() browseThreadEvent = new EventEmitter<string>();
@Input()
set streamElement(streamElement: StreamElement) {
@ -125,14 +125,16 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
}
}
accountSelected(accountName: string): void {
console.warn(`status comp: accountSelected ${accountName}`);
this.browseAccount.next(accountName);
browseAccount(accountName: string): void {
this.browseAccountEvent.next(accountName);
}
hashtagSelected(hashtag: string): void {
console.warn(`status comp: hashtagSelected ${hashtag}`);
this.browseHashtag.next(hashtag);
browseHashtag(hashtag: string): void {
this.browseHashtagEvent.next(hashtag);
}
browseThread(statusUri: string): void {
this.browseThreadEvent.next(statusUri);
}
textSelected(): void {

View File

@ -2,15 +2,16 @@
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive"
(closeOverlay)="closeOverlay()"
[browseAccount]="overlayAccountToBrowse"
[browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
[browseAccountData]="overlayAccountToBrowse"
[browseHashtagData]="overlayHashtagToBrowse"
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<div class="stream-column__stream-header">
<a href title="return to top" (click)="goToTop()">
<h1>{{ streamElement.name.toUpperCase() }}</h1>
</a>
</div>
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-stream-statuses>
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
<!-- <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
<div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>

View File

@ -14,6 +14,7 @@ export class StreamComponent implements OnInit {
overlayActive: boolean;
overlayAccountToBrowse: string;
overlayHashtagToBrowse: string;
overlayThreadToBrowse: string;
goToTopSubject: Subject<void> = new Subject<void>();
@ -32,22 +33,28 @@ export class StreamComponent implements OnInit {
browseAccount(account: string): void {
this.overlayAccountToBrowse = account;
this.overlayHashtagToBrowse = null;
this.overlayThreadToBrowse = null;
this.overlayActive = true;
}
browseHashtag(hashtag: string): void {
this.overlayAccountToBrowse = null;
this.overlayHashtagToBrowse = hashtag;
this.overlayThreadToBrowse = null;
this.overlayActive = true;
}
browseThread(thread: string): void {
console.warn('browseThread');
console.warn(thread);
browseThread(statusUri: string): void {
this.overlayAccountToBrowse = null;
this.overlayHashtagToBrowse = null;
this.overlayThreadToBrowse = statusUri;
this.overlayActive = true;
}
closeOverlay(): void {
this.overlayAccountToBrowse = null;
this.overlayHashtagToBrowse = null;
this.overlayThreadToBrowse = null;
this.overlayActive = false;
}
}

View File

@ -13,7 +13,8 @@
<div class="profile-sub-header flexcroll">
<div *ngIf="account && hasNote" class="profile-description">
<app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note"
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"></app-databinded-text>
(accountSelected)="browseAccount($event)"
(hashtagSelected)="browseHashtag($event)"></app-databinded-text>
<!-- <p innerHTML="{{account.note}}"></p> -->
</div>
<div class="profile-statuses">
@ -24,7 +25,9 @@
</div>
<div *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="accountSelected($event)"></app-status>
<app-status [statusWrapper]="statusWrapper"
(browseHashtagEvent)="browseHashtag($event)"
(browseAccountEvent)="browseAccount($event)"></app-status>
</div>
</div>
</div>

View File

@ -21,8 +21,8 @@ export class UserProfileComponent implements OnInit {
private accountName: string;
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Input('currentAccount')
//set currentAccount(account: Account) {
@ -51,12 +51,12 @@ export class UserProfileComponent implements OnInit {
ngOnInit() {
}
accountSelected(accountName: string): void {
this.browseAccount.next(accountName);
browseAccount(accountName: string): void {
this.browseAccountEvent.next(accountName);
}
hashtagSelected(hashtag: string): void {
this.browseHashtag.next(hashtag);
browseHashtag(hashtag: string): void {
this.browseHashtagEvent.next(hashtag);
}
private loadAccount(accountName: string): Promise<Account> {