starting integration of thread browsing
This commit is contained in:
parent
c7b256b16f
commit
98d6fd6963
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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-thread *ngIf="browseThread"></app-thread>
|
||||
<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>
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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> {
|
||||
|
|
Loading…
Reference in New Issue