first iteration of CW support

src/app/components/stream/status/status.component.html

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

src/app/components/stream/status/status.component.scss

@@ -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;
+    &__content-warning {
-    //     font-size: 0.85em;
+        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;

src/app/components/stream/status/status.component.ts

@@ -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')){

src/sass/_variables.scss

@@ -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;