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

Revert "Update curly braces styling"

Browse source 
This reverts commit ba0f6766ca.
This commit is contained in:
Šimon Brandner 2021-06-07 15:25:57 +02:00
parent ba0f6766ca
commit 67c9fe1e07
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 65 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,20 +19,20 @@ limitations under the License.
import React, { createRef } from 'react'; import React, { createRef } from 'react';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import AccessibleTooltipButton from "./AccessibleTooltipButton"; import AccessibleTooltipButton from "./AccessibleTooltipButton";
import { Key } from "../../../Keyboard"; import {Key} from "../../../Keyboard";
import FocusLock from "react-focus-lock"; import FocusLock from "react-focus-lock";
import MemberAvatar from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton"; import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
import MessageContextMenu from "../context_menus/MessageContextMenu"; import MessageContextMenu from "../context_menus/MessageContextMenu";
import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu'; import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
import MessageTimestamp from "../messages/MessageTimestamp"; import MessageTimestamp from "../messages/MessageTimestamp";
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import { formatFullDate } from "../../../DateUtils"; import {formatFullDate} from "../../../DateUtils";
import dis from '../../../dispatcher/dispatcher'; import dis from '../../../dispatcher/dispatcher';
import { replaceableComponent } from "../../../utils/replaceableComponent"; import {replaceableComponent} from "../../../utils/replaceableComponent";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks" import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import {MatrixEvent} from "matrix-js-sdk/src/models/event";
import { normalizeWheelEvent } from "../../../utils/Mouse"; import {normalizeWheelEvent} from "../../../utils/Mouse";
// Max scale to keep gaps around the image // Max scale to keep gaps around the image
const MAX_SCALE = 0.95; const MAX_SCALE = 0.95;
@ -167,7 +167,7 @@ export default class ImageView extends React.Component<IProps, IState> {
return; return;
} }
if (newZoom >= this.state.maxZoom) { if (newZoom >= this.state.maxZoom) {
this.setState({ zoom: this.state.maxZoom }); this.setState({zoom: this.state.maxZoom});
return; return;
} }
@ -256,11 +256,11 @@ export default class ImageView extends React.Component<IProps, IState> {
// Zoom in if we are completely zoomed out // Zoom in if we are completely zoomed out
if (this.state.zoom === this.state.minZoom) { if (this.state.zoom === this.state.minZoom) {
this.setState({ zoom: this.state.maxZoom }); this.setState({zoom: this.state.maxZoom});
return; return;
} }
this.setState({ moving: true }); this.setState({moving: true});
this.previousX = this.state.translationX; this.previousX = this.state.translationX;
this.previousY = this.state.translationY; this.previousY = this.state.translationY;
this.initX = ev.pageX - this.state.translationX; this.initX = ev.pageX - this.state.translationX;
@ -294,7 +294,7 @@ export default class ImageView extends React.Component<IProps, IState> {
this.initX = 0; this.initX = 0;
this.initY = 0; this.initY = 0;
} }
this.setState({ moving: false }); this.setState({moving: false});
}; };
private renderContextMenu() { private renderContextMenu() {
@ -302,14 +302,14 @@ export default class ImageView extends React.Component<IProps, IState> {
if (this.state.contextMenuDisplayed) { if (this.state.contextMenuDisplayed) {
contextMenu = ( contextMenu = (
<ContextMenu <ContextMenu
{ ...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect()) } {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
onFinished={ this.onCloseContextMenu } onFinished={this.onCloseContextMenu}
> >
<MessageContextMenu <MessageContextMenu
mxEvent={ this.props.mxEvent } mxEvent={this.props.mxEvent}
permalinkCreator={ this.props.permalinkCreator } permalinkCreator={this.props.permalinkCreator}
onFinished={ this.onCloseContextMenu } onFinished={this.onCloseContextMenu}
onCloseDialog={ this.props.onFinished } onCloseDialog={this.props.onFinished}
/> />
</ContextMenu> </ContextMenu>
); );
@ -347,10 +347,10 @@ export default class ImageView extends React.Component<IProps, IState> {
const style = { const style = {
cursor: cursor, cursor: cursor,
transition: this.state.moving ? null : "transform 200ms ease 0s", transition: this.state.moving ? null : "transform 200ms ease 0s",
transform: `translateX(${ translatePixelsX }) transform: `translateX(${translatePixelsX})
translateY(${ translatePixelsY }) translateY(${translatePixelsY})
scale(${ zoom }) scale(${zoom})
rotate(${ rotationDegrees })`, rotate(${rotationDegrees})`,
}; };
let info; let info;
@ -365,38 +365,37 @@ export default class ImageView extends React.Component<IProps, IState> {
const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
const sender = ( const sender = (
<div className="mx_ImageView_info_sender"> <div className="mx_ImageView_info_sender">
{ senderName } {senderName}
</div> </div>
); );
const messageTimestamp = ( const messageTimestamp = (
<a <a
href={ permalink } href={permalink}
onClick={ this.onPermalinkClicked } onClick={this.onPermalinkClicked}
aria-label={ formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false) } aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
> >
<MessageTimestamp <MessageTimestamp
showFullDate={ true } showFullDate={true}
showTwelveHour={ showTwelveHour } showTwelveHour={showTwelveHour}
ts={ mxEvent.getTs() } ts={mxEvent.getTs()}
showSeconds={ false } showSeconds={false}
/> />
</a> </a>
); );
const avatar = ( const avatar = (
<MemberAvatar <MemberAvatar
member={ mxEvent.sender } member={mxEvent.sender}
width={ 32 } width={32} height={32}
height={ 32 } viewUserOnClick={true}
viewUserOnClick={ true }
/> />
); );
info = ( info = (
<div className="mx_ImageView_info_wrapper"> <div className="mx_ImageView_info_wrapper">
{ avatar } {avatar}
<div className="mx_ImageView_info"> <div className="mx_ImageView_info">
{ sender } {sender}
{ messageTimestamp } {messageTimestamp}
</div> </div>
</div> </div>
); );
@ -414,10 +413,10 @@ export default class ImageView extends React.Component<IProps, IState> {
contextMenuButton = ( contextMenuButton = (
<ContextMenuTooltipButton <ContextMenuTooltipButton
className="mx_ImageView_button mx_ImageView_button_more" className="mx_ImageView_button mx_ImageView_button_more"
title={ _t("Options") } title={_t("Options")}
onClick={ this.onOpenContextMenu } onClick={this.onOpenContextMenu}
inputRef={ this.contextMenuButton } inputRef={this.contextMenuButton}
isExpanded={ this.state.contextMenuDisplayed } isExpanded={this.state.contextMenuDisplayed}
/> />
); );
} }
@ -428,14 +427,14 @@ export default class ImageView extends React.Component<IProps, IState> {
zoomOutButton = ( zoomOutButton = (
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomOut" className="mx_ImageView_button mx_ImageView_button_zoomOut"
title={ _t("Zoom out") } title={_t("Zoom out")}
onClick={ this.onZoomOutClick }> onClick={this.onZoomOutClick}>
</AccessibleTooltipButton> </AccessibleTooltipButton>
); );
zoomInButton = ( zoomInButton = (
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_zoomIn" className="mx_ImageView_button mx_ImageView_button_zoomIn"
title={ _t("Zoom in") } title={_t("Zoom in")}
onClick={ this.onZoomInClick }> onClick={ this.onZoomInClick }>
</AccessibleTooltipButton> </AccessibleTooltipButton>
); );
@ -443,57 +442,57 @@ export default class ImageView extends React.Component<IProps, IState> {
return ( return (
<FocusLock <FocusLock
returnFocus={ true } returnFocus={true}
lockProps={{ lockProps={{
onKeyDown: this.onKeyDown, onKeyDown: this.onKeyDown,
role: "dialog", role: "dialog",
}} }}
className="mx_ImageView" className="mx_ImageView"
ref={ this.focusLock } ref={this.focusLock}
> >
<div className="mx_ImageView_panel"> <div className="mx_ImageView_panel">
{ info } {info}
<div className="mx_ImageView_toolbar"> <div className="mx_ImageView_toolbar">
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCCW" className="mx_ImageView_button mx_ImageView_button_rotateCCW"
title={ _t("Rotate Left") } title={_t("Rotate Left")}
onClick={ this.onRotateCounterClockwiseClick }> onClick={ this.onRotateCounterClockwiseClick }>
</AccessibleTooltipButton> </AccessibleTooltipButton>
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCW" className="mx_ImageView_button mx_ImageView_button_rotateCW"
title={ _t("Rotate Right") } title={_t("Rotate Right")}
onClick={ this.onRotateClockwiseClick }> onClick={this.onRotateClockwiseClick}>
</AccessibleTooltipButton> </AccessibleTooltipButton>
{ zoomOutButton } {zoomOutButton}
{ zoomInButton } {zoomInButton}
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_download" className="mx_ImageView_button mx_ImageView_button_download"
title={ _t("Download") } title={_t("Download")}
onClick={ this.onDownloadClick }> onClick={ this.onDownloadClick }>
</AccessibleTooltipButton> </AccessibleTooltipButton>
{ contextMenuButton } {contextMenuButton}
<AccessibleTooltipButton <AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_close" className="mx_ImageView_button mx_ImageView_button_close"
title={ _t("Close") } title={_t("Close")}
onClick={ this.props.onFinished }> onClick={ this.props.onFinished }>
</AccessibleTooltipButton> </AccessibleTooltipButton>
{ this.renderContextMenu() } {this.renderContextMenu()}
</div> </div>
</div> </div>
<div <div
className="mx_ImageView_image_wrapper" className="mx_ImageView_image_wrapper"
ref={ this.imageWrapper }> ref={this.imageWrapper}>
<img <img
src={ this.props.src } src={this.props.src}
title={ this.props.name } title={this.props.name}
style={ style } style={style}
ref={ this.image } ref={this.image}
className="mx_ImageView_image" className="mx_ImageView_image"
draggable={ true } draggable={true}
onMouseDown={ this.onStartMoving } onMouseDown={this.onStartMoving}
onMouseMove={ this.onMoving } onMouseMove={this.onMoving}
onMouseUp={ this.onEndMoving } onMouseUp={this.onEndMoving}
onMouseLeave={ this.onEndMoving } onMouseLeave={this.onEndMoving}
/> />
</div> </div>
</FocusLock> </FocusLock>