sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #5505 from SimonBrandner/improve-file-drop-ui

Browse Source 
File drop UI fixes and improvements
This commit is contained in:
Travis Ralston
2021-03-04 20:30:45 -07:00
committed by GitHub
parent 65ac063a09 831cc7eaa0
commit 676259e78c
8 changed files with 89 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/structures/RoomView.tsx
+49 -12
View File
@@ -192,6 +192,7 @@ export interface IState {
rejecting?: boolean;
rejectError?: Error;
hasPinnedWidgets?: boolean;
dragCounter: number;
}
export default class RoomView extends React.Component<IProps, IState> {
@@ -242,6 +243,7 @@ export default class RoomView extends React.Component<IProps, IState> {
canReply: false,
layout: SettingsStore.getValue("layout"),
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
dragCounter: 0,
};
this.dispatcherRef = dis.register(this.onAction);
@@ -535,8 +537,8 @@ export default class RoomView extends React.Component<IProps, IState> {
if (!roomView.ondrop) {
roomView.addEventListener('drop', this.onDrop);
roomView.addEventListener('dragover', this.onDragOver);
roomView.addEventListener('dragleave', this.onDragLeaveOrEnd);
roomView.addEventListener('dragend', this.onDragLeaveOrEnd);
roomView.addEventListener('dragenter', this.onDragEnter);
roomView.addEventListener('dragleave', this.onDragLeave);
}
}
@@ -580,8 +582,8 @@ export default class RoomView extends React.Component<IProps, IState> {
const roomView = this.roomView.current;
roomView.removeEventListener('drop', this.onDrop);
roomView.removeEventListener('dragover', this.onDragOver);
roomView.removeEventListener('dragleave', this.onDragLeaveOrEnd);
roomView.removeEventListener('dragend', this.onDragLeaveOrEnd);
roomView.removeEventListener('dragenter', this.onDragEnter);
roomView.removeEventListener('dragleave', this.onDragLeave);
}
dis.unregister(this.dispatcherRef);
if (this.context) {
@@ -1141,6 +1143,31 @@ export default class RoomView extends React.Component<IProps, IState> {
this.updateTopUnreadMessagesBar();
};
private onDragEnter = ev => {
ev.stopPropagation();
ev.preventDefault();
this.setState({
dragCounter: this.state.dragCounter + 1,
draggingFile: true,
});
};
private onDragLeave = ev => {
ev.stopPropagation();
ev.preventDefault();
this.setState({
dragCounter: this.state.dragCounter - 1,
});
if (this.state.dragCounter === 0) {
this.setState({
draggingFile: false,
});
}
};
private onDragOver = ev => {
ev.stopPropagation();
ev.preventDefault();
@@ -1148,7 +1175,6 @@ export default class RoomView extends React.Component<IProps, IState> {
ev.dataTransfer.dropEffect = 'none';
if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
this.setState({ draggingFile: true });
ev.dataTransfer.dropEffect = 'copy';
}
};
@@ -1159,14 +1185,12 @@ export default class RoomView extends React.Component<IProps, IState> {
ContentMessages.sharedInstance().sendContentListToRoom(
ev.dataTransfer.files, this.state.room.roomId, this.context,
);
this.setState({ draggingFile: false });
dis.fire(Action.FocusComposer);
};
private onDragLeaveOrEnd = ev => {
ev.stopPropagation();
ev.preventDefault();
this.setState({ draggingFile: false });
this.setState({
draggingFile: false,
dragCounter: this.state.dragCounter - 1,
});
};
private injectSticker(url, info, text) {
@@ -1768,6 +1792,19 @@ export default class RoomView extends React.Component<IProps, IState> {
}
}
let fileDropTarget = null;
if (this.state.draggingFile) {
fileDropTarget = (
<div className="mx_RoomView_fileDropTarget">
<img
src={require("../../../res/img/upload-big.svg")}
className="mx_RoomView_fileDropTarget_image"
/>
{ _t("Drop file here to upload") }
</div>
);
}
// We have successfully loaded this room, and are not previewing.
// Display the "normal" room view.
@@ -1891,7 +1928,6 @@ export default class RoomView extends React.Component<IProps, IState> {
room={this.state.room}
fullHeight={false}
userId={this.context.credentials.userId}
draggingFile={this.state.draggingFile}
maxHeight={this.state.auxPanelMaxHeight}
showApps={this.state.showApps}
onResize={this.onResize}
@@ -2060,6 +2096,7 @@ export default class RoomView extends React.Component<IProps, IState> {
<div className="mx_RoomView_body">
{auxPanel}
<div className={timelineClasses}>
{fileDropTarget}
{topUnreadMessagesBar}
{jumpToBottom}
{messagePanel}
src/components/views/rooms/AuxPanel.tsx
-21
View File
@@ -17,10 +17,8 @@ limitations under the License.
import React from 'react';
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import { Room } from 'matrix-js-sdk/src/models/room'
import * as sdk from '../../../index';
import dis from "../../../dispatcher/dispatcher";
import AppsDrawer from './AppsDrawer';
import { _t } from '../../../languageHandler';
import classNames from 'classnames';
import RateLimitedFunc from '../../../ratelimitedfunc';
import SettingsStore from "../../../settings/SettingsStore";
@@ -36,9 +34,6 @@ interface IProps {
userId: string,
showApps: boolean, // Render apps
// set to true to show the file drop target
draggingFile: boolean,
// maxHeight attribute for the aux panel and the video
// therein
maxHeight: number,
@@ -149,21 +144,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
}
render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
let fileDropTarget = null;
if (this.props.draggingFile) {
fileDropTarget = (
<div className="mx_RoomView_fileDropTarget">
<div className="mx_RoomView_fileDropTargetLabel" title={_t("Drop File Here")}>
<TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
<br />
{ _t("Drop file here to upload") }
</div>
</div>
);
}
const callView = (
<CallViewForRoom
roomId={this.props.room.roomId}
@@ -246,7 +226,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
<AutoHideScrollbar className={classes} style={style} >
{ stateViews }
{ appsDrawer }
{ fileDropTarget }
{ callView }
{ this.props.children }
</AutoHideScrollbar>
src/contexts/RoomContext.ts
+1
View File
@@ -43,6 +43,7 @@ const RoomContext = createContext<IState>({
canReply: false,
layout: Layout.Group,
matrixClientIsReady: false,
dragCounter: 0,
});
RoomContext.displayName = "RoomContext";
export default RoomContext;
src/i18n/strings/en_EN.json
+1 -2
View File
@@ -1419,8 +1419,6 @@
"Remove %(phone)s?": "Remove %(phone)s?",
"A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.",
"Phone Number": "Phone Number",
"Drop File Here": "Drop File Here",
"Drop file here to upload": "Drop file here to upload",
"This user has not verified all of their sessions.": "This user has not verified all of their sessions.",
"You have not verified this user.": "You have not verified this user.",
"You have verified this user. This user has verified all of their sessions.": "You have verified this user. This user has verified all of their sessions.",
@@ -2589,6 +2587,7 @@
"No more results": "No more results",
"Room": "Room",
"Failed to reject invite": "Failed to reject invite",
"Drop file here to upload": "Drop file here to upload",
"You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.",
"You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.",
"Unnamed Space": "Unnamed Space",