Add extra padding to audio indicator

This commit is contained in:
Fedor Indutny 2022-05-20 18:42:12 -07:00 committed by GitHub
parent e6223b6a11
commit 6452ff9d1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 5 deletions

View file

@ -18,11 +18,15 @@
} }
&__content { &__content {
$size: 14px; $size: 16px;
width: $size; width: $size;
height: $size; height: $size;
&--muted { &--muted {
$size: 14px;
width: $size;
height: $size;
@include color-svg( @include color-svg(
'../images/icons/v2/mic-off-solid-28.svg', '../images/icons/v2/mic-off-solid-28.svg',
$color-white $color-white

View file

@ -20,11 +20,11 @@ const SIDE_SCALE_FACTOR = 0.75;
const MAX_CENTRAL_BAR_DELTA = 9; const MAX_CENTRAL_BAR_DELTA = 9;
/* Should match css */ /* Should match css */
const CONTENT_WIDTH = 14; const CONTENT_WIDTH = 16;
const CONTENT_HEIGHT = 14; const CONTENT_HEIGHT = 16;
const BAR_WIDTH = 2; const BAR_WIDTH = 2;
const CONTENT_PADDING = 1; const CONTENT_PADDING = 2;
enum BarPosition { enum BarPosition {
Left, Left,
@ -37,7 +37,7 @@ function generateBarPath(position: BarPosition, audioLevel: number): string {
if (position === BarPosition.Left) { if (position === BarPosition.Left) {
x = CONTENT_PADDING; x = CONTENT_PADDING;
} else if (position === BarPosition.Center) { } else if (position === BarPosition.Center) {
x = CONTENT_WIDTH / 2 - CONTENT_PADDING; x = CONTENT_WIDTH / 2 - CONTENT_PADDING + BAR_WIDTH / 2;
} else if (position === BarPosition.Right) { } else if (position === BarPosition.Right) {
x = CONTENT_WIDTH - CONTENT_PADDING - BAR_WIDTH; x = CONTENT_WIDTH - CONTENT_PADDING - BAR_WIDTH;
} else { } else {