GIF attachments

This commit is contained in:
Fedor Indutny 2021-04-27 15:11:59 -07:00 committed by Scott Nonnenberg
parent 5f17d01f49
commit caf1d4c4da
15 changed files with 526 additions and 93 deletions

View file

@ -663,6 +663,10 @@
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.module-message__container--gif & {
border-radius: inherit;
}
}
.module-message__sticker-container {
@ -4188,42 +4192,30 @@ button.module-conversation-details__action-button {
overflow: hidden;
}
.module-image--tap-to-play,
.module-image--not-downloaded {
align-items: center;
display: flex;
justify-content: center;
i {
span {
align-items: center;
display: flex;
justify-content: center;
border-radius: 48px;
height: 48px;
width: 48px;
@include light-theme {
background-color: $color-gray-65;
}
@include dark-theme {
background-color: $color-gray-75;
}
&:after {
content: '';
height: 17px;
width: 17px;
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
}
background-color: $color-black-alpha-70;
}
&:hover {
i {
background-color: $color-black;
span {
background-color: $color-black-alpha-80;
}
}
&:focus {
i {
span {
background-color: $color-gray-75;
border: 4px solid $ultramarine-ui-light;
box-sizing: border-box;
@ -4232,6 +4224,28 @@ button.module-conversation-details__action-button {
}
}
.module-image--not-downloaded {
span:after {
content: '';
height: 24px;
width: 24px;
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
}
}
.module-image--tap-to-play {
span:after {
content: 'GIF';
height: 24px;
width: 24px;
@include font-body-1;
line-height: 24px;
color: $color-white;
}
}
.module-image__download-pending {
position: relative;
@ -4336,6 +4350,26 @@ button.module-conversation-details__action-button {
}
}
.module-image--gif {
border-radius: 18px;
&__filesize {
position: absolute;
top: 10px;
left: 10px;
padding: 2px 8px;
color: $color-white;
background: $color-black-alpha-70;
/* The height is: 14px + 2x2px from the padding */
border-radius: 9px;
font-size: 11px;
line-height: 14px;
}
}
// Only if it's a sticker do we put the outline inside it
.module-message--selected
.module-message__container--with-sticker
@ -10677,6 +10711,11 @@ $contact-modal-padding: 18px;
&--deleted-for-everyone {
font-style: italic;
}
&--gif {
border-radius: inherit;
background: inherit;
}
}
.module-message__context {