matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-04 11:51:45 +03:00
Code 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
3 changed files with 18 additions and 14 deletions
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; opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color; background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes; animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 0.25s; animation-duration: 300ms;
} }
.mx_Dialog_lightbox .mx_Dialog { .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; justify-content: space-between;
align-items: center; align-items: center;
animation-name: mx_ImageView_panel_keyframes; animation-name: mx_ImageView_panel_keyframes;
animation-duration: 0.25s; animation-duration: 300ms;
} }
.mx_ImageView_info_wrapper { .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 previousX = 0;
private previousY = 0; private previousY = 0;
private loaded = false;
componentDidMount() { componentDidMount() {
// We have to use addEventListener() because the listener // We have to use addEventListener() because the listener
// needs to be passive in order to work with Chromium // 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); this.image.current.removeEventListener("load", this.imageLoaded);
} }
private imageLoaded = () => { private imageLoaded = async () => {
this.setZoomAndRotation(); this.setZoomAndRotation();
this.setState({ await this.setState({
translationX: 0, translationX: 0,
translationY: 0, translationY: 0,
}); });
this.loaded = true;
}; };
private recalculateZoom = () => { private recalculateZoom = () => {
@@ -390,16 +393,17 @@ 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;
if (!this.loaded) transition = "transform 300ms ease 0s";
else if (this.state.moving) transition = null;
else transition = "transform 200ms ease 0s";
let cursor; let cursor;
if (this.state.moving) { if (this.state.moving) cursor = "grabbing";
cursor= "grabbing"; else if (zoomingDisabled) cursor = "default";
} else if (zoomingDisabled) { else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
cursor = "default"; else cursor = "zoom-out";
} else if (this.state.zoom === this.state.minZoom) {
cursor = "zoom-in";
} else {
cursor = "zoom-out";
}
const rotationDegrees = this.state.rotation + "deg"; const rotationDegrees = this.state.rotation + "deg";
const zoom = this.state.zoom; const zoom = this.state.zoom;
const translatePixelsX = this.state.translationX + "px"; 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. // image causing it translate in the wrong direction.
const style = { const style = {
cursor: cursor, cursor: cursor,
transition: this.state.moving ? null : "transform 250ms ease 0s", transition: transition,
transform: `translateX(${translatePixelsX}) transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY}) translateY(${translatePixelsY})
scale(${zoom}) scale(${zoom})