Add extra padding to audio indicator
This commit is contained in:
parent
e6223b6a11
commit
6452ff9d1e
2 changed files with 9 additions and 5 deletions
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue