r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New multiselect input animation

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-03-20 18:55:03 +04:00
parent 2ff7c7050f
commit 3b3cf54724
2 changed files with 50 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/chat/selection.ts
View File

@ -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();

56
src/scss/partials/_chat.scss
View File

@ -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 {
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;
}
.rows-wrapper, .fake-rows-wrapper {
.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