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

Refactor chat input animations

master
morethanwords 2 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      src/components/chat/input.ts
  2. 33
      src/components/chat/selection.ts
  3. 420
      src/scss/partials/_chat.scss

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

@ -194,18 +194,15 @@ export default class ChatInput {
private saveDraftDebounced: () => void; private saveDraftDebounced: () => void;
private fakeRowsWrapper: HTMLDivElement; private fakeRowsWrapper: HTMLDivElement;
private fakePinnedControlBtn: HTMLElement;
private previousQuery: string; private previousQuery: string;
private releaseMediaPlayback: () => void; private releaseMediaPlayback: () => void;
private botStartBtn: HTMLButtonElement; private botStartBtn: HTMLButtonElement;
omgContainer: HTMLDivElement;
private fakeBotStartBtn: HTMLElement;
private rowsWrapperWrapper: HTMLDivElement; private rowsWrapperWrapper: HTMLDivElement;
private botStartContainer: HTMLElement; private controlContainer: HTMLElement;
fakeSelectionWrapper: HTMLDivElement; private fakeSelectionWrapper: HTMLDivElement;
private fakeWrapperTo: HTMLElement; private fakeWrapperTo: HTMLElement;
@ -331,6 +328,10 @@ export default class ChatInput {
setScrollTopTimeout = 0; setScrollTopTimeout = 0;
}, 0); }, 0);
}); */ }); */
const c = this.controlContainer = document.createElement('div');
c.classList.add('chat-input-control', 'chat-input-wrapper');
this.inputContainer.append(c);
} }
public constructPeerHelpers() { public constructPeerHelpers() {
@ -729,9 +730,8 @@ export default class ChatInput {
attachClickEvent(this.btnCancelRecord, this.onCancelRecordClick, {listenerSetter: this.listenerSetter}); attachClickEvent(this.btnCancelRecord, this.onCancelRecordClick, {listenerSetter: this.listenerSetter});
this.recorder.onstop = () => { this.recorder.onstop = () => {
this.recording = false; this.setRecording(false);
this.chatInput.classList.remove('is-recording', 'is-locked'); this.chatInput.classList.remove('is-locked');
this.updateSendBtn();
this.recordRippleEl.style.transform = ''; this.recordRippleEl.style.transform = '';
}; };
@ -794,30 +794,12 @@ export default class ChatInput {
this.botStartBtn = Button('btn-primary btn-transparent text-bold chat-input-control-button'); this.botStartBtn = Button('btn-primary btn-transparent text-bold chat-input-control-button');
this.botStartBtn.append(i18n('BotStart')); this.botStartBtn.append(i18n('BotStart'));
const c = this.botStartContainer = document.createElement('div'); this.controlContainer.append(this.botStartBtn);
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;
} }
public constructPinnedHelpers() { public constructPinnedHelpers() {
const container = this.constructPinnedContainer(); this.pinnedControlBtn = Button('btn-primary btn-transparent text-bold chat-input-control-button', {icon: 'unpin'});
this.controlContainer.append(this.pinnedControlBtn);
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.listenerSetter.add(this.pinnedControlBtn)('click', () => { this.listenerSetter.add(this.pinnedControlBtn)('click', () => {
const peerId = this.chat.peerId; const peerId = this.chat.peerId;
@ -833,13 +815,10 @@ export default class ChatInput {
}); });
}); });
this.rowsWrapper.append(container);
this.chatInput.classList.add('type-pinned'); this.chatInput.classList.add('type-pinned');
this.rowsWrapper.classList.add('is-centered');
} }
public center() { public center(animate = false) {
const neededFakeContainer = this.getNeededFakeContainer(); const neededFakeContainer = this.getNeededFakeContainer();
if(!neededFakeContainer && !this.inputContainer.classList.contains('is-centering')) { if(!neededFakeContainer && !this.inputContainer.classList.contains('is-centering')) {
return; return;
@ -882,7 +861,7 @@ export default class ChatInput {
this.fakeWrapperTo = neededFakeContainer; this.fakeWrapperTo = neededFakeContainer;
const duration = 200; const duration = animate ? 200 : 0;
SetTransition(this.inputContainer, 'is-centering', forwards, duration); SetTransition(this.inputContainer, 'is-centering', forwards, duration);
SetTransition(this.rowsWrapperWrapper, 'is-centering-to-control', !!(forwards && neededFakeContainer && neededFakeContainer.classList.contains('chat-input-control')), duration); SetTransition(this.rowsWrapperWrapper, 'is-centering-to-control', !!(forwards && neededFakeContainer && neededFakeContainer.classList.contains('chat-input-control')), duration);
this.rowsWrapper.style.transform = transform; this.rowsWrapper.style.transform = transform;
@ -906,8 +885,8 @@ export default class ChatInput {
public getNeededFakeContainer() { public getNeededFakeContainer() {
if(this.chat.selection.isSelecting) { if(this.chat.selection.isSelecting) {
return this.fakeSelectionWrapper; return this.fakeSelectionWrapper;
} else if(this.startParam || !this.chat.canSend()) { } else if(this.startParam || !this.chat.canSend() || this.chat.type === 'pinned') {
return this.botStartContainer; return this.controlContainer;
} }
} }
@ -1124,30 +1103,28 @@ export default class ChatInput {
if(sendMenu) { if(sendMenu) {
sendMenu.setPeerId(peerId); sendMenu.setPeerId(peerId);
} }
this.center();
if(this.messageInput) { if(this.messageInput) {
this.updateMessageInput(); this.updateMessageInput();
} else if(this.pinnedControlBtn) { } else if(this.pinnedControlBtn) {
if(this.appPeersManager.canPinMessage(this.chat.peerId)) { this.pinnedControlBtn.append(i18n(this.appPeersManager.canPinMessage(this.chat.peerId) ? 'Chat.Input.UnpinAll' : 'Chat.Pinned.DontShow'));
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.center();
} }
public updateMessageInput() { public updateMessageInput() {
const {chatInput, attachMenu, messageInput} = this; const {chatInput, attachMenu, messageInput} = this;
const {peerId, threadId} = this.chat; const {peerId, threadId} = this.chat;
const canWrite = this.chat.canSend(); const canWrite = this.chat.canSend();
chatInput.classList.add('no-transition'); const isHidden = chatInput.classList.contains('is-hidden');
chatInput.classList.toggle('is-hidden', !canWrite); const willBeHidden = !canWrite;
void chatInput.offsetLeft; // reflow if(isHidden !== willBeHidden) {
chatInput.classList.remove('no-transition'); 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; const i = I18n.weakMap.get(messageInput) as I18n.IntlElement;
if(i) { if(i) {
@ -1758,6 +1735,16 @@ export default class ChatInput {
return foundHelper; 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) => { private onBtnSendClick = (e: Event) => {
cancelEvent(e); cancelEvent(e);
@ -1784,9 +1771,7 @@ export default class ChatInput {
this.releaseMediaPlayback = appMediaPlaybackController.setSingleMedia(); this.releaseMediaPlayback = appMediaPlaybackController.setSingleMedia();
this.recordCanceled = false; this.recordCanceled = false;
this.chatInput.classList.add('is-recording'); this.setRecording(true);
this.recording = true;
this.updateSendBtn();
opusDecodeController.setKeepAlive(true); opusDecodeController.setKeepAlive(true);
const showDiscardPopup = () => { const showDiscardPopup = () => {
@ -1880,7 +1865,8 @@ export default class ChatInput {
break; 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 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE * 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 ChatBubbles from "./bubbles";
import type ChatInput from "./input"; import type ChatInput from "./input";
import type Chat from "./chat"; import type Chat from "./chat";
@ -28,7 +28,6 @@ import cancelSelection from "../../helpers/dom/cancelSelection";
import getSelectedText from "../../helpers/dom/getSelectedText"; import getSelectedText from "../../helpers/dom/getSelectedText";
import rootScope from "../../lib/rootScope"; import rootScope from "../../lib/rootScope";
import { safeAssign } from "../../helpers/object"; import { safeAssign } from "../../helpers/object";
import { fastRaf } from "../../helpers/schedulers";
import replaceContent from "../../helpers/dom/replaceContent"; import replaceContent from "../../helpers/dom/replaceContent";
import AppSearchSuper from "../appSearchSuper."; import AppSearchSuper from "../appSearchSuper.";
import isInDOM from "../../helpers/dom/isInDOM"; import isInDOM from "../../helpers/dom/isInDOM";
@ -54,7 +53,7 @@ class AppSelection {
protected isScheduled: boolean; protected isScheduled: boolean;
protected listenElement: HTMLElement; 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 onUpdateContainer: (cantForward: boolean, cantDelete: boolean, cantSend: boolean) => void;
protected onCancelSelection: () => void; protected onCancelSelection: () => void;
protected toggleByMid: (peerId: PeerId, mid: number) => void; protected toggleByMid: (peerId: PeerId, mid: number) => void;
@ -70,6 +69,8 @@ class AppSelection {
protected lookupBetweenParentClassName: string; protected lookupBetweenParentClassName: string;
protected lookupBetweenElementsQuery: string; protected lookupBetweenElementsQuery: string;
protected doNotAnimate: boolean;
constructor(options: { constructor(options: {
appMessagesManager: AppMessagesManager, appMessagesManager: AppMessagesManager,
listenElement: HTMLElement, listenElement: HTMLElement,
@ -386,7 +387,7 @@ class AppSelection {
blurActiveElement(); blurActiveElement();
const forwards = !!size || forceSelection; const forwards = !!size || forceSelection;
this.onToggleSelection && this.onToggleSelection(forwards); this.onToggleSelection && this.onToggleSelection(forwards, !this.doNotAnimate);
if(!IS_MOBILE_SAFARI) { if(!IS_MOBILE_SAFARI) {
if(forwards) { if(forwards) {
@ -408,16 +409,20 @@ class AppSelection {
return true; return true;
} }
public cancelSelection = () => { public cancelSelection = (doNotAnimate?: boolean) => {
if(doNotAnimate) this.doNotAnimate = true;
this.onCancelSelection && this.onCancelSelection(); this.onCancelSelection && this.onCancelSelection();
this.selectedMids.clear(); this.selectedMids.clear();
this.toggleSelection(); this.toggleSelection();
cancelSelection(); cancelSelection();
if(doNotAnimate) this.doNotAnimate = undefined;
}; };
public cleanup() { public cleanup() {
this.doNotAnimate = true;
this.selectedMids.clear(); this.selectedMids.clear();
this.toggleSelection(false); this.toggleSelection(false);
this.doNotAnimate = undefined;
} }
protected updateElementSelection(element: HTMLElement, isSelected: boolean) { protected updateElementSelection(element: HTMLElement, isSelected: boolean) {
@ -573,8 +578,8 @@ export class SearchSelection extends AppSelection {
this.selectionDeleteBtn && this.selectionDeleteBtn.classList.toggle('hide', cantDelete); this.selectionDeleteBtn && this.selectionDeleteBtn.classList.toggle('hide', cantDelete);
}; };
protected onToggleSelection = (forwards: boolean) => { protected onToggleSelection = (forwards: boolean, animate: boolean) => {
SetTransition(this.searchSuper.navScrollableContainer, 'is-selecting', forwards, 200, () => { SetTransition(this.searchSuper.navScrollableContainer, 'is-selecting', forwards, animate ? 200 : 0, () => {
if(!this.isSelecting) { if(!this.isSelecting) {
this.selectionContainer.remove(); this.selectionContainer.remove();
this.selectionContainer = this.selectionContainer =
@ -594,7 +599,7 @@ export class SearchSelection extends AppSelection {
this.selectionContainer.classList.add(BASE_CLASS + '-container'); this.selectionContainer.classList.add(BASE_CLASS + '-container');
const btnCancel = ButtonIcon(`close ${BASE_CLASS}-cancel`, {noRipple: true}); 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 = document.createElement('div');
this.selectionCountEl.classList.add(BASE_CLASS + '-count'); this.selectionCountEl.classList.add(BASE_CLASS + '-count');
@ -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'); return !bubble.classList.contains('service') && !bubble.classList.contains('is-sending') && !bubble.classList.contains('bubble-first');
} }
protected onToggleSelection = (forwards: boolean) => { protected onToggleSelection = (forwards: boolean, animate: boolean) => {
const {needTranslateX, widthFrom, widthTo} = this.chat.input.center(); 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) { if(!this.isSelecting) {
this.selectionInputWrapper.remove(); this.selectionInputWrapper.remove();
this.selectionInputWrapper = this.selectionInputWrapper =
@ -835,9 +840,9 @@ export default class ChatSelection extends AppSelection {
this.selectedText = undefined; this.selectedText = undefined;
} }
fastRaf(() => { /* fastRaf(() => {
this.bubbles.onScroll(); this.bubbles.onScroll();
}); }); */
}); });
//const chatInput = this.appImManager.chatInput; //const chatInput = this.appImManager.chatInput;
@ -856,7 +861,7 @@ export default class ChatSelection extends AppSelection {
const attachClickOptions: AttachClickOptions = {listenerSetter: this.listenerSetter}; const attachClickOptions: AttachClickOptions = {listenerSetter: this.listenerSetter};
const btnCancel = ButtonIcon('close', {noRipple: true}); 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 = document.createElement('div');
this.selectionCountEl.classList.add('selection-container-count'); this.selectionCountEl.classList.add('selection-container-count');

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

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

Write Preview
Loading…
Cancel
Save