From 2cfe36dd35d701cc8c306fe33b1b06e344ab174f Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sun, 10 Sep 2017 17:28:37 -0400 Subject: [PATCH] styling --- frontend/components/Input/Input.js | 2 +- .../components/DocumentMove/DocumentMove.js | 118 +++--------------- .../DocumentMove/components/PathToDocument.js | 99 +++++++++++++++ 3 files changed, 116 insertions(+), 103 deletions(-) create mode 100644 frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js diff --git a/frontend/components/Input/Input.js b/frontend/components/Input/Input.js index b8420ed1..3dc278a2 100644 --- a/frontend/components/Input/Input.js +++ b/frontend/components/Input/Input.js @@ -24,7 +24,7 @@ const RealInput = styled.input` background: none; &::placeholder { - color: ${color.slateLight}; + color: ${color.slate}; } `; diff --git a/frontend/scenes/Document/components/DocumentMove/DocumentMove.js b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js index 9999ab4c..bed6b4ea 100644 --- a/frontend/scenes/Document/components/DocumentMove/DocumentMove.js +++ b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js @@ -9,15 +9,13 @@ import _ from 'lodash'; import invariant from 'invariant'; import { client } from 'utils/ApiClient'; import styled from 'styled-components'; -import { size, color } from 'styles/constants'; +import { size } from 'styles/constants'; import Modal from 'components/Modal'; -import Button from 'components/Button'; import Input from 'components/Input'; -import HelpText from 'components/HelpText'; import Labeled from 'components/Labeled'; import Flex from 'components/Flex'; -import ChevronIcon from 'components/Icon/ChevronIcon'; +import PathToDocument from './components/PathToDocument'; import Document from 'models/Document'; import DocumentsStore from 'stores/DocumentsStore'; @@ -31,7 +29,6 @@ type Props = { @observer class DocumentMove extends Component { props: Props; - store: DocumentMoveStore; firstDocument: HTMLElement; @observable isSaving: boolean; @@ -39,6 +36,10 @@ type Props = { @observable searchTerm: ?string = null; @observable isFetching = false; + componentDidMount() { + this.setDefaultResult(); + } + handleKeyDown = ev => { // Down if (ev.which === 40) { @@ -55,7 +56,7 @@ type Props = { this.props.history.push(this.props.document.url); }; - handleFilter = (e: SyntheticEvent) => { + handleFilter = (e: SyntheticInputEvent) => { const value = e.target.value; this.searchTerm = value; this.updateSearchResults(); @@ -69,6 +70,12 @@ type Props = { this.firstDocument = ref; }; + @action setDefaultResult() { + this.resultIds = this.props.document.collection.documents.map( + doc => doc.id + ); + } + @action search = async () => { this.isFetching = true; @@ -90,7 +97,7 @@ type Props = { console.error('Something went wrong'); } } else { - this.resultIds = []; + this.setDefaultResult(); } this.isFetching = false; @@ -100,12 +107,7 @@ type Props = { const { document, documents } = this.props; return ( - - +
@@ -113,7 +115,7 @@ type Props = {
- +
- - {false && - } ); } @@ -169,84 +163,4 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` flex: 1; `; -type PathToDocumentProps = { - documentId: string, - onSuccess?: Function, - documents: DocumentsStore, - document?: Document, - ref?: Function, - selectable?: boolean, -}; - -class PathToDocument extends React.Component { - props: PathToDocumentProps; - - get resultDocument(): ?Document { - return this.props.documents.getById(this.props.documentId); - } - - handleSelect = async event => { - const { document } = this.props; - invariant(this.props.onSuccess, 'onSuccess unavailable'); - event.preventDefault(); - await document.move(this.resultDocument ? this.resultDocument.id : null); - this.props.onSuccess(); - }; - - render() { - const { document, onSuccess, ref } = this.props; - const { collection } = document || this.resultDocument; - const Component = onSuccess ? ResultWrapperLink : ResultWrapper; - - return ( - - {collection.name} - {this.resultDocument && - - {' '} - - {' '} - {this.resultDocument.pathToDocument - .map(doc => {doc.title}) - .reduce((prev, curr) => [prev, , curr])} - } - {document && - - {' '} - - {' '}{document.title} - } - - ); - } -} - -const ResultWrapper = styled.div` - display: flex; - margin-bottom: 10px; - - color: ${color.text}; - cursor: default; -`; - -const ResultWrapperLink = ResultWrapper.withComponent('a').extend` - padding-top: 3px; - - &:hover, - &:active, - &:focus { - margin-left: -8px; - padding-left: 6px; - background: ${color.smokeLight}; - border-left: 2px solid ${color.primary}; - outline: none; - cursor: pointer; - } -`; - export default withRouter(inject('documents')(DocumentMove)); diff --git a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js new file mode 100644 index 00000000..972f29d5 --- /dev/null +++ b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js @@ -0,0 +1,99 @@ +// @flow +import React from 'react'; +import { observer } from 'mobx-react'; +import _ from 'lodash'; +import invariant from 'invariant'; +import styled from 'styled-components'; +import { color } from 'styles/constants'; + +import Flex from 'components/Flex'; +import ChevronIcon from 'components/Icon/ChevronIcon'; + +import Document from 'models/Document'; +import DocumentsStore from 'stores/DocumentsStore'; + +type Props = { + documentId?: string, + onSuccess?: Function, + documents: DocumentsStore, + document?: Document, + ref?: Function, + selectable?: boolean, +}; + +@observer class PathToDocument extends React.Component { + props: Props; + + get resultDocument(): ?Document { + const { documentId } = this.props; + if (documentId) return this.props.documents.getById(documentId); + } + + handleSelect = async (event: SyntheticEvent) => { + const { document, onSuccess } = this.props; + + invariant(onSuccess && document, 'onSuccess unavailable'); + event.preventDefault(); + await document.move(this.resultDocument ? this.resultDocument.id : null); + onSuccess(); + }; + + render() { + const { document, onSuccess, ref } = this.props; + // $FlowIssue we'll always have a document + const { collection } = document || this.resultDocument; + const Component = onSuccess ? ResultWrapperLink : ResultWrapper; + + return ( + + {collection.name} + {this.resultDocument && + + {' '} + + {' '} + {this.resultDocument.pathToDocument + .map(doc => {doc.title}) + .reduce((prev, curr) => [prev, , curr])} + } + {document && + + {' '} + + {' '}{document.title} + } + + ); + } +} + +const ResultWrapper = styled.div` + display: flex; + margin-bottom: 10px; + + color: ${color.text}; + cursor: default; +`; + +const ResultWrapperLink = ResultWrapper.withComponent('a').extend` + padding-top: 3px; + padding-left: 5px; + + &:hover, + &:active, + &:focus { + margin-left: 0px; + border-radius: 2px; + background: ${color.black}; + color: ${color.smokeLight}; + outline: none; + cursor: pointer; + } +`; + +export default PathToDocument;