Button menu changes:

Position fix
Added background overlay for click

src/components/chat/contextMenu.ts

@@ -64,6 +64,7 @@ export default class ChatContextMenu {
       });
 
       const side: 'left' | 'right' = bubble.classList.contains('is-in') ? 'left' : 'right';
+      //bubble.parentElement.append(this.element);
       positionMenu(e, this.element, side);
       openBtnMenu(this.element, () => {
         this.peerID = this.msgID = 0;

src/components/misc.ts

@@ -1,5 +1,6 @@
 import Countries, { Country, PhoneCodesMain } from "../countries";
 import mediaSizes from "../helpers/mediaSizes";
+import { clamp } from "../helpers/number";
 import { isTouchSupported } from "../helpers/touchSupport";
 import { isApple } from "../helpers/userAgent";
 
@@ -139,6 +140,7 @@ let closeBtnMenu = () => {
   if(openedMenu) {
     openedMenu.classList.remove('active');
     openedMenu.parentElement.classList.remove('menu-open');
+    openedMenu.previousElementSibling.remove(); // remove overlay
     openedMenu = null;
   }
   
@@ -183,6 +185,9 @@ export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) {
   openedMenu.classList.add('active');
   openedMenu.parentElement.classList.add('menu-open');
 
+  const overlay = document.createElement('div');
+  overlay.classList.add('btn-menu-overlay');
+  openedMenu.parentElement.insertBefore(overlay, openedMenu);
   //document.body.classList.add('disable-hover');
   
   openedMenuOnClose = onClose;
@@ -200,6 +205,8 @@ export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) {
   window.addEventListener('contextmenu', onClick, {once: true});
 }
 
+const PADDING_TOP = 16;
+const PADDING_LEFT = 16;
 export function positionMenu({clientX, clientY}: {clientX: number, clientY: number}/* e: MouseEvent */, elem: HTMLElement, side?: 'left' | 'right') {
   //let {clientX, clientY} = e;
 
@@ -211,12 +218,8 @@ export function positionMenu({clientX, clientY}: {clientX: number, clientY: numb
   }
 
   if(side === undefined) {
-    if((clientX + scrollWidth) > innerWidth) {
-      if((clientX - scrollWidth) < 0) {
-        elem.style.left = (innerWidth - scrollWidth) + 'px';
-      } else {
-        side = 'right';
-      }
+    if((clientX + scrollWidth + PADDING_LEFT) > innerWidth) {
+      side = 'right';
     }
   }
 
@@ -224,17 +227,24 @@ export function positionMenu({clientX, clientY}: {clientX: number, clientY: numb
     side = 'left';
   }
 
-  elem.classList.remove('bottom-left', 'bottom-right');
+  // ! don't need reverse for this, this will be the side WHERE ANIMATION WILL END !
+  let verticalSide: 'top' | 'bottom';
+
   if(side !== undefined) {
-    elem.style.left = (side == 'right' ? clientX - scrollWidth : clientX) + 'px';
-    elem.classList.add(side == 'left' ? 'bottom-right' : 'bottom-left');
+    const left = clamp(side == 'right' ? clientX - scrollWidth : clientX, PADDING_LEFT, innerWidth - scrollWidth - PADDING_LEFT);
+    elem.style.left = left + 'px';
   }
   
-  if((clientY + scrollHeight) > innerHeight) {
-    elem.style.top = (innerHeight - scrollHeight) + 'px';
+  if((clientY + scrollHeight + PADDING_TOP) > innerHeight) {
+    elem.style.top = (clientY - scrollHeight) + 'px';
+    verticalSide = 'top';
   } else {
-    elem.style.top = clientY + 'px';
+    elem.style.top = Math.max(PADDING_TOP, clientY) + 'px';
+    verticalSide = 'bottom';
   }
+  
+  elem.classList.remove('bottom-left', 'bottom-right', 'top-left', 'top-right');
+  elem.classList.add(verticalSide + '-' + (side == 'left' ? 'right' : 'left'));
 }
 
 export function attachContextMenuListener(element: HTMLElement, callback: (e: Touch | MouseEvent) => void) {

src/lib/appManagers/appDialogsManager.ts

@@ -338,9 +338,11 @@ export class AppDialogsManager {
       });
 
       return this.loadDialogs();
-    }).then(result => {
-      appMessagesManager.getConversationsAll('', 1).then(() => {
-        this.accumulateArchivedUnread();
+    }).then(() => {
+      appMessagesManager.getConversationsAll('', 0).finally(() => {
+        appMessagesManager.getConversationsAll('', 1).then(() => {
+          this.accumulateArchivedUnread();
+        });
       });
     });
 

src/scss/partials/_button.scss

@@ -56,7 +56,7 @@
   visibility: hidden;
   position: absolute;
   background: #fff;
-  box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
+  box-shadow: 0 5px 8px 1px rgba(0, 0, 0, .24);
   z-index: 3;
   top: 100%;
   margin-top: 8px;
@@ -64,9 +64,9 @@
   border-radius: $border-radius-medium;
   opacity: 0;
   transform: scale(.8);
-  transition-property: opacity,transform,visibility;
+  transition-property: opacity, transform, visibility;
   transition-duration: .2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   font-size: 16px;
 
   -webkit-user-select: none; /* disable selection/Copy of UIWebView */
@@ -122,7 +122,7 @@
     align-items: center;
 
     html.no-touch &:hover {
-      background-color: rgba(112, 117, 121, 0.06);
+      background-color: rgba(112, 117, 121, .06);
     }
 
     &:before {
@@ -136,6 +136,25 @@
       height: 50px;
     }
   }
+
+  /* &-overlay {
+    position: fixed !important;
+    left: -100vw;
+    right: -100vw;
+    top: -100vh;
+    bottom: -100vh;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, .2);
+  } */
+  &-overlay {
+    position: fixed !important;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    //background-color: rgba(0, 0, 0, .2);
+  }
 }
 
 .btn-primary {