oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

chore: move typing animation to styled components

Browse source
This commit is contained in:
Audric Ackermann 2022-08-23 14:41:24 +10:00
parent ff3d7ce226
commit ef10e0f1d9
3 changed files with 80 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
stylesheets/_modules.scss
View file

@ -908,92 +908,6 @@
flex-grow: 1;
}
// Module: Typing Animation
.module-typing-animation {
display: inline-flex;
flex-direction: row;
align-items: center;
height: 8px;
width: 38px;
padding-inline-start: 1px;
padding-inline-end: 1px;
}
.module-typing-animation__dot {
border-radius: 50%;
background-color: $color-gray-60;
height: 6px;
width: 6px;
opacity: 0.4;
}
.module-typing-animation__dot--light {
border-radius: 50%;
background-color: $color-white;
height: 6px;
width: 6px;
opacity: 0.4;
}
@keyframes typing-animation-first {
0% {
opacity: 0.4;
}
20% {
transform: scale(1.3);
opacity: 1;
}
40% {
opacity: 0.4;
}
}
@keyframes typing-animation-second {
10% {
opacity: 0.4;
}
30% {
transform: scale(1.3);
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes typing-animation-third {
20% {
opacity: 0.4;
}
40% {
transform: scale(1.3);
opacity: 1;
}
60% {
opacity: 0.4;
}
}
.module-typing-animation__dot--first {
animation: typing-animation-first 1600ms ease infinite;
}
.module-typing-animation__dot--second {
animation: typing-animation-second 1600ms ease infinite;
}
.module-typing-animation__dot--third {
animation: typing-animation-third 1600ms ease infinite;
}
.module-typing-animation__spacer {
flex-grow: 1;
}
// Module: Attachments
.module-attachments {

10
stylesheets/_theme_dark.scss
View file

@ -313,16 +313,6 @@
background-color: $color-white-015;
}
// Module: Typing Animation
.module-typing-animation__dot {
background-color: $color-white;
}
.module-typing-animation__dot--light {
background-color: $color-white;
}
// Module: Attachments
.module-attachments {

103
ts/components/conversation/TypingAnimation.tsx
View file

@ -1,29 +1,86 @@
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
const StyledTypingContainer = styled.div`
display: inline-flex;
flex-direction: row;
align-items: center;
height: 8px;
width: 38px;
padding-inline-start: 1px;
padding-inline-end: 1px;
`;
const StyledTypingDot = styled.div<{ index: number }>`
border-radius: 50%;
background-color: var(--color-text-subtle);
height: 6px;
width: 6px;
opacity: 0.4;
@keyframes typing-animation-first {
0% {
opacity: 0.4;
}
20% {
transform: scale(1.3);
opacity: 1;
}
40% {
opacity: 0.4;
}
}
@keyframes typing-animation-second {
10% {
opacity: 0.4;
}
30% {
transform: scale(1.3);
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes typing-animation-third {
20% {
opacity: 0.4;
}
40% {
transform: scale(1.3);
opacity: 1;
}
60% {
opacity: 0.4;
}
}
animation: ${props =>
props.index === 0
? 'typing-animation-first'
: props.index === 1
? 'typing-animation-second'
: 'typing-animation-third'}
1600ms ease infinite;
`;
const StyledSpacer = styled.div`
flex-grow: 1;
`;
export const TypingAnimation = () => {
return (
<div className="module-typing-animation" title={window.i18n('typingAlt')}>
<div
className={classNames(
'module-typing-animation__dot',
'module-typing-animation__dot--first'
)}
/>
<div className="module-typing-animation__spacer" />
<div
className={classNames(
'module-typing-animation__dot',
'module-typing-animation__dot--second'
)}
/>
<div className="module-typing-animation__spacer" />
<div
className={classNames(
'module-typing-animation__dot',
'module-typing-animation__dot--third'
)}
/>
</div>
<StyledTypingContainer title={window.i18n('typingAlt')} aria-label={window.i18n('typingAlt')}>
<StyledTypingDot index={0} />
<StyledSpacer />
<StyledTypingDot index={1} />
<StyledSpacer />
<StyledTypingDot index={2} />
</StyledTypingContainer>
);
};