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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
stylesheets/components/MessageAudio.scss
View file

@ -171,25 +171,16 @@ $audio-attachment-button-margin-small: 4px;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-big;
.module-message__audio-attachment--outgoing & {
flex-direction: row-reverse;
}
.module-message__audio-attachment--outgoing &,
.module-message__audio-attachment--with-content-below & {
@media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-big;
@media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size +
$audio-attachment-button-margin-small;
}
$audio-attachment-button-margin-small;
}
}
.module-message__audio-attachment__countdown {
$unplayed-dot-margin: 6px;
@include font-caption;
align-items: center;
display: flex;
@ -201,6 +192,7 @@ $audio-attachment-button-margin-small: 4px;
display: block;
width: 6px;
height: 6px;
margin-left: 6px;
border-radius: 100%;
transition: background 100ms ease-out;
}
@ -210,12 +202,6 @@ $audio-attachment-button-margin-small: 4px;
}
.module-message__audio-attachment--incoming & {
flex-direction: row-reverse;
&:after {
margin-right: $unplayed-dot-margin;
}
@include light-theme {
$color: $color-black-alpha-60;
color: $color;
@ -235,10 +221,6 @@ $audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment--outgoing & {
color: $color-white-alpha-80;
&:after {
margin-left: $unplayed-dot-margin;
}
&--unplayed:after {
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 = (
<div className={`${CSS_BASE}__metadata`}>
<div
className={classNames(
`${CSS_BASE}__countdown`,
`${CSS_BASE}__countdown--${played ? 'played' : 'unplayed'}`
)}
>
{timeToText(countDown)}
</div>
{!withContentBelow && !collapseMetadata && (
<MessageMetadata
direction={direction}
@ -547,14 +555,6 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
timestamp={timestamp}
/>
)}
<div
className={classNames(
`${CSS_BASE}__countdown`,
`${CSS_BASE}__countdown--${played ? 'played' : 'unplayed'}`
)}
>
{timeToText(countDown)}
</div>
</div>
);