first iteration of CW support

This commit is contained in:
Nicolas Constant 2019-02-24 14:34:15 -05:00
parent 7794d88828
commit 979e9c1caf
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 55 additions and 11 deletions

View File

@ -31,12 +31,16 @@
</div>
<!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
<app-databinded-text class="status__content" [text]="displayedStatus.content"
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
<a href class="status__content-warning" *ngIf="isContentWarned" title="show content" (click)="removeContentWarning()">
<span class="status__content-warning--title">sensitive content</span>
{{ contentWarningText }}
</a>
<app-databinded-text class="status__content" *ngIf="!isContentWarned"
[text]="displayedStatus.content"
(accountSelected)="accountSelected($event)"
(hashtagSelected)="hashtagSelected($event)"
(textSelected)="textSelected()"></app-databinded-text>
<app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments">
<app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments">
</app-attachements>
<app-action-bar [statusWrapper]="statusWrapper" (replyEvent)="openReply()"></app-action-bar>

View File

@ -53,7 +53,6 @@
left: 10px;
width: 50px;
cursor: default;
&--label {
text-transform: uppercase;
text-align: center;
@ -99,14 +98,35 @@
}
}
&__content {
/*width: calc(100% - 50px);*/
word-wrap: break-word;
margin: 0 10px 0 $avatar-column-space;
display: block;
} // &__content p {
// margin: 0 !important;
// font-size: 0.85em;
// }
}
&__content-warning {
height: 80px;
display: block; // border: 1px solid greenyellow;
margin: 0 10px 0 $avatar-column-space;
padding: 3px 5px 0 5px;
background-color: $content-warning-background-color;
color: $content-warning-font-color;
border-radius: 3px;
text-decoration: none;
text-align: center;
position: relative;
font-size: 13px;
&--title {
// padding-top: 3px;
color: whitesmoke;
font-size: 11px;
//font-weight: bold;
// outline: 1px solid greenyellow;
display: block;
width: calc(100%);
text-align: center;
// position: absolute;
// bottom: 5px;
}
}
&__created-at {
position: absolute;
top: 7px;

View File

@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import { Status, Account } from "../../../services/models/mastodon.interfaces";
import { StatusWrapper } from "../stream.component";
import { OpenThreadEvent } from "../../../services/tools.service";
import { stat } from "fs";
@Component({
selector: "app-status",
@ -14,6 +15,8 @@ export class StatusComponent implements OnInit {
hasAttachments: boolean;
replyingToStatus: boolean;
isCrossPoster: boolean;
isContentWarned: boolean;
contentWarningText: string;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@ -27,6 +30,7 @@ export class StatusComponent implements OnInit {
this.status = value.status;
this.checkCrossPosting(this.status);
this.checkContentWarning(this.status);
if (this.status.reblog) {
this.reblog = true;
@ -52,6 +56,18 @@ export class StatusComponent implements OnInit {
ngOnInit() {
}
private checkContentWarning(status: Status) {
if(status.sensitive || status.spoiler_text){
this.isContentWarned = true;
this.contentWarningText = status.spoiler_text;
}
}
removeContentWarning(): boolean {
this.isContentWarned = false;
return false;
}
private checkCrossPosting(status: Status) {
//since API is limited with federated status...
if(status.uri.includes('birdsite.link')){

View File

@ -8,6 +8,10 @@ $color-secondary: #090b10;
$column-color: #0f111a;
$column-header-background-color: #0c0c10;
$content-warning-background-color: #0a0c13;
$content-warning-background-color: black;
$content-warning-font-color: $font-link-primary-hover;
$default-font-size: 15px;