diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index e0e3b72f..e47a53d4 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -1139,7 +1139,13 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet onAuthorClick = (e: MouseEvent) => { if(this.currentMessageID && this.currentMessageID != Number.MAX_SAFE_INTEGER) { const mid = this.currentMessageID; - this.close(e).then(() => { + this.close(e) + //.then(() => mediaSizes.isMobile ? appSidebarRight.sharedMediaTab.closeBtn.click() : Promise.resolve()) + .then(() => { + if(mediaSizes.isMobile) { + appSidebarRight.sharedMediaTab.closeBtn.click(); + } + const message = appMessagesManager.getMessage(mid); appImManager.setPeer(message.peerID, mid); }); diff --git a/src/components/popupNewMedia.ts b/src/components/popupNewMedia.ts index c605cdd3..1ae66e67 100644 --- a/src/components/popupNewMedia.ts +++ b/src/components/popupNewMedia.ts @@ -6,6 +6,7 @@ import { Layouter, RectPart } from "./groupedLayout"; import InputField from "./inputField"; import { PopupElement } from "./popup"; import { ripple } from "./ripple"; +import Scrollable from "./scrollable"; import { toast } from "./toast"; import { wrapDocument } from "./wrappers"; @@ -19,6 +20,8 @@ type SendFileParams = Partial<{ const MAX_LENGTH_CAPTION = 1024; +// TODO: .gif upload as video + export default class PopupNewMedia extends PopupElement { private btnSend: HTMLElement; private input: HTMLInputElement; @@ -44,13 +47,15 @@ export default class PopupNewMedia extends PopupElement { this.btnSend.addEventListener('click', this.send); this.header.append(this.btnSend); - + this.mediaContainer = document.createElement('div'); this.mediaContainer.classList.add('popup-photo'); - + const scrollable = new Scrollable(null); + scrollable.container.append(this.mediaContainer); + const inputField = InputField('Add a caption...', 'Caption', 'photo-caption', MAX_LENGTH_CAPTION, 80); this.input = inputField.firstElementChild as HTMLInputElement; - this.container.append(this.mediaContainer, inputField); + this.container.append(scrollable.container, inputField); this.attachFiles(files); } diff --git a/src/components/scrollable.ts b/src/components/scrollable.ts index 47bfba73..86b59876 100644 --- a/src/components/scrollable.ts +++ b/src/components/scrollable.ts @@ -518,7 +518,7 @@ export default class Scrollable extends ScrollableBase { } export class ScrollableX extends ScrollableBase { - constructor(public el: HTMLElement, logPrefix = '', public appendTo = el, public onScrollOffset = 300, public splitCount = 15, public container: HTMLElement = document.createElement('div')) { + constructor(el: HTMLElement, logPrefix = '', public appendTo = el, public onScrollOffset = 300, public splitCount = 15, public container: HTMLElement = document.createElement('div')) { super(el, logPrefix, appendTo, container); this.container.classList.add('scrollable-x'); diff --git a/src/components/sidebarRight/index.ts b/src/components/sidebarRight/index.ts index c8301048..9a36e9d5 100644 --- a/src/components/sidebarRight/index.ts +++ b/src/components/sidebarRight/index.ts @@ -109,7 +109,8 @@ export class AppSidebarRight extends SidebarSlider { document.body.classList.toggle(RIGHT_COLUMN_ACTIVE_CLASSNAME, enable); //console.log('sidebar selectTab', enable, willChange); if(mediaSizes.isMobile) { - appImManager._selectTab(active ? 1 : 2); + //appImManager._selectTab(active ? 1 : 2); + appImManager.selectTab(active ? 1 : 2); return new Promise(resolve => { setTimeout(resolve, 250); // delay of slider animation }); diff --git a/src/components/sidebarRight/tabs/pollResults.ts b/src/components/sidebarRight/tabs/pollResults.ts index 8ef18d1f..5b0162b7 100644 --- a/src/components/sidebarRight/tabs/pollResults.ts +++ b/src/components/sidebarRight/tabs/pollResults.ts @@ -10,6 +10,7 @@ import { ripple } from "../../ripple"; export default class AppPollResultsTab implements SliderTab { private container = document.getElementById('poll-results-container') as HTMLDivElement; private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement; + private closeBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement; private resultsDiv = this.contentDiv.firstElementChild as HTMLDivElement; private scrollable: Scrollable; @@ -72,7 +73,9 @@ export default class AppPollResultsTab implements SliderTab { const list = document.createElement('ul'); list.classList.add('poll-results-voters'); - appDialogsManager.setListClickListener(list); + appDialogsManager.setListClickListener(list, () => { + this.closeBtn.click(); + }); list.style.minHeight = Math.min(result.voters, 4) * 50 + 'px'; diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 9c6445d2..28f50bc1 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -147,6 +147,7 @@ export class AppImManager { private mainColumns: HTMLElement; public _selectTab: ReturnType; + public tabID = -1; private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement; public hideRightSidebar = false; @@ -718,7 +719,15 @@ export class AppImManager { public selectTab(id: number) { document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0); + const prevTabID = this.tabID; + this.tabID = id; + if(mediaSizes.isMobile && prevTabID == 2 && id == 1) { + //appSidebarRight.toggleSidebar(false); + document.body.classList.remove(RIGHT_COLUMN_ACTIVE_CLASSNAME); + } + this._selectTab(id, mediaSizes.isMobile); + //document.body.classList.toggle(RIGHT_COLUMN_ACTIVE_CLASSNAME, id == 2); } onDatePick = (timestamp: number) => { diff --git a/src/scss/partials/popups/_mediaAttacher.scss b/src/scss/partials/popups/_mediaAttacher.scss index 6ad1db54..a8a8580f 100644 --- a/src/scss/partials/popups/_mediaAttacher.scss +++ b/src/scss/partials/popups/_mediaAttacher.scss @@ -7,6 +7,8 @@ max-width: 420px; /* padding: 12px 20px 50px; */ padding: 12px 20px 32.5px; + //max-height: unquote('min(640px, 100%)'); + max-height: 100%; &.is-media:not(.is-album) { /* max-height: 425px; */ @@ -45,6 +47,7 @@ } &-header { + flex: 0 0 auto; flex-wrap: wrap; justify-content: space-between; align-items: center; @@ -120,9 +123,14 @@ } } + .scrollable { + position: relative; + } + .input-field { width: 100%; margin-top: 25px; + flex: 0 0 auto; &::placeholder { color: #a2acb4;