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

Update reaction picker visuals

Browse source
This commit is contained in:
Evan Hahn 2021-09-07 16:30:58 -05:00 • committed by GitHub
parent 1a3f87f7f6
commit 561bc0695f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 277 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

136
stylesheets/_modules.scss
View file

@ -4684,142 +4684,6 @@ button.module-image__border-overlay:focus {
}
}
// Module: Reaction Picker
@keyframes module-reaction-picker__background-fade {
from {
background: transparent;
}
to {
// This color is the same in both light and dark themes
background: rgba($color-black, 0.8);
}
}
@keyframes module-reaction-picker__emoji-fade {
from {
transform: translate3d(0, 24px, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.module-reaction-picker {
width: 320px;
height: 56px;
border-radius: 30px;
position: relative;
z-index: 2;
animation: {
name: module-reaction-picker__background-fade;
duration: 400ms;
timing-function: $ease-out-expo;
fill-mode: forwards;
}
&__emoji-btn {
@include button-reset;
display: flex;
min-width: 52px;
min-height: 52px;
border-radius: 52px;
position: absolute;
top: 2px;
@for $i from 0 through 6 {
&:nth-of-type(#{$i + 1}) {
left: 2px + ($i * 44px);
// Prevent animation jank
opacity: 0;
animation: {
name: module-reaction-picker__emoji-fade;
duration: 400ms;
timing-function: $ease-out-expo;
delay: #{$i * 10ms};
fill-mode: forwards;
}
}
}
transition: background 400ms $ease-out-expo;
&--selected {
// This color is the same in both light and dark themes
background: rgba($color-white, 0.3);
}
&--more {
@include light-theme {
background: url('../images/any-emoji-32-light.svg') no-repeat center;
}
@include dark-theme {
background: url('../images/any-emoji-32-dark.svg') no-repeat center;
}
&::after {
content: '';
display: block;
width: 52px;
height: 52px;
opacity: 0;
transition: opacity 400ms $ease-out-expo;
@include light-theme {
background: url('../images/any-emoji-32-light-hover.svg') no-repeat
center;
}
@include dark-theme {
background: url('../images/any-emoji-32-dark-hover.svg') no-repeat
center;
}
}
&:hover::after {
opacity: 1;
}
}
@include keyboard-mode {
&:focus:before {
content: '';
display: block;
width: 4px;
height: 4px;
background: $color-ultramarine;
border-radius: 2px;
position: absolute;
bottom: 4px;
left: calc(50% - 2px);
}
}
$emoji-btn: &;
&__emoji {
position: absolute;
left: 2px;
top: 2px;
transform-origin: center;
$scale: 32 / 48;
transform: scale3d($scale, $scale, $scale);
transition: transform 400ms $ease-out-expo;
#{$emoji-btn}:hover &,
.keyboard-mode #{$emoji-btn}:focus & {
transform: scale3d(1, 1, 1) translate3d(0, -24px, 0);
z-index: 1;
}
}
}
}
// Module: Calling
.module-calling {
&__container {