coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixes to document drag&drop

Browse Source
This commit is contained in:
Jori Lallo
2017-10-23 23:12:28 -07:00
parent d82bcd3dcc
commit a5c1b64900
2 changed files with 57 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/components/Editor/Editor.js
View File

@ -83,6 +83,7 @@ type KeyData = {
};
handleDrop = async (ev: SyntheticEvent) => {
if (this.props.readOnly) return;
// check if this event was already handled by the Editor
if (ev.isDefaultPrevented()) return;
@ -92,7 +93,9 @@ type KeyData = {
const files = getDataTransferFiles(ev);
for (const file of files) {
await this.insertImageFile(file);
if (file.type.startsWith('image/')) {
await this.insertImageFile(file);
}
}
};

151
frontend/scenes/Document/Document.js
View File

@ -27,7 +27,6 @@ import DocumentMenu from 'menus/DocumentMenu';
import SaveAction from './components/SaveAction';
import LoadingPlaceholder from 'components/LoadingPlaceholder';
import Editor from 'components/Editor';
import DropToImport from 'components/DropToImport';
import LoadingIndicator from 'components/LoadingIndicator';
import Collaborators from 'components/Collaborators';
import CenteredContent from 'components/CenteredContent';
@ -57,7 +56,6 @@ type Props = {
@observable editCache: ?string;
@observable newDocument: ?Document;
@observable isDragging = false;
@observable isLoading = false;
@observable isSaving = false;
@observable notFound = false;
@ -198,14 +196,6 @@ type Props = {
this.props.history.push(url);
};
onStartDragging = () => {
this.isDragging = true;
};
onStopDragging = () => {
this.isDragging = false;
};
renderNotFound() {
return <Search notFound />;
}
@ -226,11 +216,6 @@ type Props = {
return (
<Container column auto>
{isMoving && document && <DocumentMove document={document} />}
{this.isDragging &&
<DropHere align="center" justify="center">
Drop files here to import into Atlas.
</DropHere>}
{titleText && <PageTitle title={titleText} />}
{this.isLoading && <LoadingIndicator />}
{isFetching &&
@ -239,73 +224,60 @@ type Props = {
</CenteredContent>}
{!isFetching &&
document &&
<StyledDropToImport
documentId={document.id}
history={this.props.history}
onDragEnter={this.onStartDragging}
onDragLeave={this.onStopDragging}
onDrop={this.onStopDragging}
disabled={this.isEditing}
>
<Flex justify="center" auto>
<Prompt
when={document.hasPendingChanges}
message={DISCARD_CHANGES}
/>
<Editor
key={document.id}
text={document.text}
emoji={document.emoji}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
/>
<Meta
align="center"
justify="flex-end"
readOnly={!this.isEditing}
>
<Flex align="center">
{!isNew &&
!this.isEditing &&
<Collaborators document={document} />}
<HeaderAction>
{this.isEditing
? <SaveAction
isSaving={this.isSaving}
onClick={this.onSave.bind(this, true)}
disabled={
!(this.document && this.document.allowSave) ||
this.isSaving
}
isNew={!!isNew}
/>
: <a onClick={this.onClickEdit}>
Edit
</a>}
</HeaderAction>
{this.isEditing &&
<HeaderAction>
<a onClick={this.onDiscard}>Discard</a>
</HeaderAction>}
{!this.isEditing &&
<HeaderAction>
<DocumentMenu document={document} />
</HeaderAction>}
{!this.isEditing && <Separator />}
<HeaderAction>
{!this.isEditing &&
<a onClick={this.onClickNew}>
<NewDocumentIcon />
<Flex justify="center" auto>
<Prompt
when={document.hasPendingChanges}
message={DISCARD_CHANGES}
/>
<Editor
key={document.id}
text={document.text}
emoji={document.emoji}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
/>
<Meta align="center" justify="flex-end" readOnly={!this.isEditing}>
<Flex align="center">
{!isNew &&
!this.isEditing &&
<Collaborators document={document} />}
<HeaderAction>
{this.isEditing
? <SaveAction
isSaving={this.isSaving}
onClick={this.onSave.bind(this, true)}
disabled={
!(this.document && this.document.allowSave) ||
this.isSaving
}
isNew={!!isNew}
/>
: <a onClick={this.onClickEdit}>
Edit
</a>}
</HeaderAction>
</Flex>
</Meta>
</Flex>
</StyledDropToImport>}
</HeaderAction>
{this.isEditing &&
<HeaderAction>
<a onClick={this.onDiscard}>Discard</a>
</HeaderAction>}
{!this.isEditing &&
<HeaderAction>
<DocumentMenu document={document} />
</HeaderAction>}
{!this.isEditing && <Separator />}
<HeaderAction>
{!this.isEditing &&
<a onClick={this.onClickNew}>
<NewDocumentIcon />
</a>}
</HeaderAction>
</Flex>
</Meta>
</Flex>}
</Container>
);
}
@ -329,18 +301,6 @@ const HeaderAction = styled(Flex)`
}
`;
const DropHere = styled(Flex)`
pointer-events: none;
position: fixed;
top: 0;
left: ${layout.sidebarWidth};
bottom: 0;
right: 0;
text-align: center;
background: rgba(255,255,255,.9);
z-index: 1;
`;
const Meta = styled(Flex)`
align-items: flex-start;
position: fixed;
@ -361,11 +321,6 @@ const LoadingState = styled(LoadingPlaceholder)`
margin: 90px 0;
`;
const StyledDropToImport = styled(DropToImport)`
display: flex;
flex: 1;
`;
export default withRouter(
inject('ui', 'user', 'documents', 'collections')(DocumentScene)
);