From 0957f3d51bdff1c75a22219e888b7d781c8dcbe4 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Wed, 11 Nov 2020 23:49:17 +0200 Subject: [PATCH] Fix button menu position in album orientation --- src/components/misc.ts | 24 ++++++++++++++++++++---- src/index.hbs | 15 +++++++-------- src/lib/appManagers/appImManager.ts | 2 ++ src/scss/partials/_button.scss | 5 ++++- src/scss/partials/_chat.scss | 4 ++-- src/scss/partials/_chatBubble.scss | 6 +++++- src/scss/partials/pages/_chats.scss | 11 ++++------- 7 files changed, 44 insertions(+), 23 deletions(-) diff --git a/src/components/misc.ts b/src/components/misc.ts index 7ea81a30..ffd9a57a 100644 --- a/src/components/misc.ts +++ b/src/components/misc.ts @@ -205,8 +205,8 @@ export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) { window.addEventListener('contextmenu', onClick, {once: true}); } -const PADDING_TOP = 16; -const PADDING_LEFT = 16; +const PADDING_TOP = 8; +const PADDING_LEFT = 8; export function positionMenu({clientX, clientY}: {clientX: number, clientY: number}/* e: MouseEvent */, elem: HTMLElement, side?: 'left' | 'right') { //let {clientX, clientY} = e; @@ -231,12 +231,28 @@ export function positionMenu({clientX, clientY}: {clientX: number, clientY: numb let verticalSide: 'top' | 'bottom'; if(side !== undefined) { - const left = clamp(side == 'right' ? clientX - scrollWidth : clientX, PADDING_LEFT, innerWidth - scrollWidth - PADDING_LEFT); + let left: number; + if(side === 'right') { + left = clientX - scrollWidth; + if(left < PADDING_LEFT) { + side = 'left'; + left = Math.max(PADDING_LEFT, clientX); + } + } else { + left = Math.max(PADDING_LEFT, clientX); + if((clientX + scrollWidth) > (innerWidth - PADDING_LEFT)) { + side = 'right'; + left = Math.max(clientX - scrollWidth, scrollWidth - PADDING_LEFT); + } + } + + //const left = clamp(side == 'right' ? clientX - scrollWidth : clientX, PADDING_LEFT, innerWidth - scrollWidth - PADDING_LEFT); elem.style.left = left + 'px'; } if((clientY + scrollHeight + PADDING_TOP) > innerHeight) { - elem.style.top = (clientY - scrollHeight) + 'px'; + elem.style.top = Math.max(PADDING_TOP, clientY - scrollHeight) + 'px'; + // elem.style.top = (innerHeight - scrollHeight - PADDING_TOP) + 'px'; verticalSide = 'top'; } else { elem.style.top = Math.max(PADDING_TOP, clientY) + 'px'; diff --git a/src/index.hbs b/src/index.hbs index 3c9dad69..523c1fec 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -161,7 +161,6 @@ - {{!--
--}}
    @@ -394,13 +393,6 @@
    -
    -
    -
    -
    -
    -
    -
    {{!-- --}} @@ -605,6 +597,13 @@
    +
    +
    +
    +
    +
    +
    +
    {{# each htmlWebpackPlugin.files.js }} diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 64fd9fc0..79030801 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -2320,6 +2320,8 @@ export class AppImManager { nameDiv.style.color = appPeersManager.getPeerColorByID(message.fwdFromID, false); nameDiv.innerHTML = title; } else { + /* const fromTitle = message.fromID == this.myID || appPeersManager.isBroadcast(message.fwdFromID || message.fromID) ? '' : `
    ${appPeersManager.getPeerTitle(message.fromID)}
    `; + nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */ nameDiv.innerHTML = 'Forwarded from ' + title; } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 944d0e57..19886f5a 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -59,7 +59,6 @@ box-shadow: 0 5px 8px 1px rgba(0, 0, 0, .24); z-index: 3; top: 100%; - margin-top: 8px; padding: 9px 0; border-radius: $border-radius-medium; opacity: 0; @@ -242,6 +241,10 @@ &:not(.btn-primary).menu-open { background-color: var(--color-gray-hover); } + + .btn-menu { + margin-top: .5rem; + } } .btn-circle { diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 1b66b0ee..ddfc2b75 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -5,13 +5,13 @@ $chat-padding: 1rem; $chat-padding-handhelds: .5rem; $chat-helper-size: 39px; -#bubble-contextmenu > div { +/* #bubble-contextmenu > div { padding: 0 5.25 0 1rem; @include respond-to(handhelds) { padding: 0 3.75rem 0 1rem; } -} +} */ #topbar { width: 100%; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 38ce344e..ec5128c4 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1167,10 +1167,14 @@ $bubble-margin: .25rem; //width: max-content; //white-space: nowrap; } + + &:not(.is-group-first) .bubble__container > .name .name { + display: none; + } &:not(.webpage) { &.photo, &.video { - .name { + .bubble__container > .name { //padding-bottom: .2675rem; padding-bottom: 6px; } diff --git a/src/scss/partials/pages/_chats.scss b/src/scss/partials/pages/_chats.scss index 1f33b797..a420b503 100644 --- a/src/scss/partials/pages/_chats.scss +++ b/src/scss/partials/pages/_chats.scss @@ -8,8 +8,10 @@ top: 52%; } } - - > div { + + #main-columns { + width: 100%; + overflow: hidden; position: relative; min-height: 100%; @@ -19,11 +21,6 @@ //} } - #main-columns { - width: 100%; - overflow: hidden; - } - @include respond-to(handhelds) { .main-column { width: 100%;