From 43ad1c2a9d7690062b1bc677d8a3dbf43057bf9f Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Fri, 20 Aug 2021 16:55:23 +0300
Subject: [PATCH] Fix transitions

---
 src/components/appSearchSuper..ts        |  2 +-
 src/components/chat/chat.ts              |  2 +-
 src/components/sliderTab.ts              |  2 +-
 src/index.hbs                            | 24 +++++++++----------
 src/lib/appManagers/appDialogsManager.ts |  2 +-
 src/scss/partials/_audio.scss            | 13 ++++++----
 src/scss/partials/_chat.scss             | 30 ++++++++++++++----------
 src/scss/partials/_chatBubble.scss       | 16 ++++++++++++-
 src/scss/partials/_checkbox.scss         | 24 ++++++++++++-------
 src/scss/partials/_emojiDropdown.scss    |  2 +-
 src/scss/partials/_slider.scss           | 26 ++++++++++++++++----
 src/scss/partials/pages/_pages.scss      |  2 +-
 12 files changed, 96 insertions(+), 49 deletions(-)

diff --git a/src/components/appSearchSuper..ts b/src/components/appSearchSuper..ts
index ee2e6343..1f8792f6 100644
--- a/src/components/appSearchSuper..ts
+++ b/src/components/appSearchSuper..ts
@@ -166,7 +166,7 @@ export default class AppSearchSuper {
 
     for(const mediaTab of this.mediaTabs) {
       const container = document.createElement('div');
-      container.classList.add('search-super-container-' + mediaTab.type);
+      container.classList.add('search-super-container-' + mediaTab.type, 'tabs-tab');
 
       const content = document.createElement('div');
       content.classList.add('search-super-content-' + mediaTab.type);
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
index c76d9606..5f86f789 100644
--- a/src/components/chat/chat.ts
+++ b/src/components/chat/chat.ts
@@ -93,7 +93,7 @@ export default class Chat extends EventListenerBase<{
     super();
 
     this.container = document.createElement('div');
-    this.container.classList.add('chat');
+    this.container.classList.add('chat', 'tabs-tab');
 
     this.backgroundEl = document.createElement('div');
     this.backgroundEl.classList.add('chat-background');
diff --git a/src/components/sliderTab.ts b/src/components/sliderTab.ts
index f5c66c41..fff92de1 100644
--- a/src/components/sliderTab.ts
+++ b/src/components/sliderTab.ts
@@ -45,7 +45,7 @@ export default class SliderSuperTab implements SliderTab {
     this.destroyable = destroyable;
 
     this.container = document.createElement('div');
-    this.container.classList.add('sidebar-slider-item');
+    this.container.classList.add('tabs-tab', 'sidebar-slider-item');
 
     // * Header
     this.header = document.createElement('div');
diff --git a/src/index.hbs b/src/index.hbs
index 3eb40862..30ee2a61 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -39,7 +39,7 @@
   <div class="whole" id="auth-pages" style="display: none;">
     <div class="scrollable scrollable-y">
       <div class="tabs-container auth-pages__container" data-animation="tabs">
-        <div class="page-sign">
+        <div class="tabs-tab page-sign">
           <div class="container center-align">
             <div class="auth-image">
               <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
@@ -48,12 +48,12 @@
             </div>
           </div>
         </div>
-        <div class="page-signQR">
+        <div class="tabs-tab page-signQR">
           <div class="container center-align">
             <div class="auth-image"></div>
           </div>
         </div>
-        <div class="page-authCode">
+        <div class="tabs-tab page-authCode">
           <div class="container center-align">
             <div class="auth-image"></div>
             <div class="phone-wrapper">
@@ -64,8 +64,8 @@
             <div class="input-wrapper"></div>
           </div>
         </div>
-        <div class="page-password"></div>
-        <div class="page-signUp"></div>
+        <div class="tabs-tab page-password"></div>
+        <div class="tabs-tab page-signUp"></div>
       </div>
     </div>
   </div>
@@ -86,9 +86,9 @@
       </defs>
     </svg>
     <div id="main-columns" class="tabs-container" data-animation="navigation">
-      <div class="chatlist-container sidebar sidebar-left main-column" id="column-left">
+      <div class="tabs-tab chatlist-container sidebar sidebar-left main-column" id="column-left">
         <div class="sidebar-slider tabs-container">
-          <div class="sidebar-slider-item item-main">
+          <div class="tabs-tab sidebar-slider-item item-main">
             <div class="sidebar-header">
               <div class="sidebar-header__btn-container">
                 <div class="animated-menu-icon"></div>
@@ -107,15 +107,15 @@
           </div>
         </div>
       </div>
-      <div class="main-column" id="column-center"></div>
-      <div class="sidebar sidebar-right main-column" id="column-right">
+      <div class="tabs-tab main-column" id="column-center"></div>
+      <div class="tabs-tab sidebar sidebar-right main-column" id="column-right">
         <div class="sidebar-content sidebar-slider tabs-container"></div>
       </div>
     </div>
     <div class="emoji-dropdown" id="emoji-dropdown" style="display: none;">
       <div class="emoji-container">
         <div class="tabs-container">
-          <div class="emoji-padding">
+          <div class="tabs-tab emoji-padding">
             <nav class="menu-horizontal-div no-stripe">
               <button class="menu-horizontal-div-item active btn-icon tgico-recent rp"></button>
               <button class="menu-horizontal-div-item btn-icon tgico-smile rp"></button>
@@ -129,7 +129,7 @@
             </nav>
             <div class="emoticons-content" id="content-emoji"></div>
           </div>
-          <div class="stickers-padding">
+          <div class="tabs-tab stickers-padding">
             <div class="menu-wrapper">
               <nav class="menu-horizontal-div no-stripe justify-start">
                 <button class="menu-horizontal-div-item btn-icon tgico-recent active"></button>
@@ -137,7 +137,7 @@
             </div>
             <div class="emoticons-content" id="content-stickers"></div>
           </div>
-          <div class="gifs-padding">
+          <div class="tabs-tab gifs-padding">
             <div class="emoticons-content" id="content-gifs">
               <div class="gifs-masonry"></div>
             </div>
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts
index 7e478f8b..803622b4 100644
--- a/src/lib/appManagers/appDialogsManager.ts
+++ b/src/lib/appManagers/appDialogsManager.ts
@@ -629,7 +629,7 @@ export class AppDialogsManager {
     const ul = this.createChatList();
     const scrollable = this.generateScrollable(ul, filter.id);
 
-    scrollable.container.classList.add('chatlist-parts');
+    scrollable.container.classList.add('tabs-tab', 'chatlist-parts');
 
     /* const parts = document.createElement('div');
     parts.classList.add('chatlist-parts'); */
diff --git a/src/scss/partials/_audio.scss b/src/scss/partials/_audio.scss
index 2c03de3c..6356f246 100644
--- a/src/scss/partials/_audio.scss
+++ b/src/scss/partials/_audio.scss
@@ -24,12 +24,19 @@
 
   &-toggle {
     transform: rotate(-119deg);
-    transition: transform .25s;
+    
+    @include animation-level(2) {
+      transition: transform .25s ease-in-out;
+    }
 
     .part {
       position: absolute;
       background-color: white;
 
+      @include animation-level(2) {
+        transition: clip-path .25s ease-in-out;
+      }
+
       @include respond-to(not-handhelds) {
         height: 140px;
         width: 140px;
@@ -177,10 +184,6 @@
           56.87342% 42.46916%
         );
       }
-
-      &.one, &.two {
-        transition: clip-path .25s;
-      }
     }
   }
 
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index d5dcfda2..52030c97 100644
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@@ -34,8 +34,8 @@ $chat-helper-size: 36px;
 		--bottom: var(--padding-bottom);
 	} */
 
-	body.animation-level-0 & {
-		transition: none;
+	@include animation-level(0) {
+		transition: none !important;
 	}
 
 	/* // * for no ESG top
@@ -532,6 +532,7 @@ $chat-helper-size: 36px;
 	//overflow: hidden;
 	flex-direction: column;
 	//z-index: 1;
+	transition: transform var(--tabs-transition), filter var(--tabs-transition);
 
 	@include animation-level(0) {
 		transition: none !important;
@@ -988,9 +989,9 @@ $chat-helper-size: 36px;
 
 	transform: translateY(var(--translateY));
 	transition: transform var(--transition-standard-out);
-
-	body.animation-level-0 & {
-		transition: none;
+	
+	@include animation-level(0) {
+		transition: none !important;
 	}
 
 	/* html.is-safari & > .scrollable {
@@ -1080,8 +1081,11 @@ $chat-helper-size: 36px;
 				cursor: pointer;
 				//--translateY: 0;
 				opacity: 1;
-				transition: opacity var(--layer-transition), visibility 0s 0s !important;
 				visibility: visible;
+				
+				@include animation-level(2) {
+					transition: opacity var(--layer-transition), visibility 0s 0s !important;
+				}
 
 				/* &.is-broadcast {
 					--translateY: 79px !important;
@@ -1108,14 +1112,13 @@ $chat-helper-size: 36px;
 	max-width: var(--messages-container-width);
 
 	//padding-top: 10000px;
-
 	transition: transform var(--transition-standard-out);
 	transform: translateY(0);
 	/* transition: margin-top var(--layer-transition);
 	transition-delay: .2s; */
-
-	body.animation-level-0 & {
-		transition: none;
+	
+	@include animation-level(0) {
+		transition: none !important;
 	}
 
 	@include respond-to(medium-screens) {
@@ -1171,8 +1174,11 @@ $chat-helper-size: 36px;
 		opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
 
 		html.is-safari & {
-			transition: transform var(--transition-standard-in);
 			transform: translateY(calc(var(--translateY) * -1));
+			
+			@include animation-level(2) {
+				transition: transform var(--transition-standard-in);
+			}
 		}
 	}
 }
@@ -1201,7 +1207,7 @@ $chat-helper-size: 36px;
 	//transition: opacity var(--layer-transition);
 	transform: none !important;
 
-	body.animation-level-0 & {
+	@include animation-level(0) {
 		transition: none !important;
 	}
 
diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 70ea2fc1..e1d4ab9f 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -324,6 +324,9 @@ $bubble-margin: .25rem;
 
     html.no-touch & {
       opacity: 0;
+    }
+
+    html.no-touch body.animation-level-2 & {
       transition: opacity .2s ease-in-out;
     }
   }
@@ -658,6 +661,10 @@ $bubble-margin: .25rem;
     position: absolute;
     overflow: hidden;
 
+    @include animation-level(0) {
+      transition: none !important;
+    }
+
     /* .bubbles.is-selecting & {
       -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
     } */
@@ -668,6 +675,10 @@ $bubble-margin: .25rem;
 
     &-media { // * fix overflow for handhelds
       border-radius: inherit;
+
+      @include animation-level(0) {
+        transition: none !important;
+      }
     }
 
     .bubble-select-checkbox {
@@ -1968,8 +1979,11 @@ $bubble-margin: .25rem;
 
         //@include respond-to(no-floating-left-sidebar) {
           body.is-right-column-shown & {
-            transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
             transform: scale(1) translateX(0);
+            
+            @include animation-level(2) {
+              transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
+            }
   
             &.zoom-fade {
               transform: scale3d(.8, .8, 1) translateX(0);
diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss
index 73942c13..c9986a4d 100644
--- a/src/scss/partials/_checkbox.scss
+++ b/src/scss/partials/_checkbox.scss
@@ -197,17 +197,16 @@
       width: var(--size);
       height: var(--size);
       transform: translateY(-50%);
-
-      @include animation-level(0) {
-        transition: none;
-      }
     }
 
     &::before {
       border: 2px solid var(--secondary-text-color);
       border-radius: 50%;
       opacity: 1;
-      transition: border-color .1s ease, opacity .1s ease;
+
+      @include animation-level(2) {
+        transition: border-color .1s ease, opacity .1s ease;
+      }
     }
 
     &::after {
@@ -218,7 +217,10 @@
       background: var(--primary-color);
       transform: translateY(-50%) scale(0);
       transform-origin: center;
-      transition: transform .1s ease;
+
+      @include animation-level(2) {
+        transition: transform .1s ease;
+      }
     }
 
     /* &-subtitle {
@@ -329,19 +331,25 @@
     position: relative;
     display: flex;
     align-items: center;
-    transition: background-color .1s;
     margin: 0 var(--offset);
+    
+    @include animation-level(2) {
+      transition: background-color .1s;
+    }
 
     &:before {
       width: 1.25rem;
       height: 1.25rem;
       border: 2px solid var(--secondary-color);
-      transition: border-color .1s, transform .1s;
       background-color: var(--surface-color);
       content: " ";
       transform: translateX(calc(var(--offset) * -1));
       border-radius: 50%;
       position: absolute;
+      
+      @include animation-level(2) {
+        transition: border-color .1s, transform .1s;
+      }
     }
   }
 
diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss
index 881aaf62..cc920903 100644
--- a/src/scss/partials/_emojiDropdown.scss
+++ b/src/scss/partials/_emojiDropdown.scss
@@ -97,7 +97,7 @@
 			}
 		}
 		
-		> div {
+		.tabs-tab {
 			min-height: 100%;
 			/* display: flex; */
 			flex-direction: column;
diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss
index 89de46c8..5140c3f9 100644
--- a/src/scss/partials/_slider.scss
+++ b/src/scss/partials/_slider.scss
@@ -120,7 +120,7 @@
   //   transition: .3s transform;
   // }
   
-  > div {
+  .tabs-tab {
     // * can't define these rules because of old firefox, though they don't work
     //height: 100%;
     //max-height: 100%;
@@ -129,11 +129,9 @@
     
     display: none;
     flex-direction: column;
-    position: relative;
     grid-row-start: 1;
     grid-column-start: 1;
     background-color: var(--background-color);
-    //z-index: 1;
 
     body.animation-level-0 & {
       transition: none !important;
@@ -183,12 +181,30 @@
     }
   } */
   
-  &[data-animation="tabs"] > div {
+  &[data-animation="tabs"] .tabs-tab {
     transition: transform var(--tabs-transition);
   }
 
-  &[data-animation="navigation"] > div {
+  /* &[data-animation="navigation"] .tabs-tab {
     transition: transform var(--tabs-transition), filter var(--tabs-transition);
+  } */
+
+  &[data-animation="navigation"] {
+    /* .tabs-tab {
+      transition: transform var(--tabs-transition), filter var(--tabs-transition);
+    } */
+
+    &.animating {
+      .tabs-tab {
+        transition: transform var(--transition-standard-in), filter var(--transition-standard-in);
+      }
+
+      &.backwards {
+        .tabs-tab {
+          transition: transform var(--transition-standard-out), filter var(--transition-standard-out);
+        }
+      }
+    }
   }
 }
 
diff --git a/src/scss/partials/pages/_pages.scss b/src/scss/partials/pages/_pages.scss
index 4a4fc221..d5310727 100644
--- a/src/scss/partials/pages/_pages.scss
+++ b/src/scss/partials/pages/_pages.scss
@@ -85,7 +85,7 @@
       }
     }
 
-    > div {
+    .tabs-tab {
       /* justify-content: center; */
       /* &.active {
         flex-direction: row;