From d434df8a3bf0660d6b4a0e90eb41844ce7f23130 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sat, 2 Jan 2021 14:34:16 +0400 Subject: [PATCH] Fix chatlist search horizontal menu Fix sticky horizontal menu in shared media --- src/components/appSearchSuper..ts | 2 +- src/components/emoticonsDropdown/index.ts | 4 +++ src/components/horizontalMenu.ts | 8 ++++- src/components/sidebarLeft/index.ts | 1 + src/lib/appManagers/appDialogsManager.ts | 4 +-- src/scss/partials/_leftSidebar.scss | 8 ++--- src/scss/partials/_rightSidebar.scss | 39 +++++++++++------------ 7 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src/components/appSearchSuper..ts b/src/components/appSearchSuper..ts index 9812a916..fb6fc3ae 100644 --- a/src/components/appSearchSuper..ts +++ b/src/components/appSearchSuper..ts @@ -167,7 +167,7 @@ export default class AppSearchSuper { }, () => { this.scrollable.onScroll(); this.onTransitionEnd(); - }); + }, undefined, navScrollable); this.tabs.inputMessagesFilterPhotoVideo.addEventListener('click', (e) => { const target = findUpClassName(e.target as HTMLDivElement, 'grid-item'); diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index f8ce6c66..cf08a110 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/src/components/emoticonsDropdown/index.ts @@ -343,6 +343,10 @@ export class EmoticonsDropdown { const which = whichChild(target); + /* if(menuScroll) { + menuScroll.scrollIntoView(target, false, 0); + } */ + if(!setActive(which)) { return; } diff --git a/src/components/horizontalMenu.ts b/src/components/horizontalMenu.ts index 4f0b97fc..5f4af41b 100644 --- a/src/components/horizontalMenu.ts +++ b/src/components/horizontalMenu.ts @@ -1,7 +1,8 @@ import { findUpTag, whichChild } from "../helpers/dom"; import { TransitionSlider } from "./transition"; +import { ScrollableX } from "./scrollable"; -export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250) { +export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250, scrollableX?: ScrollableX) { const selectTab = TransitionSlider(content, tabs || content.dataset.slider == 'tabs' ? 'tabs' : 'navigation', transitionTime, onTransitionEnd); if(tabs) { @@ -19,6 +20,11 @@ export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick? const tabContent = content.children[id] as HTMLDivElement; if(onClick) onClick(id, tabContent); + + if(scrollableX) { + scrollableX.scrollIntoView(target.parentElement.children[id] as HTMLElement, true, transitionTime); + } + if(target.classList.contains('active') || id === selectTab.prevId) { return false; } diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 1c015d76..99850dc9 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -190,6 +190,7 @@ export class AppSidebarLeft extends SidebarSlider { name: 'Voice' }], scrollable, this.searchGroups, true); + searchContainer.prepend(searchSuper.nav.parentElement.parentElement); scrollable.container.append(searchSuper.container); const resetSearch = () => { diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 15dfdfd1..15a9a498 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -432,8 +432,6 @@ export class AppDialogsManager { id += 1; } */ - foldersScrollable.scrollIntoView(this.folders.menu.firstElementChild.children[id] as HTMLElement, true, 250); - id = +tabContent.dataset.filterId || 0; if(this.filterId == id) return; @@ -448,7 +446,7 @@ export class AppDialogsManager { this.chatLists[folderId].innerHTML = ''; } } - }); + }, undefined, foldersScrollable); //selectTab(0); (this.folders.menu.firstElementChild.firstElementChild as HTMLElement).click(); diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 6688ba45..235ad997 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -163,12 +163,10 @@ } .search-super-tabs-scrollable { - position: sticky; - top: 0; - z-index: 2; + position: relative !important; - .menu-horizontal ul { - justify-content: space-around; + .menu-horizontal li { + flex: 1 0 auto !important; } } } diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index bf1992f0..1c5e86f0 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -272,12 +272,6 @@ &-tabs { //margin-top: 36px; - position: -webkit-sticky !important; - position: sticky !important; - top: 0; - z-index: 2; - background-color: #fff; - i { padding-right: 1.5rem !important; margin-left: -.75rem !important; @@ -286,6 +280,11 @@ &-tabs-scrollable { box-shadow: none !important; + position: -webkit-sticky !important; + position: sticky !important; + top: 0; + z-index: 2; + background-color: #fff; .scrollable { position: relative; @@ -495,28 +494,28 @@ &.sender { margin-top: 2px; + } } - } - .search-super-month-items { - padding: 0 24px 15px 15px; - - @include respond-to(handhelds) { - padding: 0 16px 15px 7px; + .search-super-month-items { + padding: 0 24px 15px 15px; + + @include respond-to(handhelds) { + padding: 0 16px 15px 7px; + } } - } -} + } -&-content-music, &-content-voice { + &-content-music, &-content-voice { - .search-super-month-items { - padding: 20px 15px 0px 20px; + .search-super-month-items { + padding: 20px 15px 0px 20px; - @include respond-to(handhelds) { - padding: 20px 15px 0px 12px; + @include respond-to(handhelds) { + padding: 20px 15px 0px 12px; + } } - } .preloader-container { .preloader-circular {