mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Left-align audio message countdown and right-align metadata

Browse source
This commit is contained in:
Evan Hahn 2022-03-09 15:45:18 -06:00 • committed by GitHub
parent 4a00ea46bc
commit cc44dca32b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

22
stylesheets/components/MessageAudio.scss
View file

@ -171,25 +171,16 @@ $audio-attachment-button-margin-small: 4px;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.module-message__audio-attachment--outgoing & {
flex-direction: row-reverse;
}
.module-message__audio-attachment--outgoing &,
.module-message__audio-attachment--with-content-below & {
margin-left: $audio-attachment-button-size + margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-big; $audio-attachment-button-margin-big;
@media (min-width: 0px) and (max-width: 799px) { @media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size + margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-small; $audio-attachment-button-margin-small;
} }
} }
}
.module-message__audio-attachment__countdown { .module-message__audio-attachment__countdown {
$unplayed-dot-margin: 6px;
@include font-caption; @include font-caption;
align-items: center; align-items: center;
display: flex; display: flex;
@ -201,6 +192,7 @@ $audio-attachment-button-margin-small: 4px;
display: block; display: block;
width: 6px; width: 6px;
height: 6px; height: 6px;
margin-left: 6px;
border-radius: 100%; border-radius: 100%;
transition: background 100ms ease-out; transition: background 100ms ease-out;
} }
@ -210,12 +202,6 @@ $audio-attachment-button-margin-small: 4px;
} }
.module-message__audio-attachment--incoming & { .module-message__audio-attachment--incoming & {
flex-direction: row-reverse;
&:after {
margin-right: $unplayed-dot-margin;
}
@include light-theme { @include light-theme {
$color: $color-black-alpha-60; $color: $color-black-alpha-60;
color: $color; color: $color;
@ -235,10 +221,6 @@ $audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment--outgoing & { .module-message__audio-attachment--outgoing & {
color: $color-white-alpha-80; color: $color-white-alpha-80;
&:after {
margin-left: $unplayed-dot-margin;
}
&--unplayed:after { &--unplayed:after {
background: $color-white-alpha-80; background: $color-white-alpha-80;
} }

16
ts/components/conversation/MessageAudio.tsx
View file

@ -530,6 +530,14 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
const metadata = ( const metadata = (
<div className={`${CSS_BASE}__metadata`}> <div className={`${CSS_BASE}__metadata`}>
<div
className={classNames(
`${CSS_BASE}__countdown`,
`${CSS_BASE}__countdown--${played ? 'played' : 'unplayed'}`
)}
>
{timeToText(countDown)}
</div>
{!withContentBelow && !collapseMetadata && ( {!withContentBelow && !collapseMetadata && (
<MessageMetadata <MessageMetadata
direction={direction} direction={direction}
@ -547,14 +555,6 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
timestamp={timestamp} timestamp={timestamp}
/> />
)} )}
<div
className={classNames(
`${CSS_BASE}__countdown`,
`${CSS_BASE}__countdown--${played ? 'played' : 'unplayed'}`
)}
>
{timeToText(countDown)}
</div>
</div> </div>
); );