diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index 8e674089..aa0c87f4 100644 --- a/src/components/chat/selection.ts +++ b/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 widthTo = p.querySelector('.fake-selection-wrapper').scrollWidth; - const btnSendWidth = this.input.btnSendContainer.scrollWidth - (.5625 * 16); + const fakeSelectionWrapper = p.querySelector('.fake-selection-wrapper'); + const fakeRowsWrapper = p.querySelector('.fake-rows-wrapper'); + const fakeSelectionRect = fakeSelectionWrapper.getBoundingClientRect(); + const fakeRowsRect = fakeRowsWrapper.getBoundingClientRect(); + const widthFrom = fakeRowsRect.width; + const widthTo = fakeSelectionRect.width; if(widthFrom !== widthTo) { - const scale = widthTo / widthFrom; - transform = `translateX(${btnSendWidth * scale}px) scaleX(${scale})`; + const scale = (widthTo/* - 8 */) / widthFrom; + 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(); diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 09f3cf10..2049629a 100644 --- a/src/scss/partials/_chat.scss +++ b/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,28 +702,38 @@ $chat-helper-size: 39px; visibility: hidden; } -.fake-rows-wrapper { - width: calc(100% - var(--chat-input-size) - (var(--padding-horizontal) * 2) - .5625rem); +.rows-wrapper, .fake-rows-wrapper { + .chat-input.type-pinned & { + width: 17.125rem; + } + + .chat-input.type-pinned.can-pin & { + width: 13.125rem; + } } -.fake-selection-wrapper { - width: 460px; +.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-bottom-right-radius .1s; + transition: transform .2s, width .2s, max-height .2s, border-radius .1s; - &:after { - transition: transform .1s; - } + &.is-centered { + margin: 0 auto; - .chat-input.type-pinned & { - width: 17.125rem; + & ~ .fake-rows-wrapper { + left: 50%; + transform: translateX(-50%); + } } - .chat-input.type-pinned.can-pin & { - width: 13.125rem; + &:after { + transition: transform .1s; } &.is-centering:not(.backwards), &.is-centered { @@ -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