added disable/enable CW functionality #42

src/app/components/stream/status/action-bar/action-bar.component.html

@@ -4,18 +4,34 @@
     </a>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link" title="Boost" [class.boosted]="isBoosted" (click)="boost()">
+    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link" title="Boost" [class.boosted]="isBoosted"
+        (click)="boost()">
         <ion-icon name="md-swap"></ion-icon>
     </a>
-    <ion-icon *ngIf="isBoostLocked && !isLocked" class="action-bar__lock" name="lock" title="This post cannot be boosted"></ion-icon>
+    <ion-icon *ngIf="isBoostLocked && !isLocked" class="action-bar__lock" name="lock"
+        title="This post cannot be boosted"></ion-icon>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a *ngIf="!isLocked" href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited" (click)="favorite()">
+    <a *ngIf="!isLocked" href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited"
+        (click)="favorite()">
         <ion-icon name="md-star"></ion-icon>
     </a>
     <ion-icon *ngIf="isLocked" class="action-bar__lock" name="lock" title="Account can't access this post"></ion-icon>
 
-    <a href class="action-bar__link" title="More" (click)="more()">
-        <ion-icon name="ios-more"></ion-icon>
+    <a href class="action-bar__link action-bar__link--cw" 
+        title="show content" (click)="showContent()"
+        *ngIf="isContentWarningActive">
+        <fa-icon class="action-bar__cw" [icon]="faWindowClose"></fa-icon>
     </a>
+    <a href class="action-bar__link action-bar__link--cw"
+        title="hide content" (click)="hideContent()"
+        *ngIf="!isContentWarningActive">
+        <fa-icon class="action-bar__cw" [icon]="faWindowCloseRegular"></fa-icon>
+    </a>
+
+    <a href class="action-bar__link action-bar__link--more" title="More" (click)="more()">
+        <ion-icon name="ios-more"></ion-icon>
+    </a> 
+
+
 </div>

src/app/components/stream/status/action-bar/action-bar.component.scss

@@ -5,6 +5,8 @@
     padding: 0;
     font-size: 24px;
     height: 30px;
+    position: relative;
+
     &__link {
         color: $status-secondary-color;
         &:hover {
@@ -13,6 +15,18 @@
         &:not(:last-child) {
             margin-right: 15px;
         }
+
+        &--cw {
+            position: absolute;
+            bottom: -2px;
+            font-size: 22px;
+        }
+
+        &--more {
+            position: absolute;
+            left: 155px;
+            bottom: -6px;
+        }
     }
 
     &__lock {
@@ -23,6 +37,15 @@
             margin-right: 15px;
         }
     }
+
+    // &_cw {
+    //     // width: 18px;
+    //     font-size: 10px;
+
+    //     &:not(:last-child) {
+    //         margin-right: 15px;
+    //     }
+    // }
 }
 
 .boosted {

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -2,14 +2,16 @@ import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angu
 import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Observable, Subscription } from 'rxjs';
+import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons";
+import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
 
 import { StatusWrapper } from '../../stream.component';
 import { MastodonService } from '../../../../services/mastodon.service';
 import { AccountInfo } from '../../../../states/accounts.state';
-import { Status, Results } from '../../../../services/models/mastodon.interfaces';
+import { Status } from '../../../../services/models/mastodon.interfaces';
 import { ToolsService } from '../../../../services/tools.service';
 import { NotificationService } from '../../../../services/notification.service';
-// import { map } from "rxjs/operators";
+import { st } from '@angular/core/src/render3';
 
 @Component({
     selector: 'app-action-bar',
@@ -17,9 +19,15 @@ import { NotificationService } from '../../../../services/notification.service';
     styleUrls: ['./action-bar.component.scss']
 })
 export class ActionBarComponent implements OnInit, OnDestroy {
+    faWindowClose = faWindowClose;
+    faReply = faReply;
+    faRetweet = faRetweet;
+    faStar = faStar;
+    faWindowCloseRegular = faWindowCloseRegular;
 
     @Input() statusWrapper: StatusWrapper;
     @Output() replyEvent = new EventEmitter();
+    @Output() cwIsActiveEvent = new EventEmitter<boolean>();
 
     isFavorited: boolean;
     isBoosted: boolean;
@@ -27,6 +35,8 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     isBoostLocked: boolean;
     isLocked: boolean;
 
+    isContentWarningActive: boolean = false;
+
     private isProviderSelected: boolean;
     private selectedAccounts: AccountInfo[];
 
@@ -78,10 +88,26 @@ export class ActionBarComponent implements OnInit, OnDestroy {
             this.isLocked = false;
         }
 
+        if(status.sensitive || status.spoiler_text){
+            this.isContentWarningActive = true;
+        }
+
         this.checkIfFavorited();
         this.checkIfBoosted();
     }
 
+    showContent(): boolean {
+        this.isContentWarningActive = false;
+        this.cwIsActiveEvent.next(false);
+        return false;
+    }
+
+    hideContent(): boolean {
+        this.isContentWarningActive = true;
+        this.cwIsActiveEvent.next(true);
+        return false;
+    }
+
     reply(): boolean {
         this.replyEvent.emit();
         return false;

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

@@ -47,7 +47,10 @@
     <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments">
     </app-attachements>
 
-    <app-action-bar [statusWrapper]="statusWrapper" (replyEvent)="openReply()"></app-action-bar>
+    <app-action-bar #appActionBar
+        [statusWrapper]="statusWrapper" 
+        (cwIsActiveEvent)="changeCw($event)"
+        (replyEvent)="openReply()"></app-action-bar>
 
     <app-reply-to-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()">
     </app-reply-to-status>

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

@@ -1,8 +1,8 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } 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";
+import { ActionBarComponent } from "./action-bar/action-bar.component";
 
 @Component({
     selector: "app-status",
@@ -22,6 +22,7 @@ export class StatusComponent implements OnInit {
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
+    @ViewChild('appActionBar') appActionBar: ActionBarComponent;
 
     private _statusWrapper: StatusWrapper;
     status: Status;
@@ -66,9 +67,14 @@ export class StatusComponent implements OnInit {
 
     removeContentWarning(): boolean {
         this.isContentWarned = false;
+        this.appActionBar.showContent();
         return false;
     }
 
+    changeCw(cwIsActive: boolean){
+        this.isContentWarned = cwIsActive;
+    }
+
     private checkLabels(status: Status) {
         //since API is limited with federated status...
         if (status.uri.includes('birdsite.link')) {