Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

More prefers-reduced-motion friendliness

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-09-21 17:59:13 +02:00
parent afdec1971f
commit b2c0f57c4b
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
res/css/views/elements/_ImageView.scss
View File

@ -40,6 +40,14 @@ $button-gap: 24px;
.mx_ImageView_image {
flex-shrink: 0;
&.mx_ImageView_image_animating {
transition: transform 200ms ease 0s;
}
&.mx_ImageView_image_animatingLoading {
transition: transform 300ms ease 0s;
}
}
.mx_ImageView_panel {
@ -130,3 +138,13 @@ $button-gap: 24px;
mask-size: 40%;
}
}
@media (prefers-reduced-motion) {
.mx_ImageView_image_animating {
transition: none !important;
}
.mx_ImageView_image_animatingLoading {
transition: none !important;
}
}

11
src/components/views/elements/ImageView.tsx
View File

@ -412,10 +412,10 @@ export default class ImageView extends React.Component<IProps, IState> {
const showEventMeta = !!this.props.mxEvent;
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
let transition;
if (this.animatingLoading) transition = "transform 300ms ease 0s";
else if (this.state.moving || !this.imageIsLoaded) transition = null;
else transition = "transform 200ms ease 0s";
let transitionClassName;
if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
else transitionClassName = "mx_ImageView_image_animating";
let cursor;
if (this.state.moving) cursor = "grabbing";
@ -433,7 +433,6 @@ export default class ImageView extends React.Component<IProps, IState> {
// image causing it translate in the wrong direction.
const style = {
cursor: cursor,
transition: transition,
transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY})
scale(${zoom})
@ -581,7 +580,7 @@ export default class ImageView extends React.Component<IProps, IState> {
style={style}
alt={this.props.name}
ref={this.image}
className="mx_ImageView_image"
className={`mx_ImageView_image ${transitionClassName}`}
draggable={true}
onMouseDown={this.onStartMoving}
/>