imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modify encrypted images loading for better UX

Browse source 
Adds proper react css transition to encrypted images placeholders, so
that we can animate it's entrance and exit properly.
In addition, adds simple css animations file to properly handle all of
the animations in one place, so that it's much easier to properly handle
prefers-reduced-motion media query.
This commit is contained in:
Dariusz Niemczyk 2021-08-10 18:38:38 +02:00
parent d7cb855419
commit c872609ed3
No known key found for this signature in database
GPG key ID: 28DFE7164F497CB6
4 changed files with 113 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/messages/_MImageBody.scss
View file

@ -16,6 +16,12 @@ limitations under the License.
$timelineImageBorderRadius: 4px;
.mx_MImageBody_thumbnail--blurhash {
position: absolute;
left: 0;
top: 0;
}
.mx_MImageBody_thumbnail {
object-fit: contain;
border-radius: $timelineImageBorderRadius;
@ -23,8 +29,11 @@ $timelineImageBorderRadius: 4px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
> div > canvas {
.mx_Blurhash > canvas {
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
border-radius: $timelineImageBorderRadius;
}
}