jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update call buttons to match mobile

This commit is contained in:
Evan Hahn 2020-12-01 10:25:29 -06:00 committed by GitHub
parent 5302b97066
commit 089a6fb5a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
stylesheets/_modules.scss
View File

@ -6157,88 +6157,64 @@ button.module-image__border-overlay:focus {
height: 56px;
width: 56px;
&--audio {
&--on {
background-color: $color-gray-45;
@mixin calling-button-icon($icon, $background-color, $icon-color) {
background-color: $background-color;
div {
@include color-svg('../images/icons/v2/mic-solid-28.svg', $color-white);
height: 28px;
width: 28px;
}
div {
@include color-svg($icon, $icon-color);
height: 28px;
width: 28px;
}
}
@mixin calling-button-icon-on($icon) {
@include calling-button-icon($icon, $color-white, $color-gray-75);
}
@mixin calling-button-icon-off($icon) {
@include calling-button-icon($icon, $color-white-alpha-40, $color-white);
backdrop-filter: blur(10px);
}
@mixin calling-button-icon-disabled($icon) {
@include calling-button-icon($icon, $color-gray-45, $color-white);
opacity: 0.2;
}
// If the on/off states seem backwards, it's because this button reflects "is audio
// muted?", not "is audio on?".
&--audio {
$icon: '../images/icons/v2/mic-off-solid-28.svg';
&--on {
@include calling-button-icon-off($icon);
}
&--off {
background-color: $color-white;
div {
@include color-svg(
'../images/icons/v2/mic-off-solid-28.svg',
$color-gray-75
);
height: 28px;
width: 28px;
}
@include calling-button-icon-on($icon);
}
&--disabled {
background-color: $color-gray-45;
opacity: 0.2;
div {
@include color-svg('../images/icons/v2/mic-solid-28.svg', $color-white);
height: 28px;
width: 28px;
}
@include calling-button-icon-disabled($icon);
}
}
&--video {
$icon: '../images/icons/v2/video-solid-28.svg';
&--on {
background-color: $color-white;
div {
@include color-svg(
'../images/icons/v2/video-solid-28.svg',
$color-gray-75
);
height: 28px;
width: 28px;
}
@include calling-button-icon-on($icon);
}
&--off {
background-color: $color-gray-45;
div {
@include color-svg(
'../images/icons/v2/video-off-solid-28.svg',
$color-white
);
height: 28px;
width: 28px;
}
@include calling-button-icon-off($icon);
}
&--disabled {
background-color: $color-gray-45;
opacity: 0.2;
div {
@include color-svg(
'../images/icons/v2/video-solid-28.svg',
$color-white
);
height: 28px;
width: 28px;
}
@include calling-button-icon-disabled($icon);
}
}
&--hangup {
background-color: $color-accent-red;
div {
@include color-svg('../images/icons/v2/phone-down-28.svg', $color-white);
height: 28px;
width: 28px;
}
@include calling-button-icon(
'../images/icons/v2/phone-down-28.svg',
$color-accent-red,
$color-white
);
}
}

1
stylesheets/_variables.scss
View File

@ -28,6 +28,7 @@ $color-gray-95: #121212;
$color-black: #000000;
$color-white-alpha-20: rgba($color-white, 0.2);
$color-white-alpha-40: rgba($color-white, 0.4);
$color-white-alpha-60: rgba($color-white, 0.6);
$color-white-alpha-80: rgba($color-white, 0.8);
$color-white-alpha-90: rgba($color-white, 0.9);