New multiselect input animation

src/components/chat/selection.ts

@@ -275,23 +275,34 @@ export default class ChatSelection {
 
     blurActiveElement(); // * for mobile keyboards
 
-    let transform = '';
+    let transform = '', borderRadius = '';
     const forwards = !!this.selectedMids.size || forceSelection;
     if(forwards) {
       const p = this.input.rowsWrapper.parentElement;
-      const widthFrom = p.querySelector('.fake-rows-wrapper').scrollWidth;
+      const fakeSelectionWrapper = p.querySelector('.fake-selection-wrapper');
-      const widthTo = p.querySelector('.fake-selection-wrapper').scrollWidth;
+      const fakeRowsWrapper = p.querySelector('.fake-rows-wrapper');
-      const btnSendWidth = this.input.btnSendContainer.scrollWidth - (.5625 * 16);
+      const fakeSelectionRect = fakeSelectionWrapper.getBoundingClientRect();
+      const fakeRowsRect = fakeRowsWrapper.getBoundingClientRect();
+      const widthFrom = fakeRowsRect.width;
+      const widthTo = fakeSelectionRect.width;
 
       if(widthFrom !== widthTo) {
-        const scale = widthTo / widthFrom;
+        const scale = (widthTo/*  - 8 */) / widthFrom;
-        transform = `translateX(${btnSendWidth * scale}px) scaleX(${scale})`;
+        const initTranslateX = (widthFrom - widthTo) / 2;
+        const needTranslateX = fakeSelectionRect.left - fakeRowsRect.left - initTranslateX;
+        transform = `translateX(${needTranslateX}px) scaleX(${scale})`;
+
+        if(scale < 1) {
+          const br = 12;
+          borderRadius = '' + (br + br * (1 - scale)) + 'px';
+        }
         //scale = widthTo / widthFrom;
       }
     }
 
     SetTransition(this.input.rowsWrapper, 'is-centering', forwards, 200);
     this.input.rowsWrapper.style.transform = transform;
+    this.input.rowsWrapper.style.borderRadius = borderRadius;
     SetTransition(bubblesContainer, 'is-selecting', forwards, 200, () => {
       if(!this.isSelecting) {
         this.selectionInputWrapper.remove();

src/scss/partials/_chat.scss

@@ -612,12 +612,16 @@ $chat-helper-size: 39px;
 	}
 }
 
-.selection-wrapper {
+.selection-wrapper, .fake-selection-wrapper {
 	position: absolute;
 	left: 50%;
 	top: 0;
-	width: 28.75rem;
 	transform: translateX(-50%);
+	width: 28.75rem;
+	max-width: calc(100% - (var(--padding-horizontal) * 2));
+}
+
+.selection-wrapper {
 	border-radius: $border-radius-big;
 	//z-index: 2;
 	box-shadow: none;
@@ -698,22 +702,7 @@ $chat-helper-size: 39px;
 	visibility: hidden;
 }
 
-.fake-rows-wrapper {
+.rows-wrapper, .fake-rows-wrapper {
-	width: calc(100% - var(--chat-input-size) - (var(--padding-horizontal) * 2) - .5625rem);
-}
-
-.fake-selection-wrapper {
-	width: 460px;
-}
-
-.rows-wrapper {
-	transform: scaleX(1);
-	transition: transform .2s, width .2s, max-height .2s, border-bottom-right-radius .1s;
-
-	&:after {
-		transition: transform .1s;
-	}
-
 	.chat-input.type-pinned & {
 		width: 17.125rem;
 	}
@@ -721,6 +710,31 @@ $chat-helper-size: 39px;
 	.chat-input.type-pinned.can-pin & {
 		width: 13.125rem;
 	}
+}
+
+.fake-rows-wrapper {
+	position: absolute;
+	left: var(--padding-horizontal);
+	top: 0;
+	width: calc(100% - var(--chat-input-size) - (var(--padding-horizontal) * 2) - .5625rem);
+}
+
+.rows-wrapper {
+	transform: scaleX(1);
+	transition: transform .2s, width .2s, max-height .2s, border-radius .1s;
+
+	&.is-centered {
+		margin: 0 auto;
+
+		& ~ .fake-rows-wrapper {
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
+
+	&:after {
+		transition: transform .1s;
+	}
 
 	&.is-centering:not(.backwards), &.is-centered {
 		border-bottom-right-radius: 12px;
@@ -730,10 +744,6 @@ $chat-helper-size: 39px;
 		}
 	}
 
-	/* &.is-centered, &.is-centered.is-centering:not(.backwards) {
-		transform: translate3d(calc(((var(--messages-container-width) - var(--chat-input-padding) * 2) - 100%) / 2), 0, 0);
-	} */
-
 	@include respond-to(handhelds) {
 		--padding-vertical: .5px;
 		--padding-horizontal: .5rem;
@@ -970,7 +980,7 @@ $chat-helper-size: 39px;
 
 	&.is-selecting {
 		&:not(.backwards) .is-in .bubble-content-wrapper {
-			transform: translateX(2.5rem);
+			transform: scale(1) translateX(2.5rem);
 		}
 
 		// ! this animation will slow down chat input's animation due to count of elements