Date picker schedule css
Improve smoothness of inner chat animation
This commit is contained in:
Eduard Kuzmenko
parent
cbd9c28d3e
commit
be0e8f545d
@ -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) {
|
||||
|
||||
@ -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<typeof horizontalMenu>;
|
||||
//public chatsSelectTab: ReturnType<typeof horizontalMenu>;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user