added context-menu buttons

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

@@ -4,16 +4,16 @@
     </a>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
 
-    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link action-bar__link--boost" title="Boost" [class.boosted]="isBoosted"
-        [class.boosting]="boostIsLoading" (click)="boost()">
+    <a *ngIf="!(isBoostLocked || isLocked)" href class="action-bar__link action-bar__link--boost" title="Boost"
+        [class.boosted]="isBoosted" [class.boosting]="boostIsLoading" (click)="boost()">
         <fa-icon [icon]="faRetweet"></fa-icon>
     </a>
     <fa-icon *ngIf="isBoostLocked && !isLocked" 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>
 
-    <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--fav" title="Favourite" [class.favorited]="isFavorited"
-        [class.favoriting]="favoriteIsLoading" (click)="favorite()">
+    <a *ngIf="!isLocked" href class="action-bar__link action-bar__link--fav" title="Favourite"
+        [class.favorited]="isFavorited" [class.favoriting]="favoriteIsLoading" (click)="favorite()">
         <fa-icon [icon]="faStar"></fa-icon>
     </a>
     <fa-icon *ngIf="isLocked" class="action-bar__lock" title="Account can't access this post" [icon]="faLock"></fa-icon>
@@ -27,19 +27,33 @@
         <fa-icon [icon]="faWindowCloseRegular"></fa-icon>
     </a>
 
-    <a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event, item)" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item">
-        <fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item"  ></fa-icon>
+    <a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event, item)" title="More"
+        [contextMenu]="basicMenu" [contextMenuSubject]="item">
+        <fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item"></fa-icon>
     </a>
     <context-menu #basicMenu>
-        <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
-          Say hi!
+        <ng-template contextMenuItem (execute)="expandStatus()">
+            Expand status
         </ng-template>
-        <!-- <ng-template contextMenuItem divider="true"></ng-template> -->
-        <ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
-          Bye, {{item?.name}}
+        <ng-template contextMenuItem (execute)="copyStatusLink()">
+            Copy link to status
         </ng-template>
-        <!-- <ng-template contextMenuItem passive="true">
-          Input something: <input type="text">
+        <ng-template contextMenuItem divider="true"></ng-template>
+        <ng-template contextMenuItem (execute)="mentionAccount()">
+            Mention @account
+        </ng-template>
+        <ng-template contextMenuItem (execute)="dmAccount()">
+            Direct message @account
+        </ng-template>
+        <ng-template contextMenuItem divider="true"></ng-template>
+        <ng-template contextMenuItem (execute)="muteAccount()">
+            Mute @account
+        </ng-template>
+        <ng-template contextMenuItem (execute)="blockAccount()">
+            Block @account
+        </ng-template>
+        <!-- <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
+            Mute @account
         </ng-template> -->
-      </context-menu>
+    </context-menu>
 </div>

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

@@ -72,7 +72,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         const status = this.statusWrapper.status;
         const account = this.statusWrapper.provider;
 
-        if(status.reblog){
+        if (status.reblog) {
             this.favoriteStatePerAccountId[account.id] = status.reblog.favourited;
             this.bootedStatePerAccountId[account.id] = status.reblog.reblogged;
         } else {
@@ -133,7 +133,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     }
 
     boost(): boolean {
-        if(this.boostIsLoading) return;
+        if (this.boostIsLoading) return;
 
         this.boostIsLoading = true;
         const account = this.toolsService.getSelectedAccounts()[0];
@@ -149,7 +149,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
                 }
             })
             .then((boostedStatus: Status) => {
-                if(boostedStatus.pleroma){
+                if (boostedStatus.pleroma) {
                     this.bootedStatePerAccountId[account.id] = boostedStatus.reblog !== null; //FIXME: when Pleroma will return the good status
                 } else {
                     this.bootedStatePerAccountId[account.id] = boostedStatus.reblogged;
@@ -168,7 +168,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     }
 
     favorite(): boolean {
-        if(this.favoriteIsLoading) return;
+        if (this.favoriteIsLoading) return;
 
         this.favoriteIsLoading = true;
         const account = this.toolsService.getSelectedAccounts()[0];
@@ -224,12 +224,43 @@ export class ActionBarComponent implements OnInit, OnDestroy {
 
     public onContextMenu($event: MouseEvent, item: any): void {
         this.contextMenuService.show.next({
-          // Optional - if unspecified, all context menu components will open
-          contextMenu: this.basicMenu,
-          event: $event,
-          item: item,
+            // Optional - if unspecified, all context menu components will open
+            contextMenu: this.basicMenu,
+            event: $event,
+            item: item,
         });
         $event.preventDefault();
         $event.stopPropagation();
-      }
+    }
+
+    expandStatus(): boolean {
+
+        return false;
+    }
+
+    copyStatusLink(): boolean {
+
+        return false;
+    }
+
+    mentionAccount(): boolean {
+
+        return false;
+    }
+
+    dmAccount(): boolean {
+
+        return false;
+    }
+
+    muteAccount(): boolean {
+
+        return false;
+    }
+
+    blockAccount(): boolean {
+
+        return false;
+    }
+
 }

src/sass/_context-menu.scss

@@ -3,8 +3,8 @@
     & .dropdown-menu {
         border: solid 1px $context-menu-border-color;
         background-color: $context-menu-background;
-        padding: 3px 0;
-        border-radius: 3px;
+        padding: 2px 0;
+        border-radius: 2px;
         //border: solid 2px $context-menu-border-color;
     }
 
@@ -23,7 +23,7 @@
         color: $context-menu-font-color;
         display: block;
         padding: 0.5em 1em;
-        padding: 5px 10px;
+        padding: 3px 10px;
         text-decoration: none;
         transition: all .2s;
 
@@ -33,4 +33,8 @@
             text-decoration: none;
         }
     }
+
+    & .divider {
+        border-top: solid 2px $context-menu-border-color;
+    }
 }