Date picker schedule css

Improve smoothness of inner chat animation

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) {

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<typeof horizontalMenu>;
+  //public chatsSelectTab: ReturnType<typeof horizontalMenu>;
 
   public offline = false;
   public updateStatusInterval = 0;
@@ -58,6 +57,8 @@ export class AppImManager {
   public hideRightSidebar = false;
   
   private chats: Chat[] = [];
+  private prevTab: HTMLElement;
+  private chatsSelectTabDebounced: () => void;
   
   public markupTooltip: MarkupTooltip;
 
@@ -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);
   }

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;

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%;

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 {

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;
+  }
 }