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

Refactor chat input animations

master
morethanwords 3 years ago
parent
cc8b18ccbe
commit
71d7495e68
3 changed files with 248 additions and 299 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      src/components/chat/input.ts
  2. 33
      src/components/chat/selection.ts
  3. 328
      src/scss/partials/_chat.scss

84
src/components/chat/input.ts
Unescape View File

@ -194,18 +194,15 @@ export default class ChatInput { @@ -194,18 +194,15 @@ export default class ChatInput {
private saveDraftDebounced: () => void;
private fakeRowsWrapper: HTMLDivElement;
private fakePinnedControlBtn: HTMLElement;
private previousQuery: string;
private releaseMediaPlayback: () => void;
private botStartBtn: HTMLButtonElement;
omgContainer: HTMLDivElement;
private fakeBotStartBtn: HTMLElement;
private rowsWrapperWrapper: HTMLDivElement;
private botStartContainer: HTMLElement;
fakeSelectionWrapper: HTMLDivElement;
private controlContainer: HTMLElement;
private fakeSelectionWrapper: HTMLDivElement;
private fakeWrapperTo: HTMLElement;
@ -331,6 +328,10 @@ export default class ChatInput { @@ -331,6 +328,10 @@ export default class ChatInput {
setScrollTopTimeout = 0;
}, 0);
}); */
const c = this.controlContainer = document.createElement('div');
c.classList.add('chat-input-control', 'chat-input-wrapper');
this.inputContainer.append(c);
}
public constructPeerHelpers() {
@ -729,9 +730,8 @@ export default class ChatInput { @@ -729,9 +730,8 @@ export default class ChatInput {
attachClickEvent(this.btnCancelRecord, this.onCancelRecordClick, {listenerSetter: this.listenerSetter});
this.recorder.onstop = () => {
this.recording = false;
this.chatInput.classList.remove('is-recording', 'is-locked');
this.updateSendBtn();
this.setRecording(false);
this.chatInput.classList.remove('is-locked');
this.recordRippleEl.style.transform = '';
};
@ -794,30 +794,12 @@ export default class ChatInput { @@ -794,30 +794,12 @@ export default class ChatInput {
this.botStartBtn = Button('btn-primary btn-transparent text-bold chat-input-control-button');
this.botStartBtn.append(i18n('BotStart'));
const c = this.botStartContainer = document.createElement('div');
c.classList.add('chat-input-control', 'chat-input-wrapper');
c.append(this.botStartBtn);
this.inputContainer.append(c);
// this.botStartContainer.classList.add('hide');
// this.startParam = '123';
}
private constructPinnedContainer() {
const container = document.createElement('div');
container.classList.add('pinned-container');
return container;
this.controlContainer.append(this.botStartBtn);
}
public constructPinnedHelpers() {
const container = this.constructPinnedContainer();
this.pinnedControlBtn = Button('btn-primary btn-transparent text-bold pinned-container-button', {icon: 'unpin'});
container.append(this.pinnedControlBtn);
const fakeContainer = container.cloneNode(true);
this.fakePinnedControlBtn = fakeContainer.firstChild as HTMLElement;
this.fakeRowsWrapper.append(fakeContainer);
this.pinnedControlBtn = Button('btn-primary btn-transparent text-bold chat-input-control-button', {icon: 'unpin'});
this.controlContainer.append(this.pinnedControlBtn);
this.listenerSetter.add(this.pinnedControlBtn)('click', () => {
const peerId = this.chat.peerId;
@ -833,13 +815,10 @@ export default class ChatInput { @@ -833,13 +815,10 @@ export default class ChatInput {
});
});
this.rowsWrapper.append(container);
this.chatInput.classList.add('type-pinned');
this.rowsWrapper.classList.add('is-centered');
}
public center() {
public center(animate = false) {
const neededFakeContainer = this.getNeededFakeContainer();
if(!neededFakeContainer && !this.inputContainer.classList.contains('is-centering')) {
return;
@ -882,7 +861,7 @@ export default class ChatInput { @@ -882,7 +861,7 @@ export default class ChatInput {
this.fakeWrapperTo = neededFakeContainer;
const duration = 200;
const duration = animate ? 200 : 0;
SetTransition(this.inputContainer, 'is-centering', forwards, duration);
SetTransition(this.rowsWrapperWrapper, 'is-centering-to-control', !!(forwards && neededFakeContainer && neededFakeContainer.classList.contains('chat-input-control')), duration);
this.rowsWrapper.style.transform = transform;
@ -906,8 +885,8 @@ export default class ChatInput { @@ -906,8 +885,8 @@ export default class ChatInput {
public getNeededFakeContainer() {
if(this.chat.selection.isSelecting) {
return this.fakeSelectionWrapper;
} else if(this.startParam || !this.chat.canSend()) {
return this.botStartContainer;
} else if(this.startParam || !this.chat.canSend() || this.chat.type === 'pinned') {
return this.controlContainer;
}
}
@ -1125,29 +1104,27 @@ export default class ChatInput { @@ -1125,29 +1104,27 @@ export default class ChatInput {
sendMenu.setPeerId(peerId);
}
this.center();
if(this.messageInput) {
this.updateMessageInput();
} else if(this.pinnedControlBtn) {
if(this.appPeersManager.canPinMessage(this.chat.peerId)) {
this.pinnedControlBtn.append(i18n('Chat.Input.UnpinAll'));
this.fakePinnedControlBtn.append(i18n('Chat.Input.UnpinAll'));
} else {
this.pinnedControlBtn.append(i18n('Chat.Pinned.DontShow'));
this.fakePinnedControlBtn.append(i18n('Chat.Pinned.DontShow'));
}
this.pinnedControlBtn.append(i18n(this.appPeersManager.canPinMessage(this.chat.peerId) ? 'Chat.Input.UnpinAll' : 'Chat.Pinned.DontShow'));
}
this.center();
}
public updateMessageInput() {
const {chatInput, attachMenu, messageInput} = this;
const {peerId, threadId} = this.chat;
const canWrite = this.chat.canSend();
const isHidden = chatInput.classList.contains('is-hidden');
const willBeHidden = !canWrite;
if(isHidden !== willBeHidden) {
chatInput.classList.add('no-transition');
chatInput.classList.toggle('is-hidden', !canWrite);
void chatInput.offsetLeft; // reflow
chatInput.classList.remove('no-transition');
}
const i = I18n.weakMap.get(messageInput) as I18n.IntlElement;
if(i) {
@ -1758,6 +1735,16 @@ export default class ChatInput { @@ -1758,6 +1735,16 @@ export default class ChatInput {
return foundHelper;
}
private setRecording(value: boolean) {
if(this.recording === value) {
return;
}
SetTransition(this.chatInput, 'is-recording', value, 200);
this.recording = value;
this.updateSendBtn();
}
private onBtnSendClick = (e: Event) => {
cancelEvent(e);
@ -1784,9 +1771,7 @@ export default class ChatInput { @@ -1784,9 +1771,7 @@ export default class ChatInput {
this.releaseMediaPlayback = appMediaPlaybackController.setSingleMedia();
this.recordCanceled = false;
this.chatInput.classList.add('is-recording');
this.recording = true;
this.updateSendBtn();
this.setRecording(true);
opusDecodeController.setKeepAlive(true);
const showDiscardPopup = () => {
@ -1880,7 +1865,8 @@ export default class ChatInput { @@ -1880,7 +1865,8 @@ export default class ChatInput {
break;
}
this.chatInput.classList.remove('is-recording', 'is-locked');
this.setRecording(false);
this.chatInput.classList.remove('is-locked');
});
}
};

33
src/components/chat/selection.ts
Unescape View File

@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import type { AppMessagesManager, MessagesStorage } from "../../lib/appManagers/appMessagesManager";
import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
import type ChatBubbles from "./bubbles";
import type ChatInput from "./input";
import type Chat from "./chat";
@ -28,7 +28,6 @@ import cancelSelection from "../../helpers/dom/cancelSelection"; @@ -28,7 +28,6 @@ import cancelSelection from "../../helpers/dom/cancelSelection";
import getSelectedText from "../../helpers/dom/getSelectedText";
import rootScope from "../../lib/rootScope";
import { safeAssign } from "../../helpers/object";
import { fastRaf } from "../../helpers/schedulers";
import replaceContent from "../../helpers/dom/replaceContent";
import AppSearchSuper from "../appSearchSuper.";
import isInDOM from "../../helpers/dom/isInDOM";
@ -54,7 +53,7 @@ class AppSelection { @@ -54,7 +53,7 @@ class AppSelection {
protected isScheduled: boolean;
protected listenElement: HTMLElement;
protected onToggleSelection: (forwards: boolean) => void;
protected onToggleSelection: (forwards: boolean, animate: boolean) => void;
protected onUpdateContainer: (cantForward: boolean, cantDelete: boolean, cantSend: boolean) => void;
protected onCancelSelection: () => void;
protected toggleByMid: (peerId: PeerId, mid: number) => void;
@ -70,6 +69,8 @@ class AppSelection { @@ -70,6 +69,8 @@ class AppSelection {
protected lookupBetweenParentClassName: string;
protected lookupBetweenElementsQuery: string;
protected doNotAnimate: boolean;
constructor(options: {
appMessagesManager: AppMessagesManager,
listenElement: HTMLElement,
@ -386,7 +387,7 @@ class AppSelection { @@ -386,7 +387,7 @@ class AppSelection {
blurActiveElement();
const forwards = !!size || forceSelection;
this.onToggleSelection && this.onToggleSelection(forwards);
this.onToggleSelection && this.onToggleSelection(forwards, !this.doNotAnimate);
if(!IS_MOBILE_SAFARI) {
if(forwards) {
@ -408,16 +409,20 @@ class AppSelection { @@ -408,16 +409,20 @@ class AppSelection {
return true;
}
public cancelSelection = () => {
public cancelSelection = (doNotAnimate?: boolean) => {
if(doNotAnimate) this.doNotAnimate = true;
this.onCancelSelection && this.onCancelSelection();
this.selectedMids.clear();
this.toggleSelection();
cancelSelection();
if(doNotAnimate) this.doNotAnimate = undefined;
};
public cleanup() {
this.doNotAnimate = true;
this.selectedMids.clear();
this.toggleSelection(false);
this.doNotAnimate = undefined;
}
protected updateElementSelection(element: HTMLElement, isSelected: boolean) {
@ -573,8 +578,8 @@ export class SearchSelection extends AppSelection { @@ -573,8 +578,8 @@ export class SearchSelection extends AppSelection {
this.selectionDeleteBtn && this.selectionDeleteBtn.classList.toggle('hide', cantDelete);
};
protected onToggleSelection = (forwards: boolean) => {
SetTransition(this.searchSuper.navScrollableContainer, 'is-selecting', forwards, 200, () => {
protected onToggleSelection = (forwards: boolean, animate: boolean) => {
SetTransition(this.searchSuper.navScrollableContainer, 'is-selecting', forwards, animate ? 200 : 0, () => {
if(!this.isSelecting) {
this.selectionContainer.remove();
this.selectionContainer =
@ -594,7 +599,7 @@ export class SearchSelection extends AppSelection { @@ -594,7 +599,7 @@ export class SearchSelection extends AppSelection {
this.selectionContainer.classList.add(BASE_CLASS + '-container');
const btnCancel = ButtonIcon(`close ${BASE_CLASS}-cancel`, {noRipple: true});
this.listenerSetter.add(btnCancel)('click', this.cancelSelection, {once: true});
this.listenerSetter.add(btnCancel)('click', () => this.cancelSelection(), {once: true});
this.selectionCountEl = document.createElement('div');
this.selectionCountEl.classList.add(BASE_CLASS + '-count');
@ -818,10 +823,10 @@ export default class ChatSelection extends AppSelection { @@ -818,10 +823,10 @@ export default class ChatSelection extends AppSelection {
return !bubble.classList.contains('service') && !bubble.classList.contains('is-sending') && !bubble.classList.contains('bubble-first');
}
protected onToggleSelection = (forwards: boolean) => {
const {needTranslateX, widthFrom, widthTo} = this.chat.input.center();
protected onToggleSelection = (forwards: boolean, animate: boolean) => {
const {needTranslateX, widthFrom, widthTo} = this.chat.input.center(animate);
SetTransition(this.listenElement, 'is-selecting', forwards, 200, () => {
SetTransition(this.listenElement, 'is-selecting', forwards, animate ? 200 : 0, () => {
if(!this.isSelecting) {
this.selectionInputWrapper.remove();
this.selectionInputWrapper =
@ -835,9 +840,9 @@ export default class ChatSelection extends AppSelection { @@ -835,9 +840,9 @@ export default class ChatSelection extends AppSelection {
this.selectedText = undefined;
}
fastRaf(() => {
/* fastRaf(() => {
this.bubbles.onScroll();
});
}); */
});
//const chatInput = this.appImManager.chatInput;
@ -856,7 +861,7 @@ export default class ChatSelection extends AppSelection { @@ -856,7 +861,7 @@ export default class ChatSelection extends AppSelection {
const attachClickOptions: AttachClickOptions = {listenerSetter: this.listenerSetter};
const btnCancel = ButtonIcon('close', {noRipple: true});
attachClickEvent(btnCancel, this.cancelSelection, {once: true, listenerSetter: this.listenerSetter});
attachClickEvent(btnCancel, () => this.cancelSelection(), {once: true, listenerSetter: this.listenerSetter});
this.selectionCountEl = document.createElement('div');
this.selectionCountEl.classList.add('selection-container-count');

328
src/scss/partials/_chat.scss
Unescape View File

@ -80,7 +80,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -80,7 +80,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
}
.chat-input-container {
&-container {
--padding-horizontal: var(--chat-input-padding);
display: flex;
align-items: flex-end;
@ -103,22 +103,19 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -103,22 +103,19 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.new-message-wrapper {
pointer-events: none;
}
}
&.is-centering:not(.backwards) {
.new-message-wrapper, .pinned-container {
&:not(.backwards) {
.new-message-wrapper {
opacity: 0;
}
.rows-wrapper {
max-height: var(--chat-input-size);
// opacity: 0;
// transition: transform .2s, width .2s, max-height .2s, border-radius .1s, opacity 0s .2s;
//box-shadow: none;
border-bottom-right-radius: $border-radius-big;
&:before {
.bubble-tail {
transform: scaleX(-1) translateX(#{.5625rem * 2});
opacity: 0;
transition: opacity $background-transition-time $background-transition-total-time;
}
}
@ -132,6 +129,33 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -132,6 +129,33 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
transform: scale(0);
}
}
&.animating {
.rows-wrapper {
transition: transform $input-transition-time, max-height $input-transition-time, border-radius $input-half-transition-time/* , opacity 0s 0s */;
.bubble-tail {
transition: transform $input-half-transition-time, opacity .025s 0s;
}
}
.selection-wrapper {
transition: opacity $input-half-transition-time .075s;
}
.btn-send {
transition: $input-transition-time transform;
}
&:not(.backwards) {
.rows-wrapper {
.bubble-tail {
transition: transform $input-half-transition-time, opacity .025s .075s;
}
}
}
}
}
}
/* @include respond-to(handhelds) {
@ -142,12 +166,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -142,12 +166,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
overflow: hidden;
} */
.btn-send-container {
.btn-menu-overlay {
z-index: 3;
}
}
.menu-send {
top: auto;
bottom: calc(100% + .5rem);
@ -211,17 +229,12 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -211,17 +229,12 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.btn-record-cancel {
visibility: hidden;
opacity: 0;
transition: visibility 0s $input-half-transition-time, opacity $input-half-transition-time 0s;
padding: 0;
z-index: 3;
position: absolute;
right: 0;
top: 0;
body.animation-level-0 & {
transition: none !important;
}
// here percents can be used since there are no other transforms
transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin}));
@ -288,6 +301,13 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -288,6 +301,13 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
right: var(--padding-horizontal);
bottom: 0;
padding-bottom: inherit;
display: flex;
align-items: center;
justify-content: center;
.btn-menu-overlay {
z-index: 3;
}
}
.btn-icon {
@ -299,7 +319,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -299,7 +319,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
.btn-send {
transition: .2s transform;
color: var(--secondary-text-color);
z-index: 3;
@ -351,7 +370,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -351,7 +370,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
}
.btn-record-cancel, .btn-send {
.btn-record-cancel,
.btn-send {
font-size: 1.5rem;
line-height: 1.5rem;
background-color: var(--surface-color) !important;
@ -380,51 +400,44 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -380,51 +400,44 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.record-ripple {
border-radius: 50%;
background-color: rgba(0, 0, 0, .2);
width: 240px;
height: 240px;
width: 300px;
height: 300px;
transform: scale(0);
position: absolute;
top: -94px;
left: -94px;
transition: transform .03s ease-in-out, visibility $input-half-transition-time;
visibility: hidden;
@include animation-level(0) {
transition: none !important;
}
@include respond-to(handhelds) {
width: 300px;
height: 300px;
top: -124px;
left: -124px;
width: 240px;
height: 240px;
}
}
&.is-locked {
pointer-events: none;
.btn-icon {
color: #c6cbce;
}
.btn-icon,
&:not(.is-recording) .btn-send {
color: #c6cbce;
}
}
&.is-recording {
&:not(.backwards) {
.btn-record-cancel {
opacity: 1;
visibility: visible;
transition: visibility 0s $input-half-transition-time, opacity $input-half-transition-time $input-half-transition-time;
}
// unlock
.btn-send, .btn-record-cancel {
.btn-send,
.btn-record-cancel {
pointer-events: all;
}
.record-ripple {
visibility: visible;
}
.rows-wrapper {
width: calc(100% - (var(--chat-input-size) * 2 + #{$btn-send-margin * 2}));
// transform: translateX(calc((var(--chat-input-size) + 0.5rem) / -1)) scaleX(1);
@ -437,10 +450,30 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -437,10 +450,30 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.record-time {
display: block;
}
}
&.animating {
.btn-record-cancel {
transition: visibility 0s $input-half-transition-time, opacity $input-half-transition-time 0s;
}
.record-ripple {
transition: transform .03s ease-in-out, visibility $input-half-transition-time;
}
.rows-wrapper {
transition: width $input-transition-time;
}
&:not(.backwards) {
.btn-record-cancel {
transition: visibility 0s $input-half-transition-time, opacity $input-half-transition-time $input-half-transition-time;
}
.record-ripple {
transition: transform .03s, visibility 0s;
visibility: visible;
}
}
}
}
@ -451,57 +484,31 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -451,57 +484,31 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
}
.new-message-wrapper, .pinned-container {
.new-message-wrapper {
opacity: 1;
@include animation-level(2) {
transition: opacity $input-half-transition-time 0s;
}
}
.pinned-container {
width: auto;
/* width: 17.125rem;
.chat-input.can-pin & {
width: 13.125rem;
} */
&-button {
height: 2.5rem;
padding: 0 .625rem;
}
}
.bubbles.is-selecting:not(.backwards) ~ & {
.selection-wrapper {
opacity: 1;
.chat-input-wrapper-background {
// visibility: visible;
// transition: visibility 0s 3s;
opacity: 1;
transition: opacity $background-transition-time $background-transition-total-time;
}
}
.rows-wrapper {
&:before {
opacity: 1;
transition: opacity 0s 0s;
.bubbles.is-selecting.animating ~ & {
.new-message-wrapper {
transition: opacity $input-half-transition-time 0s;
}
.selection-container {
&-left,
&-right {
transition: transform $input-transition-time;
}
}
/* .bubbles.is-selecting:not(.backwards):not(.animating) ~ & {
.selection-wrapper:before {
visibility: visible;
}
} */
.bubbles.is-selecting.backwards ~ & {
@include animation-level(2) {
.new-message-wrapper, .pinned-container {
.bubbles.is-selecting.animating.backwards ~ & {
.new-message-wrapper {
transition: opacity $input-half-transition-time $input-half-transition-time;
}
@ -509,26 +516,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -509,26 +516,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
transition: opacity $input-half-transition-time 0s;
}
}
}
.pinned-container {
box-shadow: none;
@include respond-to(handhelds) {
font-size: 15px;
}
.btn-transparent {
justify-content: center;
&::before {
margin-right: 10px;
}
}
&::before {
box-shadow: none;
}
}
}
@keyframes recordBlink {
@ -671,7 +658,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -671,7 +658,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
transition: none !important;
}
&, &-item {
&,
&-item {
position: absolute !important;
top: 0;
left: 0;
@ -752,8 +740,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -752,8 +740,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
max-width: calc(100% - (var(--chat-input-size) + #{$btn-send-margin}));
justify-content: center;
// background-color: var(--surface-color);
border-radius: 12px;
border-bottom-right-radius: 0;
border-radius: $border-radius-big;
//box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
// box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .18);
min-height: var(--chat-input-size);
@ -761,10 +748,9 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -761,10 +748,9 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
flex: 0 0 auto;
position: relative;
z-index: 3;
transition: width $input-half-transition-time;
&:before,
.chat-input-wrapper-background {
// .chat-input-wrapper-background,
&:before {
content: " ";
position: absolute;
top: 0;
@ -776,15 +762,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -776,15 +762,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
background-color: #fff;
background-color: var(--surface-color);
opacity: 1;
transition: opacity $background-transition-time 0s;
@include animation-level(0) {
transition: none !important;
}
}
@include animation-level(0) {
transition: none !important;
}
}
@ -798,7 +775,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -798,7 +775,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
height: var(--chat-input-size);
padding: var(--padding);
background-color: var(--surface-color);
border-radius: $border-radius-big;
z-index: 3;
&:before {
@ -807,32 +783,33 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -807,32 +783,33 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
.chat-input-control-button {
height: 100%;
height: 2.5rem;
padding: 0 .625rem;
justify-content: center;
@include respond-to(handhelds) {
font-size: 15px;
}
&::before {
margin-right: 10px;
}
}
.selection-wrapper, .fake-selection-wrapper {
.selection-wrapper,
.fake-selection-wrapper {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 28.75rem;
max-width: calc(100% - (var(--chat-input-padding) * 2));
}
.selection-wrapper,
.chat-input-control {
transition: opacity $input-half-transition-time .075s;
opacity: 0;
@include animation-level(0) {
transition: none !important;
}
}
.selection-wrapper {
border-radius: $border-radius-big;
// z-index: 2;
// box-shadow: none;
background-color: var(--surface-color);
&:before {
@ -860,15 +837,12 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -860,15 +837,12 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
align-items: center;
width: 100%;
&-left, &-right {
&-left,
&-right {
display: flex;
justify-content: space-between;
align-items: center;
@include animation-level(2) {
transform: translateX(0);
transition: transform $input-transition-time;
}
}
&-right {
@ -936,88 +910,72 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -936,88 +910,72 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
visibility: hidden;
}
.rows-wrapper, .fake-rows-wrapper {
.chat-input.type-pinned & {
width: auto;
}
/* .chat-input.type-pinned & {
width: 17.125rem;
}
.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) - .5rem);
.pinned-container {
padding: 0 .5rem;
}
}
.rows-wrapper-wrapper {
width: 100%;
display: flex;
&.is-centering-to-control:not(.backwards) ~ .chat-input-control {
&.is-centering-to-control {
&:not(.backwards) {
.rows-wrapper {
&:before {
opacity: 0;
}
}
~ .chat-input-control {
opacity: 1;
&:before {
opacity: 1;
}
}
}
&.animating {
.rows-wrapper,
~ .chat-input-control {
&:before {
transition: opacity $background-transition-time $background-transition-total-time;
}
}
&.is-centering-to-control.backwards ~ .chat-input-control {
~ .chat-input-control {
transition: opacity $input-half-transition-time .075s;
}
&.backwards {
.rows-wrapper,
~ .chat-input-control {
&:before {
transition: opacity $background-transition-time 0s;
}
}
~ .chat-input-control {
transition: opacity $input-half-transition-time 0s;
}
}
}
}
}
.rows-wrapper {
transform: scaleX(1);
transform: translateX(0) scaleX(1);
border-bottom-right-radius: 0;
// transform: translateX(calc((var(--chat-input-size) + 0.5rem) / -2)) scaleX(1);
transition: transform $input-transition-time, width $input-transition-time, max-height $input-transition-time, border-radius $input-half-transition-time/* , opacity 0s 0s */;
// transition: transform $input-transition-time, width $input-transition-time, max-height $input-transition-time, border-radius $input-half-transition-time/* , opacity 0s 0s */;
// background-color: transparent;
// opacity: 1;
// box-shadow: none;
@include animation-level(0) {
transition: none !important;
}
&.is-centered {
margin: 0 auto;
// width: 100%;
// max-width: 100%;
& ~ .fake-rows-wrapper {
left: 50%;
transform: translateX(-50%);
}
}
.bubble-tail {
opacity: 1;
transition: transform $input-half-transition-time, opacity .025s 0s;
@include animation-level(0) {
transition: none !important;
}
}
.chat-input-container.is-centering:not(.backwards) &, &.is-centered {
border-bottom-right-radius: 12px;
.bubble-tail {
transition: transform $input-half-transition-time, opacity .025s .075s;
transform: scaleX(-1) translateX(#{.5625rem * 2});
opacity: 0;
}
}
@include respond-to(handhelds) {
@ -1061,7 +1019,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi @@ -1061,7 +1019,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
bottom: calc(100% + .875rem);
}
> div {
&-item {
padding: 0 38px 0 16px;
}
}

Write Preview
Loading…
Cancel
Save