added privacy context-menu

src/app/components/create-status/create-status.component.html

@@ -22,24 +22,37 @@
             <span *ngIf="!statusReplyingToWrapper" title="post">POST!</span>
         </button>
         <div class="status-editor__footer__counter">
-            <div class="status-editor__footer__counter--posts" title="number of statuses">{{postCounts - 1}}/{{postCounts}}</div>
-            <div class="status-editor__footer__counter--count" title="char count">{{charCountLeft}}</div>
+            <div class="status-editor__footer__counter--posts" title="number of statuses">
+                {{postCounts - 1}}/{{postCounts}}</div>
+            <div class="status-editor__footer__counter--count" title="chars left">{{charCountLeft}}</div>
         </div>
 
         <a href class="status-editor__footer--link" title="add media">
             <fa-icon [icon]="faPaperclip"></fa-icon>
         </a>
-        <a href class="status-editor__footer--link" title="adjust status privacy">
+        <a href class="status-editor__footer--link" title="adjust status privacy" (click)="onContextMenu($event)">
             <fa-icon [icon]="faGlobeAmericas"></fa-icon>
         </a>
-
-
     </div>
 
-    <div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the
-        start in order to use multiposting.</div>
+    <div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the start in order to use multiposting.</div>
 
-<!-- 
+    <context-menu #contextMenu>
+        <ng-template contextMenuItem (execute)="changePrivacy()">
+            <fa-icon [icon]="faGlobeAmericas"></fa-icon> Public
+        </ng-template>
+        <ng-template contextMenuItem (execute)="changePrivacy()">
+            <fa-icon [icon]="faLockOpen"></fa-icon> Unlisted
+        </ng-template>        
+        <ng-template contextMenuItem (execute)="changePrivacy()">
+            <fa-icon [icon]="faLock"></fa-icon> Followers-only
+        </ng-template>
+        <ng-template contextMenuItem (execute)="changePrivacy()">
+            <fa-icon [icon]="faEnvelope"></fa-icon> Direct
+        </ng-template>       
+    </context-menu>
+
+    <!-- 
     <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy"
         [(ngModel)]="selectedPrivacy">
         <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>

src/app/components/create-status/create-status.component.scss

@@ -42,7 +42,7 @@ $counter-width: 90px;
         color: $status-editor-color;
         margin-bottom: 0;
         
-        resize: none;
+        //resize: none;
         border: none;
         overflow: auto;
         outline: none;
@@ -50,10 +50,14 @@ $counter-width: 90px;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
+
+
+        border-bottom: 1px solid black;
     }
 
     &__footer {
-        height: 35px;
+        
+        height: 34px;
         margin: 0 5px;
         border-width: 0;
         // position: relative;
@@ -72,7 +76,7 @@ $counter-width: 90px;
             transition: all .2s;
             float: right;
             padding: 0 15px 0 15px;
-            height: 35px;
+            height: 34px;
             background-color: $status-editor-footer-background;
             //border-left: 1px solid rgb(0, 0, 0);
 
@@ -90,7 +94,7 @@ $counter-width: 90px;
 
         &__counter {
             float: right;
-            height: 35px;
+            height: 34px;
             padding: 6px 7px 0 7px;
             vertical-align: center;
 

src/app/components/create-status/create-status.component.ts

@@ -3,8 +3,9 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Store } from '@ngxs/store';
 import { Subscription, Observable } from 'rxjs';
 import { UP_ARROW, DOWN_ARROW, ENTER, ESCAPE } from '@angular/cdk/keycodes';
-import { faPaperclip, faGlobe, faGlobeAmericas } from "@fortawesome/free-solid-svg-icons";
+import { faPaperclip, faGlobe, faGlobeAmericas, faLock, faLockOpen, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
+import { ContextMenuService, ContextMenuComponent } from 'ngx-contextmenu';
 
 import { MastodonService, VisibilityEnum } from '../../services/mastodon.service';
 import { Status, Attachment } from '../../services/models/mastodon.interfaces';
@@ -17,6 +18,7 @@ import { MediaService } from '../../services/media.service';
 import { AutosuggestSelection, AutosuggestUserActionEnum } from './autosuggest/autosuggest.component';
 
 
+
 @Component({
     selector: 'app-create-status',
     templateUrl: './create-status.component.html',
@@ -26,6 +28,9 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     faPaperclip = faPaperclip;
     faGlobe = faGlobe;
     faGlobeAmericas = faGlobeAmericas;
+    faLock = faLock;
+    faLockOpen = faLockOpen;
+    faEnvelope = faEnvelope;
 
     autoSuggestUserActionsStream = new EventEmitter<AutosuggestUserActionEnum>();
 
@@ -100,6 +105,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     @Input() statusReplyingToWrapper: StatusWrapper;
     @Output() onClose = new EventEmitter();
     @ViewChild('reply') replyElement: ElementRef;
+    @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
 
     private _isDirectMention: boolean;
     @Input('isDirectMention')
@@ -135,6 +141,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     private selectedAccount: AccountInfo;
 
     constructor(
+        private readonly contextMenuService: ContextMenuService,
         private readonly store: Store,
         private readonly notificationService: NotificationService,
         private readonly toolsService: ToolsService,
@@ -564,4 +571,16 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         }, 250);
         return false;
     }
+
+
+    public onContextMenu($event: MouseEvent): void {
+        this.contextMenuService.show.next({
+            // Optional - if unspecified, all context menu components will open
+            contextMenu: this.contextMenu,
+            event: $event,
+            item: null
+        });
+        $event.preventDefault();
+        $event.stopPropagation();
+    }
 }

src/sass/_context-menu.scss

@@ -1,10 +1,10 @@
 @import "variables";
 
 ::ng-deep .ngx-contextmenu {
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 
     & .dropdown-menu {
         border: solid 1px $context-menu-border-color;