added bookmark design

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

@@ -11,7 +11,8 @@
     <fa-icon *ngIf="isBoostLocked && !isLocked && !isDM" class="action-bar__lock" title="This post cannot be boosted"
         [icon]="faLock"></fa-icon>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
-    <fa-icon *ngIf="isDM && !isLocked" class="action-bar__envelope" title="DM post cannot be boosted" [icon]="faEnvelope"></fa-icon>
+    <fa-icon *ngIf="isDM && !isLocked" class="action-bar__envelope" title="DM post cannot be boosted"
+        [icon]="faEnvelope"></fa-icon>
 
     <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--fav" title="Favourite"
         [class.favorited]="isFavorited" [class.favoriting]="favoriteIsLoading" (click)="favorite()">
@@ -19,6 +20,12 @@
     </a>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
 
+    <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--bookmark" title="Bookmark"
+        [class.bookmarked]="isBookmarked" [class.favoriting]="bookmarkingIsLoading" (click)="bookmark()">
+        <fa-icon [icon]="faBookmark"></fa-icon>
+    </a>
+    <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
+
     <a href class="action-bar__link action-bar__link--cw" title="show content" (click)="showContent()"
         *ngIf="isContentWarningActive">
         <fa-icon [icon]="faWindowClose"></fa-icon>
@@ -28,48 +35,6 @@
         <fa-icon [icon]="faWindowCloseRegular"></fa-icon>
     </a>
 
-    <app-status-user-context-menu class="action-bar__link action-bar__link--more" [statusWrapper]="statusWrapper" (browseThreadEvent)="browseThread($event)"></app-status-user-context-menu>
-    <!-- <a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event)" title="More">
-        <fa-icon [icon]="faEllipsisH"></fa-icon>
-    </a>
-    <context-menu #contextMenu>
-        <ng-template contextMenuItem (execute)="expandStatus()">
-            Expand status
-        </ng-template>
-        <ng-template contextMenuItem (execute)="copyStatusLink()">
-            Copy link to status
-        </ng-template>
-        <ng-template contextMenuItem divider="true"></ng-template>
-        <ng-template contextMenuItem (execute)="mentionAccount()" *ngIf="!isOwnerSelected">
-            Mention @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="dmAccount()" *ngIf="!isOwnerSelected">
-            Direct message @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="muteConversation()" *ngIf="isOwnerSelected && !displayedStatus.muted">
-            Mute conversation
-        </ng-template>
-        <ng-template contextMenuItem (execute)="unmuteConversation()" *ngIf="isOwnerSelected && displayedStatus.muted">
-            Unmute conversation
-        </ng-template>
-        <ng-template contextMenuItem divider="true"></ng-template>
-        <ng-template contextMenuItem (execute)="muteAccount()" *ngIf="!isOwnerSelected">
-            Mute @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="blockAccount()" *ngIf="!isOwnerSelected">
-            Block @{{ this.username }}
-        </ng-template>
-        <ng-template contextMenuItem (execute)="pinOnProfile()" *ngIf="isOwnerSelected && !displayedStatus.pinned && displayedStatus.visibility === 'public'">
-            Pin on profile
-        </ng-template>
-        <ng-template contextMenuItem (execute)="unpinFromProfile()" *ngIf="isOwnerSelected && displayedStatus.pinned && displayedStatus.visibility === 'public'">
-            Unpin from profile
-        </ng-template>
-        <ng-template contextMenuItem (execute)="delete(false)" *ngIf="isOwnerSelected">
-            Delete
-        </ng-template>
-        <ng-template contextMenuItem (execute)="delete(true)" *ngIf="isOwnerSelected">
-            Delete & re-draft
-        </ng-template>
-    </context-menu> -->
+    <app-status-user-context-menu class="action-bar__link action-bar__link--more" [statusWrapper]="statusWrapper"
+        (browseThreadEvent)="browseThread($event)"></app-status-user-context-menu>
 </div>

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

@@ -34,6 +34,12 @@
         &--fav {
             font-size: 17px;
         }
+        
+        &--bookmark {
+            position: relative;
+            // bottom: -1px;
+            font-size: 16px;
+        }
 
         &--cw {
             position: relative;
@@ -86,6 +92,13 @@
     }
 }
 
+.bookmarked {
+    color: $bookmarked-color;
+
+    &:hover {
+        color: darken($bookmarked-color, 10);
+    }
+}
 
 @keyframes loadingAnimation {
     0% {

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

@@ -2,7 +2,7 @@ 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, faEllipsisH, faLock, faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faWindowClose, faReply, faRetweet, faStar, faEllipsisH, faLock, faEnvelope, faBookmark } from "@fortawesome/free-solid-svg-icons";
 import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
 
 import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
@@ -27,6 +27,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     faEllipsisH = faEllipsisH;
     faLock = faLock;
     faEnvelope = faEnvelope;
+    faBookmark = faBookmark;
 
     @Input() statusWrapper: StatusWrapper;
     @Output() replyEvent = new EventEmitter();
@@ -34,6 +35,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
+    isBookmarked: boolean;
     isFavorited: boolean;
     isBoosted: boolean;
     isDM: boolean;
@@ -41,6 +43,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     isBoostLocked: boolean;
     isLocked: boolean;
 
+    bookmarkingIsLoading: boolean;
     favoriteIsLoading: boolean;
     boostIsLoading: boolean;
 
@@ -236,6 +239,18 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         return false;
     }
 
+    bookmark(): boolean {
+        if (this.bookmarkingIsLoading) return;
+
+        this.bookmarkingIsLoading = true;
+        setTimeout(() => {
+            this.isBookmarked = !this.isBookmarked;
+            this.bookmarkingIsLoading = false;
+        }, 2000);
+
+        return false;
+    }
+
     private checkIfBoosted() {
         const selectedAccount = <AccountInfo>this.selectedAccounts[0];
         if (selectedAccount) {

src/sass/_variables.scss

@@ -22,6 +22,7 @@ $status-secondary-color: #4e5572;
 $status-links-color: #d9e1e8;
 $boost-color : #5098eb;
 $favorite-color: #ffc16f;
+$bookmarked-color: #ff5050;
 
 // Block dispositions
 $scroll-bar-width: 8px;