diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 74b830f9..1f9bd499 100644 --- a/src/components/chat/contextMenu.ts +++ b/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; diff --git a/src/components/misc.ts b/src/components/misc.ts index 574055a3..50ec12b9 100644 --- a/src/components/misc.ts +++ b/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) { diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index eb04cf10..9bd36eb9 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/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(); + }); }); }); diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 30c1845d..2e453218 100644 --- a/src/scss/partials/_button.scss +++ b/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 {