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

Update to new message bubble reactions design

Browse source
This commit is contained in:
Ken Powers 2020-02-03 15:02:49 -05:00 • committed by GitHub
parent 682ac656c6
commit 01d4aa0772
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 482 additions and 460 deletions
Download patch file Download diff file Expand all files Collapse all files

80
stylesheets/_modules.scss
View file

@ -90,16 +90,10 @@
.module-message__buttons--incoming {
left: calc(100% + 8px);
&.module-message__buttons--has-reactions {
padding-left: 40px - 12px; // Adjust 40px by 12px margin on the button
}
}
.module-message__buttons--outgoing {
right: calc(100% + 8px);
flex-direction: row-reverse;
&.module-message__buttons--has-reactions {
padding-right: 40px - 12px; // Adjust 40px by 12px margin on the button
}
}
.module-message__buttons__download {
@ -1096,6 +1090,14 @@
align-items: center;
margin-top: 3px;
margin-bottom: -3px;
&--outgoing {
justify-content: flex-end;
}
&--with-reactions {
margin-bottom: -2px;
}
}
// With an image and no caption, this section needs to be on top of the image overlay
@ -1171,10 +1173,6 @@
}
}
.module-message__metadata__spacer {
flex-grow: 1;
}
.module-message__metadata__status-icon {
width: 12px;
height: 12px;
@ -1342,43 +1340,57 @@
.module-message__reactions {
position: absolute;
top: 0;
bottom: 0px;
z-index: 2;
height: 100%;
&--incoming {
right: -28px;
}
&--outgoing {
left: -28px;
}
height: 22px;
display: flex;
}
.module-message__reactions__reaction {
@include button-reset;
width: 33px;
height: 33px;
min-width: 28px;
height: 22px;
border: 1px solid;
border-radius: 33px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
&:first-of-type {
z-index: 2;
&--with-count {
min-width: 40px;
}
&--incoming {
right: 0;
}
&__count {
@include font-caption-bold;
&--outgoing {
left: 0;
margin-left: 4px;
&--no-emoji {
margin-left: 0px;
}
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
&--is-me {
@include light-theme {
color: $color-gray-75;
}
@include dark-theme {
color: $color-gray-15;
}
@include ios-theme {
color: $color-white-alpha-90;
}
}
}
&:focus {
@ -7633,6 +7645,10 @@ button.module-image__border-overlay:focus {
.module-message__container {
// 2px to allow for 1px border
max-width: 302px;
&--with-reactions {
margin-bottom: 12px;
}
}
/* Spec: container > 438px and container < 593px */