OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

More prefers-reduced-motion friendliness 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Š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 { .mx_ImageView_image {
flex-shrink: 0; flex-shrink: 0;
&.mx_ImageView_image_animating {
transition: transform 200ms ease 0s;
}
&.mx_ImageView_image_animatingLoading {
transition: transform 300ms ease 0s;
}
} }
.mx_ImageView_panel { .mx_ImageView_panel {
@ -130,3 +138,13 @@ $button-gap: 24px;
mask-size: 40%; 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 showEventMeta = !!this.props.mxEvent;
const zoomingDisabled = this.state.maxZoom === this.state.minZoom; const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
let transition; let transitionClassName;
if (this.animatingLoading) transition = "transform 300ms ease 0s"; if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
else if (this.state.moving || !this.imageIsLoaded) transition = null; else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
else transition = "transform 200ms ease 0s"; else transitionClassName = "mx_ImageView_image_animating";
let cursor; let cursor;
if (this.state.moving) cursor = "grabbing"; 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. // image causing it translate in the wrong direction.
const style = { const style = {
cursor: cursor, cursor: cursor,
transition: transition,
transform: `translateX(${translatePixelsX}) transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY}) translateY(${translatePixelsY})
scale(${zoom}) scale(${zoom})
@ -581,7 +580,7 @@ export default class ImageView extends React.Component<IProps, IState> {
style={style} style={style}
alt={this.props.name} alt={this.props.name}
ref={this.image} ref={this.image}
className="mx_ImageView_image" className={`mx_ImageView_image ${transitionClassName}`}
draggable={true} draggable={true}
onMouseDown={this.onStartMoving} onMouseDown={this.onStartMoving}
/> />