Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
mirror of https://github.com/NicolasConstant/sengi synced 2025-02-03 03:47:35 +01:00
Code Issues Releases Wiki Activity

better display of scheduled statuses

Browse Source
This commit is contained in:
Nicolas Constant 2019-09-06 20:35:42 -04:00
parent 8ae06f1439
commit f96309ed01
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 70 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.html
View File

@ -1,5 +1,5 @@
<div class="scheduled-status">
<div>
<div class="scheduled-status__date">
{{ status.scheduled_at | date: 'MMM d, y, h:mm a' }}
</div>
@ -9,15 +9,18 @@
</div>
<div class="scheduled-status__content">
<div class="scheduled-status__content--text scheduled-status__content--spoiler"
*ngIf="status.params.spoiler_text">
spoiler text: {{ status.params.spoiler_text }}
*ngIf="status.params.spoiler_text" title="spoiler">
{{ status.params.spoiler_text }}
</div>
<div class="scheduled-status__content--text">
<div class="scheduled-status__content--text" title="status text">
{{ status.params.text }}
</div>
</div>
<div class="scheduled-status__edition">
<button class="scheduled-status__edition--button" title="delete status">Delete</button>
<button class="scheduled-status__edition--button" title="reschedule status">Reschedule</button>
</div>
</div>

25
src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.scss
View File

@ -1,8 +1,14 @@
@import "mixins";
$avatar-size: 40px;
.scheduled-status {
padding: 0 5px 10px 5px;
margin: 0 5px;
padding: 5px 5px 5px 5px;
&__date {
margin-bottom: 1px;
}
&__avatar {
float: left;
@ -25,4 +31,21 @@ $avatar-size: 40px;
}
}
&__edition {
@include clearfix;
&--button {
@include clearButton;
transition: all .2s;
float: right;
margin: 5px 0 5px 5px;
padding: 5px 10px;
background-color: #273047;
&:hover {
background-color: #3b4769;
}
}
}
}

6
src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.html
View File

@ -2,10 +2,8 @@
<h3 class="panel__title">Scheduled Statuses</h3>
<div class="scheduled-statuses-display flexcroll">
<div *ngFor="let n of scheduledStatuses">
<div *ngFor="let s of n.statuses">
<app-scheduled-status [account]="n.account" [status]="s" ></app-scheduled-status>
</div>
<div *ngFor="let n of scheduledStatuses" class="scheduled-status">
<app-scheduled-status [account]="n.account" [status]="n.status"></app-scheduled-status>
</div>
</div>
</div>

16
src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.scss
View File

@ -2,8 +2,22 @@
@import "panel";
@import "commons";
.panel {
padding-left: 0px;
padding-right: 0px;
}
.scheduled-statuses-display {
overflow: auto;
height: calc(100%);
// height: calc(100%);
height: calc(100% - 40px);
}
.scheduled-status {
display: block;
// outline: 1px dotted salmon;
&:not(:last-child) {
border-bottom: 1px solid #141824;
}
}

24
src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.ts
View File

@ -2,6 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { ScheduledStatusService, ScheduledStatusNotification } from '../../../services/scheduled-status.service';
import { ScheduledStatus } from '../../../services/models/mastodon.interfaces';
import { AccountInfo } from '../../../states/accounts.state';
@Component({
selector: 'app-scheduled-statuses',
@ -10,7 +12,8 @@ import { ScheduledStatusService, ScheduledStatusNotification } from '../../../se
})
export class ScheduledStatusesComponent implements OnInit, OnDestroy {
private statusSub: Subscription;
scheduledStatuses: ScheduledStatusNotification[] = [];
// scheduledStatuses: ScheduledStatusNotification[] = [];
scheduledStatuses: ScheduledStatusWrapper[] = [];
constructor(
private readonly scheduledStatusService: ScheduledStatusService) {
@ -18,8 +21,16 @@ export class ScheduledStatusesComponent implements OnInit, OnDestroy {
ngOnInit() {
this.statusSub = this.scheduledStatusService.scheduledStatuses.subscribe((value: ScheduledStatusNotification[]) => {
console.warn(value);
this.scheduledStatuses = value;
this.scheduledStatuses.length = 0;
value.forEach(notification => {
notification.statuses.forEach(status => {
let wrapper = new ScheduledStatusWrapper(notification.account, status);
this.scheduledStatuses.push(wrapper);
});
});
this.scheduledStatuses.sort((x, y) => new Date(x.status.scheduled_at).getTime() -new Date(y.status.scheduled_at).getTime());
});
}
@ -27,3 +38,10 @@ export class ScheduledStatusesComponent implements OnInit, OnDestroy {
if (this.statusSub) this.statusSub.unsubscribe();
}
}
class ScheduledStatusWrapper {
constructor(
public readonly account: AccountInfo,
public status: ScheduledStatus) {
}
}