From 3f3dcdb821372106ab35a8671b061dd02fa49cbb Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sat, 31 Oct 2020 17:58:13 +0200 Subject: [PATCH] Fix topbar overflow Topbar pinned & audio ripple --- src/components/chat/audio.ts | 6 +- src/components/chat/pinnedContainer.ts | 14 +- src/components/sidebarRight/index.ts | 2 +- .../sidebarRight/tabs/sharedMedia.ts | 2 +- src/lib/appManagers/appImManager.ts | 42 ++++- src/scss/partials/_chat.scss | 172 ++++++++---------- 6 files changed, 136 insertions(+), 102 deletions(-) diff --git a/src/components/chat/audio.ts b/src/components/chat/audio.ts index 074a1ebe..a27f6084 100644 --- a/src/components/chat/audio.ts +++ b/src/components/chat/audio.ts @@ -23,14 +23,14 @@ export class ChatAudio extends PinnedContainer { this.divAndCaption.border.remove(); - this.toggleEl = document.createElement('div'); - this.toggleEl.classList.add('pinned-audio-ico', 'tgico'); + this.toggleEl = document.createElement('button'); + this.toggleEl.classList.add('pinned-audio-ico', 'tgico', 'btn-icon'); this.toggleEl.addEventListener('click', (e) => { cancelEvent(e); appMediaPlaybackController.toggle(); }); - this.divAndCaption.container.prepend(this.toggleEl); + this.wrapper.prepend(this.toggleEl); $rootScope.$on('audio_play', (e) => { const {doc, mid} = e.detail; diff --git a/src/components/chat/pinnedContainer.ts b/src/components/chat/pinnedContainer.ts index 7e9833a5..b0409711 100644 --- a/src/components/chat/pinnedContainer.ts +++ b/src/components/chat/pinnedContainer.ts @@ -2,6 +2,7 @@ import mediaSizes from "../../helpers/mediaSizes"; import appImManager from "../../lib/appManagers/appImManager"; import { cancelEvent } from "../../lib/utils"; import DivAndCaption from "../divAndCaption"; +import { ripple } from "../ripple"; const classNames: string[] = []; const CLASSNAME_BASE = 'pinned-container'; @@ -9,6 +10,7 @@ const HEIGHT = 52; export default class PinnedContainer { private close: HTMLElement; + protected wrapper: HTMLElement; constructor(protected className: string, public divAndCaption: DivAndCaption<(title: string, subtitle: string, message?: any) => void>, onClose?: () => void | Promise) { /* const prev = this.divAndCaption.fill; @@ -22,11 +24,19 @@ export default class PinnedContainer { divAndCaption.container.classList.add(CLASSNAME_BASE, 'hide'); divAndCaption.title.classList.add(CLASSNAME_BASE + '-title'); divAndCaption.subtitle.classList.add(CLASSNAME_BASE + '-subtitle'); + divAndCaption.content.classList.add(CLASSNAME_BASE + '-content'); this.close = document.createElement('button'); this.close.classList.add(CLASSNAME_BASE + '-close', `pinned-${className}-close`, 'btn-icon', 'tgico-close'); - divAndCaption.container.append(this.close); + //divAndCaption.container.prepend(this.close); + + this.wrapper = document.createElement('div'); + this.wrapper.classList.add(CLASSNAME_BASE + '-wrapper'); + this.wrapper.append(...Array.from(divAndCaption.container.children)); + ripple(this.wrapper); + + divAndCaption.container.append(this.close, this.wrapper); this.close.addEventListener('click', (e) => { cancelEvent(e); @@ -47,6 +57,8 @@ export default class PinnedContainer { return; } + this.divAndCaption.container.classList.toggle('is-floating', mediaSizes.isMobile); + const scrollTop = mediaSizes.isMobile /* && !appImManager.scrollable.isScrolledDown */ ? appImManager.scrollable.scrollTop : undefined; this.divAndCaption.container.classList.toggle('hide', hide); const className = `is-pinned-${this.className}-shown`; diff --git a/src/components/sidebarRight/index.ts b/src/components/sidebarRight/index.ts index 3de8d1e5..e9a0783a 100644 --- a/src/components/sidebarRight/index.ts +++ b/src/components/sidebarRight/index.ts @@ -55,7 +55,7 @@ export class AppSidebarRight extends SidebarSlider { this.gifsTab = gifsTab; mediaSizes.addListener('changeScreen', (from, to) => { - if(from !== undefined && to == ScreenSize.medium && from !== ScreenSize.mobile) { + if(to == ScreenSize.medium && from !== ScreenSize.mobile) { this.toggleSidebar(false); } }); diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index 2a40d677..edbb8966 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -315,7 +315,7 @@ export default class AppSharedMediaTab implements SliderTab { case 'inputMessagesFilterDocument': { for(let message of messages) { - if(!message.media.document || ['voice', 'audio', 'gif', 'sticker'].includes(message.media.document.type)) { + if(!message.media.document || ['voice', 'audio', 'gif', 'sticker', 'round'].includes(message.media.document.type)) { continue; } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 4c783c54..6005e1f5 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -28,7 +28,7 @@ import appSidebarLeft from "../../components/sidebarLeft"; import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight'; import StickyIntersector from '../../components/stickyIntersector'; import { wrapAlbum, wrapDocument, wrapPhoto, wrapPoll, wrapReply, wrapSticker, wrapVideo } from '../../components/wrappers'; -import mediaSizes from '../../helpers/mediaSizes'; +import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes'; import { isTouchSupported } from '../../helpers/touchSupport'; import { isAndroid, isApple, isSafari } from '../../helpers/userAgent'; import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer'; @@ -178,8 +178,44 @@ export class AppImManager { this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */); + const chatUtils = this.chatInfo.nextElementSibling; this.chatAudio = new ChatAudio(); - this.chatInfo.nextElementSibling.prepend(this.chatAudio.divAndCaption.container); + chatUtils.prepend(this.chatAudio.divAndCaption.container); + + // * fix topbar overflow section + + const setUtilsWidth = () => { + this.log('utils width:', chatUtils.scrollWidth); + this.chatInfo.style.setProperty('--utils-width', chatUtils.scrollWidth + 'px'); + }; + + let mutationRAF: number; + const mutationObserver = new MutationObserver((mutationList) => { + if(mutationRAF) window.cancelAnimationFrame(mutationRAF); + //mutationRAF = window.setTimeout(() => { + mutationRAF = window.requestAnimationFrame(() => { + //mutationRAF = window.requestAnimationFrame(() => { + setUtilsWidth(); + //}); + }); + //}, 64); + }); + + mutationObserver.observe(chatUtils, { + attributes: true, + childList: true, + subtree: true + }); + + mediaSizes.addListener('changeScreen', (from, to) => { + setUtilsWidth(); + + this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile); + this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile + /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */); + }); + + // * fix topbar overflow section end this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'), () => { if(appPeersManager.canPinMessage(this.peerID)) { @@ -2505,7 +2541,7 @@ export class AppImManager { if(message.grouped_id) additionMsgIDs.splice(i, 1); } - maxID = additionMsgIDs[additionMsgIDs.length - 1]; + maxID = additionMsgIDs[additionMsgIDs.length - 1] || maxID; } } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 78dd0a88..16ad12b7 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -101,27 +101,11 @@ $chat-helper-size: 39px; flex: 1 1 auto; overflow: hidden; - @include respond-to(medium-screens) { - body.is-right-column-shown & { - max-width: calc(100% - var(--right-column-width) * 1.6); - } - } - } + max-width: calc(100% - var(--utils-width)); - @include respond-to(medium-screens) { - &.is-pinned-message-shown { + @include respond-to(medium-screens) { body.is-right-column-shown & { - .chat-info { - max-width: calc(100% - var(--right-column-width) * 1.75); - } - } - - &.is-pinned-audio-shown { - body.is-right-column-shown & { - .chat-info { - max-width: calc(100% - var(--right-column-width) * 2.25); - } - } + max-width: calc(100% - var(--right-column-width) - var(--utils-width)); } } } @@ -162,10 +146,6 @@ $chat-helper-size: 39px; padding-left: 10px; max-width: 100%; overflow: hidden; - - @include respond-to(handhelds) { - max-width: 208px; - } } .person { @@ -609,10 +589,7 @@ $chat-helper-size: 39px; cursor: pointer; font-size: 18px; line-height: 24px; - white-space: nowrap; - text-overflow: ellipsis; max-width: calc(100% - 1.5rem); - overflow: hidden; /* @include respond-to(handhelds) { text-overflow: ellipsis; @@ -625,7 +602,13 @@ $chat-helper-size: 39px; } } -.info#im-subtitle { +#im-title, #im-subtitle { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +#im-subtitle { margin-top: -2px; } @@ -696,31 +679,6 @@ $chat-helper-size: 39px; } } - @include respond-to(handhelds) { - .pinned-message { - position: absolute !important; - top: 100%; - width: 100% !important; - background: #fff !important; - left: 0; - // border-top: 1px solid #ccc; - max-height: 100% !important; - // height: 100%; - height: 52px; - padding: 1rem; - - &-subtitle { - max-width: 280px; - } - } - - /* .pinned-message, .reply { - &-subtitle { - line-height: 16px !important; - } - } */ - } - .pinned-message, .reply { cursor: pointer; display: flex; @@ -728,10 +686,10 @@ $chat-helper-size: 39px; align-items: center; overflow: hidden; box-sizing: border-box; - width: 187px; margin-right: 1rem; max-height: 35px; position: relative; + user-select: none; /* padding: .25rem; */ &.is-media { @@ -744,10 +702,6 @@ $chat-helper-size: 39px; } } - html.no-touch &:hover { - background-color: var(--color-gray-hover); - } - &-border { height: 2rem; border-radius: 1px; @@ -837,12 +791,9 @@ $chat-helper-size: 39px; } */ } - .pinned-message { - display: none; - - &-close { - visibility: visible !important; - left: -3rem; + .reply { + html.no-touch &:hover { + background-color: var(--color-gray-hover); } } @@ -850,6 +801,28 @@ $chat-helper-size: 39px; flex: 0 0 auto; overflow: visible; + &.is-floating { + position: absolute !important; + top: 100%; + width: 100% !important; + background: #fff !important; + left: 0; + max-height: 100% !important; + height: 52px; + + .pinned-container-close { + position: absolute; + font-size: 1.4rem; + right: 9px; + display: flex; + } + + .pinned-container-wrapper { + padding: 0 1rem; + height: 100%; + } + } + @include respond-to(handhelds) { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15); @@ -865,27 +838,53 @@ $chat-helper-size: 39px; } } + &-content { + width: 100%; + overflow: hidden; + } + &-close, .pinned-audio-ico { font-size: 1.5rem; - position: absolute; display: flex; justify-content: center; - right: 0; + z-index: 1; + flex: 0 0 auto; } &-close { - visibility: hidden; - //left: -3rem; + display: none; + } - @include respond-to(handhelds) { - font-size: 1.4rem; - right: 9px; - left: auto; - visibility: visible; + &-wrapper { + display: flex; + flex: 1 1 auto; + overflow: hidden; + align-items: center; + padding: .25rem; + border-radius: 4px; + + html.no-touch &:hover { + background-color: var(--color-gray-hover); } } } + .pinned-message { + display: none; + width: auto; + + &:not(.is-floating) { + .pinned-message-close { + display: flex; + margin-right: .75rem; + } + } + + &.is-floating .pinned-message-subtitle { + max-width: 280px; + } + } + .pinned-audio { display: flex; flex-direction: column; @@ -893,32 +892,19 @@ $chat-helper-size: 39px; cursor: pointer; //width: 210px; - @include respond-to(handhelds) { - height: 52px; - - padding-left: 58px; - background: #fff; - width: 100%; - position: absolute; - left: 0; - top: 100%; - } - - @include respond-to(not-handhelds) { - padding-left: 2.5rem; - padding-right: 2.5rem; + &:not(.is-floating) { + padding-right: 1.75rem; max-width: 210px; position: relative; } - + + &.is-floating .pinned-audio-ico { + margin-left: -.25rem; + } + &-ico { - left: 0; - right: auto !important; color: #50a2e9; - - @include respond-to(handhelds) { - margin-left: 20px; - } + margin-right: .375rem; &:before { content: $tgico-largeplay;