Added possibility to unpin message from topbar

Added popup pin/unpin prompt

src/components/chat/contextMenu.ts

@@ -12,6 +12,7 @@ import { PopupButton } from "../popup";
 import PopupDeleteMessages from "../popupDeleteMessages";
 import PopupForward from "../popupForward";
 import PopupPeer from "../popupPeer";
+import PopupPinMessage from "../popupUnpinMessage";
 import appSidebarRight from "../sidebarRight";
 
 export default class ChatContextMenu {
@@ -124,7 +125,7 @@ export default class ChatContextMenu {
       icon: 'unpin',
       text: 'Unpin',
       onClick: this.onUnpinClick,
-      verify: () => appImManager.pinnedMsgID == this.msgID && (this.peerID == $rootScope.myID || (this.peerID < 0 && appChatsManager.hasRights(-this.peerID, 'pin')))
+      verify: () => appImManager.pinnedMsgID == this.msgID && appPeersManager.canPinMessage(this.peerID)
     }, {
       icon: 'revote',
       text: 'Revote',
@@ -213,11 +214,11 @@ export default class ChatContextMenu {
   };
 
   private onPinClick = () => {
-    appMessagesManager.updatePinnedMessage($rootScope.selectedPeerID, this.msgID);
+    new PopupPinMessage($rootScope.selectedPeerID, this.msgID);
   };
 
   private onUnpinClick = () => {
-    appMessagesManager.updatePinnedMessage($rootScope.selectedPeerID, 0);
+    new PopupPinMessage($rootScope.selectedPeerID, 0);
   };
 
   private onRetractVote = () => {

src/components/popupDeleteMessages.ts

@@ -54,10 +54,10 @@ export default class PopupDeleteMessages {
     });
 
     const popup = new PopupPeer('popup-delete-chat', {
-      peerID: peerID,
+      peerID,
-      title: title,
+      title,
-      description: description,
+      description,
-      buttons: buttons
+      buttons
     });
 
     popup.show();

src/components/popupUnpinMessage.ts

@@ -0,0 +1,41 @@
+import appMessagesManager from "../lib/appManagers/appMessagesManager";
+import { PopupButton } from "./popup";
+import PopupPeer from "./popupPeer";
+
+export default class PopupPinMessage {
+  constructor(peerID: number, mid: number) {
+    let title: string, description: string, buttons: PopupButton[] = [];
+
+    const callback = () => appMessagesManager.updatePinnedMessage(peerID, mid);
+    if(mid) {
+      title = 'Pin Message?';
+      description = 'Would you like to pin this message?';
+      buttons.push({
+        text: 'PIN',
+        callback
+      });
+    } else {
+      title = `Unpin Message?`;
+      description = 'Would you like to unpin this message?';
+      buttons.push({
+        text: 'UNPIN',
+        isDanger: true,
+        callback
+      });
+    }
+
+    buttons.push({
+      text: 'CANCEL',
+      isCancel: true
+    });
+
+    const popup = new PopupPeer('popup-delete-chat', {
+      peerID,
+      title,
+      description,
+      buttons
+    });
+
+    popup.show();
+  }
+}

src/lib/appManagers/appImManager.ts

@@ -19,6 +19,7 @@ import { formatPhoneNumber, parseMenuButtonsTo } from '../../components/misc';
 import PopupDatePicker from '../../components/popupDatepicker';
 import PopupForward from '../../components/popupForward';
 import PopupStickers from '../../components/popupStickers';
+import PopupPinMessage from '../../components/popupUnpinMessage';
 import ProgressivePreloader from '../../components/preloader';
 import { ripple } from '../../components/ripple';
 //import Scrollable from '../../components/scrollable';
@@ -178,7 +179,12 @@ export class AppImManager {
     this.chatAudio = new ChatAudio();
     this.chatInfo.nextElementSibling.prepend(this.chatAudio.divAndCaption.container);
 
-    this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'));
+    this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'), () => {
+      if(appPeersManager.canPinMessage(this.peerID)) {
+        new PopupPinMessage(this.peerID, 0);
+        return Promise.resolve(false);
+      }
+    });
     this.btnJoin.parentElement.insertBefore(this.pinnedMessageContainer.divAndCaption.container, this.btnJoin);
 
     // will call when message is sent (only 1)

src/lib/appManagers/appPeersManager.ts

@@ -1,5 +1,6 @@
 import { DialogPeer, InputDialogPeer, InputPeer, Peer } from "../../layer";
 import { RichTextProcessor } from "../richtextprocessor";
+import $rootScope from "../rootScope";
 import { isObject } from "../utils";
 import appChatsManager from "./appChatsManager";
 import appUsersManager from "./appUsersManager";
@@ -26,6 +27,10 @@ export class AppPeersManager {
     else appUsersManager.saveApiUser(instance);
   } */
 
+  public canPinMessage(peerID: number) {
+    return peerID == $rootScope.myID || (peerID < 0 && appChatsManager.hasRights(-peerID, 'pin'));
+  }
+
   public getPeerPhoto(peerID: number) {
     return peerID > 0
       ? appUsersManager.getUserPhoto(peerID)

src/scss/partials/_chat.scss

@@ -839,6 +839,11 @@ $chat-helper-size: 39px;
 
 	.pinned-message {
 		display: none;
+
+		&-close {
+			visibility: visible !important;
+			left: -3rem;
+		}
 	}
 
 	.pinned-container {
@@ -846,7 +851,7 @@ $chat-helper-size: 39px;
 		overflow: visible;
 
 		@include respond-to(handhelds) {
-			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
 
 			&:before {
 				width: 100%;
@@ -855,8 +860,8 @@ $chat-helper-size: 39px;
 				left: 0;
 				top: 0;
 				position: absolute;
-				/* box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.15); */
+				/* box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .15); */
-				box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+				box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, .15);
 			}
 		}
 
@@ -875,6 +880,7 @@ $chat-helper-size: 39px;
 			@include respond-to(handhelds) {
 				font-size: 1.4rem;
 				right: 9px;
+				left: auto;
 				visibility: visible;
 			}
 		}