Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #275 from NicolasConstant/topic_enhance-tl-listing

Browse Source 
Topic enhance tl listing
This commit is contained in:
Nicolas Constant 2020-05-01 03:10:13 -04:00 committed by GitHub
commit 3c8805b876
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/floating-column/manage-account/my-account/my-account.component.html
View File

@ -1,11 +1,16 @@
<div class="my-account__body flexcroll">
<h4 class="my-account__label">add timeline:</h4>
<a class="my-account__link my-account__link--margin-bottom my-account__blue" href
*ngFor="let stream of availableStreams" (click)="addStream(stream)"
title="{{ stream.isAdded ? '' : 'add timeline'}}" [class.my-account__link--disabled]="stream.isAdded">
{{ stream.name }} <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare">
</fa-icon>
</a>
<div class="my-account__link--margin-bottom" *ngFor="let stream of availableStreams">
<a href *ngIf="stream.isAdded" class="my-account__list--button" title="remove timeline" (click)="removeStream(stream)">
<fa-icon class="my-account__link--icon my-account__link--remove" [icon]="faTimes"></fa-icon>
</a>
<a href class="my-account__link my-account__link--margin-bottom my-account__blue" (click)="addStream(stream)"
title="{{ stream.isAdded ? '' : 'add timeline'}}"
[class.my-account__link--disabled]="stream.isAdded">
{{ stream.name }} <!-- <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare"> </fa-icon> -->
</a>
</div>
<h4 class="my-account__label my-account__margin-top">manage list:</h4>
<div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
@ -26,11 +31,12 @@
*ngIf="list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
</a>
<a href *ngIf="list.isAdded" class="my-account__list--button" title="remove list" (click)="removeStream(list)">
<fa-icon class="my-account__link--icon my-account__list--remove" [icon]="faTimes"></fa-icon>
</a>
<a class="my-account__link my-account__list my-account__blue" href (click)="addStream(list)"
title="{{ list.isAdded ? '' : 'add list'}}" [class.my-account__link--disabled]="list.isAdded">
{{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare">
</fa-icon>
title="{{ list.isAdded ? '' : 'add list'}}" [class.my-account__list--disabled]="list.isAdded">
{{ list.name }} <!--<fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare"> </fa-icon>-->
</a>
<app-list-editor *ngIf="list.editList" [list]="list" [account]="account"></app-list-editor>
@ -44,7 +50,9 @@
<h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
<div class="advanced-settings">
<input class="advanced-settings__checkbox" [(ngModel)]="avatarNotificationDisabled"
(change)="onDisableAvatarNotificationChanged()" type="checkbox" name="avatarNotification" value="avatarNotification" id="avatarNotification"> <label class="noselect advanced-settings__label" for="avatarNotification">disable avatar notifications</label><br>
(change)="onDisableAvatarNotificationChanged()" type="checkbox" name="avatarNotification"
value="avatarNotification" id="avatarNotification"> <label class="noselect advanced-settings__label"
for="avatarNotification">disable avatar notifications</label><br>
<input class="advanced-settings__checkbox" [(ngModel)]="customStatusLengthEnabled"
(change)="onCustomLengthEnabledChanged()" type="checkbox" name="customCharLength" value="customCharLength"
id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">custom char

33
src/app/components/floating-column/manage-account/my-account/my-account.component.scss
View File

@ -1,6 +1,10 @@
@import "variables";
@import "commons";
$list-width: 60px;
$button-width: $list-width/2;
.my-account {
transition: all .2s;
@ -50,10 +54,19 @@
float: right;
}
&--remove {
position: relative;
top: 1px;
right: 1px;
}
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
width: calc(100% - #{$button-width} - 1px);
//outline: 1px solid greenyellow;
&:hover {
background-color: darken($color-primary, 4);
}
@ -67,9 +80,27 @@
}
&__list {
$list-width: 60px;
width: calc(100% - #{$list-width} - 2px);
&--remove {
position: relative;
top: 0px;
right: 1px;
}
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
width: calc(100% - #{$button-width} * 3 - 3px);
//outline: 1px solid greenyellow;
&:hover {
background-color: darken($color-primary, 4);
}
}
&--button {
margin-left: 1px;
width: calc(#{$list-width}/2);

24
src/app/components/floating-column/manage-account/my-account/my-account.component.ts
View File

@ -104,18 +104,22 @@ export class MyAccountComponent implements OnInit, OnDestroy {
}
});
this.availableLists.length = 0;
// this.availableLists.length = 0;
this.mastodonService.getLists(account.info)
.then((streams: StreamElement[]) => {
this.availableLists.length = 0;
// this.availableLists.length = 0;
for (let stream of streams) {
let wrappedStream = new StreamWrapper(stream);
let wrappedStream = this.availableLists.find(x => x.id === stream.id);
if(!wrappedStream){
wrappedStream = new StreamWrapper(stream);
this.availableLists.push(wrappedStream);
}
if(loadedStreams.find(x => x.id == stream.id)){
wrappedStream.isAdded = true;
} else {
wrappedStream.isAdded = false;
}
this.availableLists.push(wrappedStream);
}
}
})
.catch(err => {
@ -133,6 +137,16 @@ export class MyAccountComponent implements OnInit, OnDestroy {
return false;
}
removeStream(stream: StreamWrapper): boolean {
if (stream && stream.isAdded) {
this.store.dispatch([new RemoveStream(stream.id)]).toPromise()
.then(() => {
stream.isAdded = false;
});
}
return false;
}
removeAccount(): boolean {
const accountId = this.account.info.id;
this.store.dispatch([new RemoveAllStreams(accountId), new RemoveAccount(accountId)]);