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

Update call buttons to match mobile

Browse source
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
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; height: 56px;
width: 56px; width: 56px;
&--audio { @mixin calling-button-icon($icon, $background-color, $icon-color) {
&--on { background-color: $background-color;
background-color: $color-gray-45;
div { div {
@include color-svg('../images/icons/v2/mic-solid-28.svg', $color-white); @include color-svg($icon, $icon-color);
height: 28px; height: 28px;
width: 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 { &--off {
background-color: $color-white; @include calling-button-icon-on($icon);
div {
@include color-svg(
'../images/icons/v2/mic-off-solid-28.svg',
$color-gray-75
);
height: 28px;
width: 28px;
}
} }
&--disabled { &--disabled {
background-color: $color-gray-45; @include calling-button-icon-disabled($icon);
opacity: 0.2;
div {
@include color-svg('../images/icons/v2/mic-solid-28.svg', $color-white);
height: 28px;
width: 28px;
}
} }
} }
&--video { &--video {
$icon: '../images/icons/v2/video-solid-28.svg';
&--on { &--on {
background-color: $color-white; @include calling-button-icon-on($icon);
div {
@include color-svg(
'../images/icons/v2/video-solid-28.svg',
$color-gray-75
);
height: 28px;
width: 28px;
}
} }
&--off { &--off {
background-color: $color-gray-45; @include calling-button-icon-off($icon);
div {
@include color-svg(
'../images/icons/v2/video-off-solid-28.svg',
$color-white
);
height: 28px;
width: 28px;
}
} }
&--disabled { &--disabled {
background-color: $color-gray-45; @include calling-button-icon-disabled($icon);
opacity: 0.2;
div {
@include color-svg(
'../images/icons/v2/video-solid-28.svg',
$color-white
);
height: 28px;
width: 28px;
}
} }
} }
&--hangup { &--hangup {
background-color: $color-accent-red; @include calling-button-icon(
'../images/icons/v2/phone-down-28.svg',
div { $color-accent-red,
@include color-svg('../images/icons/v2/phone-down-28.svg', $color-white); $color-white
height: 28px; );
width: 28px;
}
} }
} }

1
stylesheets/_variables.scss
View file

@ -28,6 +28,7 @@ $color-gray-95: #121212;
$color-black: #000000; $color-black: #000000;
$color-white-alpha-20: rgba($color-white, 0.2); $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-60: rgba($color-white, 0.6);
$color-white-alpha-80: rgba($color-white, 0.8); $color-white-alpha-80: rgba($color-white, 0.8);
$color-white-alpha-90: rgba($color-white, 0.9); $color-white-alpha-90: rgba($color-white, 0.9);