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

Fixed playback-speed button bug and updated layout

Browse source
This commit is contained in:
Alvaro 2022-08-31 14:42:09 -06:00 committed by GitHub
parent 2b5f0ffc10
commit dd12c4cba3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
stylesheets/_variables.scss
View file

@ -29,6 +29,7 @@ $color-gray-95: #121212;
$color-black: #000000;
$color-white-alpha-06: rgba($color-white, 0.06);
$color-white-alpha-08: rgba($color-white, 0.08);
$color-white-alpha-12: rgba($color-white, 0.12);
$color-white-alpha-20: rgba($color-white, 0.2);
$color-white-alpha-40: rgba($color-white, 0.4);

95
stylesheets/components/MessageAudio.scss
View file

@ -46,20 +46,80 @@ $audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment__controls {
display: flex;
flex: 1;
justify-content: right;
padding: 0 4px;
margin-right: 4px;
}
.module-message__audio-attachment__dot {
display: flex;
align-items: center;
justify-content: flex-start;
transition: width 100ms ease-out;
&:before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 100%;
transition: background 100ms ease-out;
}
&--unplayed {
width: 14px;
}
&--played {
width: 0px;
}
.module-message__audio-attachment--incoming & {
&--unplayed:before {
@include light-theme {
background: $color-gray-60;
}
@include dark-theme {
background: $color-gray-25;
}
}
}
.module-message__audio-attachment--outgoing & {
&--unplayed:before {
background: $color-white-alpha-80;
}
}
&--played:before {
background: transparent;
}
}
.module-message__audio-attachment__playback-rate-button {
@include button-reset;
@include font-body-2-bold;
width: 38px;
height: 18px;
text-align: center;
font-weight: 700;
border-radius: 4px;
font-size: 12px; /* tiny override */
padding: 1px 7px;
margin: -1px 4px;
background: $color-white-alpha-20;
font-size: 11px;
padding: 1px 2px;
margin: -2px 0;
line-height: 16px;
letter-spacing: 0.05px;
user-select: none;
.module-message__audio-attachment--incoming & {
@include light-theme {
color: $color-gray-60;
background: $color-black-alpha-08;
}
@include dark-theme {
color: $color-gray-25;
background: $color-white-alpha-08;
}
}
.module-message__audio-attachment--outgoing & {
color: $color-white-alpha-80;
background: $color-white-alpha-20;
}
}
.module-message__audio-attachment__button,
@ -197,8 +257,6 @@ $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;
@media (min-width: 0px) and (max-width: 799px) {
margin-left: $audio-attachment-button-size +
@ -208,24 +266,11 @@ $audio-attachment-button-margin-small: 4px;
.module-message__audio-attachment__countdown {
@include font-caption;
align-items: center;
display: flex;
flex-shrink: 1;
width: $audio-attachment-button-size;
user-select: none;
&:after {
content: '';
display: block;
width: 6px;
height: 6px;
margin-left: 6px;
border-radius: 100%;
transition: background 100ms ease-out;
}
&--played:after {
background: transparent;
}
text-align: center;
white-space: nowrap;
margin-right: 12px;
.module-message__audio-attachment--incoming & {
@include light-theme {

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

@ -633,9 +633,15 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
>
{timeToText(countDown)}
</div>
{!withContentBelow && !collapseMetadata && (
<>
<div className={`${CSS_BASE}__controls`}>
<div
aria-hidden="true"
className={classNames(
`${CSS_BASE}__dot`,
`${CSS_BASE}__dot--${played ? 'played' : 'unplayed'}`
)}
/>
{isPlaying && (
<button
type="button"
@ -650,6 +656,8 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
</button>
)}
</div>
{!withContentBelow && !collapseMetadata && (
<MessageMetadata
direction={direction}
expirationLength={expirationLength}
@ -665,7 +673,6 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
textPending={textPending}
timestamp={timestamp}
/>
</>
)}
</div>
);