Show "unplayed" dot on outgoing audio messages

This commit is contained in:
Evan Hahn 2021-07-27 10:42:25 -05:00 committed by GitHub
parent b73c029d5f
commit 14929fb408
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 219 additions and 60 deletions

View file

@ -188,22 +188,59 @@ $audio-attachment-button-margin-small: 4px;
}
.module-message__audio-attachment__countdown {
flex-shrink: 1;
user-select: none;
$unplayed-dot-margin: 6px;
@include font-caption;
align-items: center;
display: flex;
flex-shrink: 1;
user-select: none;
&:after {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 100%;
transition: background 100ms ease-out;
}
&--played:after {
background: transparent;
}
.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-black-alpha-60;
color: $color;
&--unplayed:after {
background: $color;
}
}
@include dark-theme {
color: $color-white-alpha-80;
$color: $color-white-alpha-80;
color: $color;
&--unplayed:after {
background: $color;
}
}
}
.module-message__audio-attachment--outgoing & {
color: $color-white-alpha-80;
&:after {
margin-left: $unplayed-dot-margin;
}
&--unplayed:after {
background: $color-white-alpha-80;
}
}
}