PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update curly braces styling

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-06-06 09:02:30 +02:00
parent c3fdd73357
commit ba0f6766ca
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 66 additions and 65 deletions
Show stats 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,37 +365,38 @@ 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} height={32} width={ 32 }
viewUserOnClick={true} height={ 32 }
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>
); );
@ -413,10 +414,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 }
/> />
); );
} }
@ -427,14 +428,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>
); );
@ -442,57 +443,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>