Browse Source

Button menu changes:

Position fix
Added background overlay for click
master
Eduard Kuzmenko 4 years ago
parent
commit
5fe586e9ce
  1. 1
      src/components/chat/contextMenu.ts
  2. 32
      src/components/misc.ts
  3. 4
      src/lib/appManagers/appDialogsManager.ts
  4. 23
      src/scss/partials/_button.scss

1
src/components/chat/contextMenu.ts

@ -64,6 +64,7 @@ export default class ChatContextMenu { @@ -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;

32
src/components/misc.ts

@ -1,5 +1,6 @@ @@ -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 = () => { @@ -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) { @@ -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) { @@ -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,30 +218,33 @@ export function positionMenu({clientX, clientY}: {clientX: number, clientY: numb @@ -211,30 +218,33 @@ 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 {
if((clientX + scrollWidth + PADDING_LEFT) > innerWidth) {
side = 'right';
}
}
}
if(!side) {
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) {

4
src/lib/appManagers/appDialogsManager.ts

@ -338,11 +338,13 @@ export class AppDialogsManager { @@ -338,11 +338,13 @@ export class AppDialogsManager {
});
return this.loadDialogs();
}).then(result => {
}).then(() => {
appMessagesManager.getConversationsAll('', 0).finally(() => {
appMessagesManager.getConversationsAll('', 1).then(() => {
this.accumulateArchivedUnread();
});
});
});
/* const mutationObserver = new MutationObserver((mutationList, observer) => {

23
src/scss/partials/_button.scss

@ -66,7 +66,7 @@ @@ -66,7 +66,7 @@
transform: scale(.8);
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 @@ @@ -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 @@ @@ -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 {

Loading…
Cancel
Save