From de6778fc429aa4ef7e26b9699bd3b1179fcd0486 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 28 Jan 2018 16:27:19 -0800 Subject: [PATCH 1/7] Fixes: LI spacing in documents got accidentally increased --- server/pages/components/Content.js | 4 ++++ shared/styles/base.js | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/server/pages/components/Content.js b/server/pages/components/Content.js index a69c20cb2..fd449e555 100644 --- a/server/pages/components/Content.js +++ b/server/pages/components/Content.js @@ -6,4 +6,8 @@ export default styled.div` max-width: 720px; margin: 0 auto 2em; padding: 0 2em; + + li { + padding: 0.2em 0; + } `; diff --git a/shared/styles/base.js b/shared/styles/base.js index 87d1978df..83cc7268b 100644 --- a/shared/styles/base.js +++ b/shared/styles/base.js @@ -69,10 +69,6 @@ export default ` margin-bottom: 1em; } - li { - padding: .2em 0; - } - hr { border: 0; height: 0; From ba72ecb0e3f57654382f207ca668a4bc3e37dd72 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 29 Jan 2018 22:31:49 -0800 Subject: [PATCH 2/7] issue-537 --- app/components/DropToImport/DropToImport.js | 35 +----- .../Sidebar/components/Collections.js | 8 -- app/menus/CollectionMenu.js | 104 ++++++++++++------ app/scenes/Collection/Collection.js | 5 +- app/utils/importFile.js | 36 ++++++ 5 files changed, 119 insertions(+), 69 deletions(-) create mode 100644 app/utils/importFile.js diff --git a/app/components/DropToImport/DropToImport.js b/app/components/DropToImport/DropToImport.js index d948b8d94..67a11277f 100644 --- a/app/components/DropToImport/DropToImport.js +++ b/app/components/DropToImport/DropToImport.js @@ -4,10 +4,10 @@ import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import { injectGlobal } from 'styled-components'; import { color } from 'shared/styles/constants'; +import importFile from 'utils/importFile'; import invariant from 'invariant'; import _ from 'lodash'; import Dropzone from 'react-dropzone'; -import Document from 'models/Document'; import DocumentsStore from 'stores/DocumentsStore'; import LoadingIndicator from 'components/LoadingIndicator'; @@ -19,7 +19,6 @@ type Props = { rejectClassName?: string, documents: DocumentsStore, disabled: boolean, - dropzoneRef: Function, history: Object, }; @@ -40,30 +39,6 @@ class DropToImport extends Component { @observable isImporting: boolean = false; props: Props; - importFile = async ({ file, documentId, collectionId, redirect }) => { - const reader = new FileReader(); - - reader.onload = async ev => { - const text = ev.target.result; - let data = { - parentDocument: undefined, - collection: { id: collectionId }, - text, - }; - - if (documentId) data.parentDocument = documentId; - - let document = new Document(data); - document = await document.save(); - this.props.documents.add(document); - - if (redirect && this.props.history) { - this.props.history.push(document.url); - } - }; - reader.readAsText(file); - }; - onDropAccepted = async (files = []) => { this.isImporting = true; @@ -79,7 +54,11 @@ class DropToImport extends Component { } for (const file of files) { - await this.importFile({ file, documentId, collectionId, redirect }); + await importFile({ file, documentId, collectionId, redirect }, doc => { + if (redirect) { + this.props.history.push(doc.url); + } + }); } } catch (err) { // TODO: show error alert. @@ -96,7 +75,6 @@ class DropToImport extends Component { 'collectionId', 'documents', 'disabled', - 'dropzoneRef', 'menuOpen' ); @@ -110,7 +88,6 @@ class DropToImport extends Component { disableClick disablePreview multiple - ref={this.props.dropzoneRef} {...props} > {this.isImporting && } diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index a4fdbcd03..2d99b958d 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -76,14 +76,9 @@ type CollectionLinkProps = { @observer class CollectionLink extends Component { props: CollectionLinkProps; - dropzoneRef; @observable menuOpen = false; - handleImport = () => { - this.dropzoneRef.open(); - }; - renderDocuments() { const { history, @@ -119,7 +114,6 @@ class CollectionLink extends Component { collectionId={collection.id} activeClassName="activeDropZone" menuOpen={this.menuOpen} - dropzoneRef={ref => (this.dropzoneRef = ref)} > (this.menuOpen = true)} onClose={() => (this.menuOpen = false)} - onImport={this.handleImport} - open={this.menuOpen} /> diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index fb1d7e99b..6cbb94267 100644 --- a/app/menus/CollectionMenu.js +++ b/app/menus/CollectionMenu.js @@ -1,24 +1,31 @@ // @flow import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; +import styled from 'styled-components'; +import getDataTransferFiles from 'utils/getDataTransferFiles'; +import importFile from 'utils/importFile'; import Collection from 'models/Collection'; import UiStore from 'stores/UiStore'; +import DocumentsStore from 'stores/DocumentsStore'; import MoreIcon from 'components/Icon/MoreIcon'; import Flex from 'shared/components/Flex'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; +type Props = { + label?: React$Element<*>, + onOpen?: () => void, + onClose?: () => void, + history: Object, + ui: UiStore, + documents: DocumentsStore, + collection: Collection, +}; + @observer class CollectionMenu extends Component { - props: { - label?: React$Element<*>, - onOpen?: () => void, - onClose?: () => void, - onImport?: () => void, - history: Object, - ui: UiStore, - collection: Collection, - }; + props: Props; + file: HTMLInputElement; onNewDocument = (ev: SyntheticEvent) => { ev.preventDefault(); @@ -26,6 +33,26 @@ class CollectionMenu extends Component { history.push(`${collection.url}/new`); }; + onImportFile = (ev: SyntheticEvent) => { + // simulate a click on the file upload input element + this.file.click(); + }; + + onFilePicked = (ev: SyntheticEvent) => { + const files = getDataTransferFiles(ev); + + importFile( + { + file: files[0], + documents: this.props.documents, + collectionId: this.props.collection.id, + }, + document => { + this.props.history.push(document.url); + } + ); + }; + onEdit = (ev: SyntheticEvent) => { ev.preventDefault(); const { collection } = this.props; @@ -39,32 +66,47 @@ class CollectionMenu extends Component { }; render() { - const { collection, label, onOpen, onClose, onImport } = this.props; + const { collection, label, onOpen, onClose } = this.props; const { allowDelete } = collection; return ( - } - onOpen={onOpen} - onClose={onClose} - > - {collection && ( - - - New document - - - Import document - - Edit… - - )} - {allowDelete && ( - Delete… - )} - + + (this.file = ref)} + onChange={this.onFilePicked} + accept="text/markdown, text/plain" + /> + } + onOpen={onOpen} + onClose={onClose} + > + {collection && ( + + + New document + + + Import document + + Edit… + + )} + {allowDelete && ( + Delete… + )} + + ); } } -export default inject('ui')(CollectionMenu); +const HiddenInput = styled.input` + position: absolute; + top: -100px; + left: -100px; + visibility: hidden; +`; + +export default inject('ui', 'documents')(CollectionMenu); diff --git a/app/scenes/Collection/Collection.js b/app/scenes/Collection/Collection.js index 74bc1b4a5..9736bcf13 100644 --- a/app/scenes/Collection/Collection.js +++ b/app/scenes/Collection/Collection.js @@ -133,7 +133,10 @@ class CollectionScene extends Component { /> - + diff --git a/app/utils/importFile.js b/app/utils/importFile.js new file mode 100644 index 000000000..c7847d0d0 --- /dev/null +++ b/app/utils/importFile.js @@ -0,0 +1,36 @@ +// @flow +import Document from '../models/Document'; +import DocumentsStore from '../stores/DocumentsStore'; + +type Options = { + file: File, + documents: DocumentsStore, + collectionId: string, + documentId?: string, +}; + +const importFile = async ( + { documents, file, documentId, collectionId }: Options, + callback: Document => * +) => { + const reader = new FileReader(); + + reader.onload = async ev => { + const text = ev.target.result; + let data = { + parentDocument: undefined, + collection: { id: collectionId }, + text, + }; + + if (documentId) data.parentDocument = documentId; + + let document = new Document(data); + document = await document.save(); + documents.add(document); + callback(document); + }; + reader.readAsText(file); +}; + +export default importFile; From 29aba6bfe6cf7bdcb41eaf4df8145de125ece924 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 29 Jan 2018 23:04:45 -0800 Subject: [PATCH 3/7] Restores file import on sidebar menu --- app/components/DropToImport/DropToImport.js | 16 +++++++++++---- .../Sidebar/components/Collections.js | 20 ++++++++++--------- app/menus/CollectionMenu.js | 6 ++++-- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/app/components/DropToImport/DropToImport.js b/app/components/DropToImport/DropToImport.js index 67a11277f..73d70b0b5 100644 --- a/app/components/DropToImport/DropToImport.js +++ b/app/components/DropToImport/DropToImport.js @@ -54,11 +54,19 @@ class DropToImport extends Component { } for (const file of files) { - await importFile({ file, documentId, collectionId, redirect }, doc => { - if (redirect) { - this.props.history.push(doc.url); + importFile( + { + documents: this.props.documents, + file, + documentId, + collectionId, + }, + doc => { + if (redirect) { + this.props.history.push(doc.url); + } } - }); + ); } } catch (err) { // TODO: show error alert. diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index 2d99b958d..fc2a09658 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -126,17 +126,16 @@ class CollectionLink extends Component { > {collection.name} - - - (this.menuOpen = true)} - onClose={() => (this.menuOpen = false)} - /> - + + (this.menuOpen = true)} + onClose={() => (this.menuOpen = false)} + /> + ); } @@ -225,6 +224,7 @@ const CollectionName = styled(Flex)` const CollectionAction = styled.span` position: absolute; right: 0; + top: 0; color: ${color.slate}; svg { opacity: 0.75; @@ -238,6 +238,8 @@ const CollectionAction = styled.span` `; const StyledDropToImport = styled(DropToImport)` + position: relative; + ${CollectionAction} { display: ${props => (props.menuOpen ? 'inline' : 'none')}; } diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index 6cbb94267..1d2b0775e 100644 --- a/app/menus/CollectionMenu.js +++ b/app/menus/CollectionMenu.js @@ -33,7 +33,9 @@ class CollectionMenu extends Component { history.push(`${collection.url}/new`); }; - onImportFile = (ev: SyntheticEvent) => { + onImportDocument = (ev: SyntheticEvent) => { + ev.preventDefault(); + // simulate a click on the file upload input element this.file.click(); }; @@ -87,7 +89,7 @@ class CollectionMenu extends Component { New document - + Import document Edit… From 85a27593e8e3a86723615c7511c4aa3499f9d736 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 29 Jan 2018 23:09:53 -0800 Subject: [PATCH 4/7] Fix sidebar spacing, this needs a crazy refactor soon --- app/components/Sidebar/components/Collections.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index fc2a09658..4dfd25c75 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -254,6 +254,7 @@ const StyledDropToImport = styled(DropToImport)` const CollectionChildren = styled(Flex)` margin-top: -4px; margin-left: 36px; + padding-bottom: 4px; `; const DocumentChildren = styled(Flex)` From 66c091cfbbc7a8118b11c9c10dca1d8921b70e59 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Tue, 30 Jan 2018 08:24:49 -0800 Subject: [PATCH 5/7] Closes #538 Seems simple and obvious because it is, we should check that startBlock exists before using it --- .../Editor/components/Toolbar/components/LinkToolbar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/Editor/components/Toolbar/components/LinkToolbar.js b/app/components/Editor/components/Toolbar/components/LinkToolbar.js index efce54e3b..90e236ab2 100644 --- a/app/components/Editor/components/Toolbar/components/LinkToolbar.js +++ b/app/components/Editor/components/Toolbar/components/LinkToolbar.js @@ -138,7 +138,8 @@ class LinkToolbar extends Component { if (href) { change.setInline({ type: 'link', data: { href } }); } else if (link) { - const selContainsLink = !!change.value.startBlock.getChild(link.key); + const startBlock = change.value.startBlock; + const selContainsLink = !!(startBlock && startBlock.getChild(link.key)); if (selContainsLink) change.unwrapInlineByKey(link.key); } change.deselect(); From 4832bfe6921a383a00c293ff678dae2e0fdb20fd Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 30 Jan 2018 23:55:28 +0300 Subject: [PATCH 6/7] Fixed database urls in .env.sample file --- .env.sample | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.sample b/.env.sample index 27f6967bb..db8c5a021 100644 --- a/.env.sample +++ b/.env.sample @@ -4,8 +4,8 @@ # # Please use `openssl rand -hex 32` to create SECRET_KEY -DATABASE_URL=postgres://user:pass@localhost:5432/outline -DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test +DATABASE_URL=postgres://user:pass@postgres:5432/outline +DATABASE_URL_TEST=postgres://user:pass@postgres:5432/outline-test SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B PORT=3000 REDIS_URL=redis://redis:6379 From 48793a4cefd65ab5cb5761c1c72707c1e942ea40 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Tue, 30 Jan 2018 22:49:48 -0800 Subject: [PATCH 7/7] callback > promise --- app/components/DropToImport/DropToImport.js | 23 +++++------ app/menus/CollectionMenu.js | 18 ++++----- app/utils/importFile.js | 44 +++++++++++---------- 3 files changed, 41 insertions(+), 44 deletions(-) diff --git a/app/components/DropToImport/DropToImport.js b/app/components/DropToImport/DropToImport.js index 73d70b0b5..a72a4baca 100644 --- a/app/components/DropToImport/DropToImport.js +++ b/app/components/DropToImport/DropToImport.js @@ -54,19 +54,16 @@ class DropToImport extends Component { } for (const file of files) { - importFile( - { - documents: this.props.documents, - file, - documentId, - collectionId, - }, - doc => { - if (redirect) { - this.props.history.push(doc.url); - } - } - ); + const doc = await importFile({ + documents: this.props.documents, + file, + documentId, + collectionId, + }); + + if (redirect) { + this.props.history.push(doc.url); + } } } catch (err) { // TODO: show error alert. diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index 1d2b0775e..fb7d34344 100644 --- a/app/menus/CollectionMenu.js +++ b/app/menus/CollectionMenu.js @@ -40,19 +40,15 @@ class CollectionMenu extends Component { this.file.click(); }; - onFilePicked = (ev: SyntheticEvent) => { + onFilePicked = async (ev: SyntheticEvent) => { const files = getDataTransferFiles(ev); + const document = await importFile({ + file: files[0], + documents: this.props.documents, + collectionId: this.props.collection.id, + }); - importFile( - { - file: files[0], - documents: this.props.documents, - collectionId: this.props.collection.id, - }, - document => { - this.props.history.push(document.url); - } - ); + this.props.history.push(document.url); }; onEdit = (ev: SyntheticEvent) => { diff --git a/app/utils/importFile.js b/app/utils/importFile.js index c7847d0d0..05b2118bf 100644 --- a/app/utils/importFile.js +++ b/app/utils/importFile.js @@ -9,28 +9,32 @@ type Options = { documentId?: string, }; -const importFile = async ( - { documents, file, documentId, collectionId }: Options, - callback: Document => * -) => { - const reader = new FileReader(); +const importFile = async ({ + documents, + file, + documentId, + collectionId, +}: Options): Promise => { + return new Promise(resolve => { + const reader = new FileReader(); - reader.onload = async ev => { - const text = ev.target.result; - let data = { - parentDocument: undefined, - collection: { id: collectionId }, - text, + reader.onload = async ev => { + const text = ev.target.result; + let data = { + parentDocument: undefined, + collection: { id: collectionId }, + text, + }; + + if (documentId) data.parentDocument = documentId; + + let document = new Document(data); + document = await document.save(); + documents.add(document); + resolve(document); }; - - if (documentId) data.parentDocument = documentId; - - let document = new Document(data); - document = await document.save(); - documents.add(document); - callback(document); - }; - reader.readAsText(file); + reader.readAsText(file); + }); }; export default importFile;