From be0e8f545d5da6bc5bc84247086ee3d86a210b58 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 21 Dec 2020 05:11:26 +0200 Subject: [PATCH] Date picker schedule css Improve smoothness of inner chat animation --- src/components/transition.ts | 2 +- src/lib/appManagers/appImManager.ts | 45 +++++++++++++++++----- src/scss/partials/_chat.scss | 47 ++++++++++++++++++++++- src/scss/partials/_chatMarkupTooltip.scss | 2 +- src/scss/partials/_leftSidebar.scss | 4 +- src/scss/partials/popups/_datePicker.scss | 23 ++++++++++- 6 files changed, 107 insertions(+), 16 deletions(-) diff --git a/src/components/transition.ts b/src/components/transition.ts index 84810357..a1f7ff10 100644 --- a/src/components/transition.ts +++ b/src/components/transition.ts @@ -53,7 +53,7 @@ function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight }; } */ -export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigation' | 'zoom-fade'/* | 'counter' */, transitionTime: number, onTransitionEnd?: (id: number) => void) => { +export const TransitionSlider = (content: HTMLElement, type: 'tabs' | 'navigation' | 'zoom-fade' | 'none'/* | 'counter' */, transitionTime: number, onTransitionEnd?: (id: number) => void) => { let animationFunction: TransitionFunction = null; switch(type) { diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index ea262ffb..bd5ac2cf 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -1,6 +1,5 @@ //import apiManager from '../mtproto/apiManager'; import animationIntersector from '../../components/animationIntersector'; -import { horizontalMenu } from '../../components/horizontalMenu'; import appSidebarLeft from "../../components/sidebarLeft"; import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight'; import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes'; @@ -22,13 +21,13 @@ import appStickersManager from './appStickersManager'; import appWebPagesManager from './appWebPagesManager'; import { cancelEvent, getFilesFromEvent, placeCaretAtEnd } from '../../helpers/dom'; import PopupNewMedia from '../../components/popups/newMedia'; -import { TransitionSlider } from '../../components/transition'; import { numberWithCommas } from '../../helpers/number'; import MarkupTooltip from '../../components/chat/markupTooltip'; import { isTouchSupported } from '../../helpers/touchSupport'; import appPollsManager from './appPollsManager'; import SetTransition from '../../components/singleTransition'; import ChatDragAndDrop from '../../components/chat/dragAndDrop'; +import { debounce } from '../../helpers/schedulers'; //console.log('appImManager included33!'); @@ -42,7 +41,7 @@ export class AppImManager { public columnEl = document.getElementById('column-center') as HTMLDivElement; public chatsContainer: HTMLElement; - public chatsSelectTab: ReturnType; + //public chatsSelectTab: ReturnType; public offline = false; public updateStatusInterval = 0; @@ -58,7 +57,9 @@ export class AppImManager { public hideRightSidebar = false; private chats: Chat[] = []; - + private prevTab: HTMLElement; + private chatsSelectTabDebounced: () => void; + public markupTooltip: MarkupTooltip; get myId() { @@ -119,19 +120,19 @@ export class AppImManager { this.chatsContainer = document.createElement('div'); this.chatsContainer.classList.add('chats-container', 'tabs-container'); - this.chatsSelectTab = TransitionSlider(this.chatsContainer, 'navigation', 250, (id) => { + this.columnEl.append(this.chatsContainer); + + this.chatsSelectTabDebounced = debounce(() => { const topbar = this.chat.topbar; if(topbar.pinnedMessage) { // * буду молиться богам, чтобы это ничего не сломало, но это исправляет получение пиннеда после анимации topbar.pinnedMessage.setCorrectIndex(0); } apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId); - }); - - this.columnEl.append(this.chatsContainer); + }, 250, false, true); this.createNewChat(); - this.chatsSelectTab(0); + this.chatsSelectTab(this.chat.container); window.addEventListener('hashchange', (e) => { const hash = location.hash; @@ -169,6 +170,20 @@ export class AppImManager { //apiUpdatesManager.attach(); } + private chatsSelectTab(tab: HTMLElement) { + if(this.prevTab === tab) { + return; + } + + if(this.prevTab) { + this.prevTab.classList.remove('active'); + this.chatsSelectTabDebounced(); + } + + tab.classList.add('active'); + this.prevTab = tab; + } + private init() { document.addEventListener('paste', this.onDocumentPaste, true); @@ -498,9 +513,16 @@ export class AppImManager { return this.setPeer(peerId, lastMsgId); } + // * don't reset peer if returning + if(peerId === chat.peerId && mediaSizes.activeScreen === ScreenSize.mobile && document.body.classList.contains(LEFT_COLUMN_ACTIVE_CLASSNAME)) { + this.selectTab(1); + return false; + } + if(peerId || mediaSizes.activeScreen !== ScreenSize.mobile) { const result = chat.setPeer(peerId, lastMsgId); + // * wait for cached render const promise = result?.cached ? result.promise : Promise.resolve(); if(peerId) { promise.then(() => { @@ -511,6 +533,9 @@ export class AppImManager { this.hideRightSidebar = false; } + setTimeout(() => { + this.chatsSelectTab(this.chat.container); + }, 0); this.selectTab(1); }, 0); }); @@ -537,7 +562,7 @@ export class AppImManager { this.chat.setType(type); } - this.chatsSelectTab(this.chat.container); + //this.chatsSelectTab(this.chat.container); return this.setPeer(peerId, lastMsgId); } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index bb7398f1..d0f3ad6f 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -444,12 +444,57 @@ $chat-helper-size: 39px; } .chat { - display: flex; + display: flex !important; // padding: 200px; width: 100%; align-items: center; //overflow: hidden; flex-direction: column; + //z-index: 1; + + &:not(.active):not(:last-child) { + filter: brightness(.8); + } + + @include respond-to(no-floating-left-sidebar) { + &:not(.active) { + transform: translate3d(calc((100vw - min(calc(100vw * .4), 420px)) * -.25), 0, 0); + + &:last-child { // * 420px - max left sidebar width, .4 - left sidebar width percents + transform: translate3d(calc(100vw - min(calc(100vw * .4), 420px)), 0, 0); + } + } + } + + @include respond-to(large-screens) { + &:not(.active) { + transform: translate3d(calc((#{$large-screen} - var(--right-column-width)) * -.25), 0, 0); + + &:last-child { + transform: translate3d(calc(#{$large-screen} - var(--right-column-width)), 0, 0); + } + } + } + + @include respond-to(only-medium-screens) { + &:not(.active) { + transform: translate3d(-25vw, 0, 0); + + &:last-child { + transform: translate3d(75vw, 0, 0); + } + } + } + + @include respond-to(until-floating-left-sidebar) { + &:not(.active) { + transform: translate3d(-25vw, 0, 0); + + &:last-child { + transform: translate3d(100vw, 0, 0); + } + } + } &-background { overflow: hidden; diff --git a/src/scss/partials/_chatMarkupTooltip.scss b/src/scss/partials/_chatMarkupTooltip.scss index 60481f79..8500ec01 100644 --- a/src/scss/partials/_chatMarkupTooltip.scss +++ b/src/scss/partials/_chatMarkupTooltip.scss @@ -21,7 +21,7 @@ top: 0; display: flex; align-items: center; - justify-content: start; + justify-content: flex-start; //width: 420px; width: #{$widthRegular + $widthLink}; height: 100%; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index b825be78..2700600b 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -62,7 +62,7 @@ border-bottom: none; ul { - justify-content: start; + justify-content: flex-start; z-index: 0; } @@ -552,7 +552,7 @@ p { height: unset; - justify-content: start; + justify-content: flex-start; } p:last-child { diff --git a/src/scss/partials/popups/_datePicker.scss b/src/scss/partials/popups/_datePicker.scss index 6ecde0ea..205fb867 100644 --- a/src/scss/partials/popups/_datePicker.scss +++ b/src/scss/partials/popups/_datePicker.scss @@ -1,5 +1,6 @@ .popup-date-picker { $parent: ".popup"; + user-select: none; #{$parent} { &-container { @@ -114,6 +115,9 @@ .popup-schedule { .popup-header { justify-content: space-between; + margin-top: 5px; + margin-bottom: 17px; + margin-left: 0; .btn-icon { font-size: 22px; @@ -127,10 +131,15 @@ .popup-container { min-width: 420px; width: 420px; + padding: 4px 16px 16px 16px; } .date-picker { &-month { + margin-right: -20px; + margin-left: 2px; + width: unset; + &-title { font-weight: 500; font-size: 20px; @@ -138,8 +147,12 @@ } .btn-icon { + justify-self: auto; font-weight: 500; - font-size: 15px; + font-size: 14px; + width: 36px; + height: 36px; + margin-top: -4px; } &-date:disabled { @@ -153,6 +166,10 @@ } } + &-months { + margin-bottom: 14px; + } + &-time { display: flex; justify-content: center; @@ -182,4 +199,8 @@ } } } + + .btn-primary { + font-weight: normal; + } } \ No newline at end of file