mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 03:35:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update animation speed

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-23 08:00:51 +02:00
parent 7c81526805
commit 2fd221bc18
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
3 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.scss
View file

@ -328,7 +328,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 0.25s;
animation-duration: 300ms;
}
.mx_Dialog_lightbox .mx_Dialog {

2
res/css/views/elements/_ImageView.scss
View file

@ -54,7 +54,7 @@ $button-gap: 24px;
justify-content: space-between;
align-items: center;
animation-name: mx_ImageView_panel_keyframes;
animation-duration: 0.25s;
animation-duration: 300ms;
}
.mx_ImageView_info_wrapper {

28
src/components/views/elements/ImageView.tsx
View file

@ -120,6 +120,8 @@ export default class ImageView extends React.Component<IProps, IState> {
private previousX = 0;
private previousY = 0;
private loaded = false;
componentDidMount() {
// We have to use addEventListener() because the listener
// needs to be passive in order to work with Chromium
@ -136,12 +138,13 @@ export default class ImageView extends React.Component<IProps, IState> {
this.image.current.removeEventListener("load", this.imageLoaded);
}
private imageLoaded = () => {
private imageLoaded = async () => {
this.setZoomAndRotation();
this.setState({
await this.setState({
translationX: 0,
translationY: 0,
});
this.loaded = true;
};
private recalculateZoom = () => {
@ -390,16 +393,17 @@ 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.loaded) transition = "transform 300ms ease 0s";
else if (this.state.moving) transition = null;
else transition = "transform 200ms ease 0s";
let cursor;
if (this.state.moving) {
cursor= "grabbing";
} else if (zoomingDisabled) {
cursor = "default";
} else if (this.state.zoom === this.state.minZoom) {
cursor = "zoom-in";
} else {
cursor = "zoom-out";
}
if (this.state.moving) cursor = "grabbing";
else if (zoomingDisabled) cursor = "default";
else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
else cursor = "zoom-out";
const rotationDegrees = this.state.rotation + "deg";
const zoom = this.state.zoom;
const translatePixelsX = this.state.translationX + "px";
@ -410,7 +414,7 @@ export default class ImageView extends React.Component<IProps, IState> {
// image causing it translate in the wrong direction.
const style = {
cursor: cursor,
transition: this.state.moving ? null : "transform 250ms ease 0s",
transition: transition,
transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY})
scale(${zoom})