diff --git a/app/components/PathToDocument.js b/app/components/PathToDocument.js index 5ab83073..147e724e 100644 --- a/app/components/PathToDocument.js +++ b/app/components/PathToDocument.js @@ -42,20 +42,23 @@ class PathToDocument extends React.Component { return ( {collection && } +   {result.path .map((doc) => {doc.title}) .reduce((prev, curr) => [prev, , curr])} {document && ( - + {" "} {document.title} - + )} ); } } +const DocumentTitle = styled(Flex)``; + const Title = styled.span` white-space: nowrap; overflow: hidden; @@ -79,13 +82,20 @@ const ResultWrapper = styled.div` const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))` margin: 0 -8px; padding: 8px 4px; - border-radius: 8px; + + ${DocumentTitle} { + display: none; + } &:hover, &:active, &:focus { background: ${(props) => props.theme.listItemHoverBackground}; outline: none; + + ${DocumentTitle} { + display: flex; + } } `; diff --git a/app/scenes/Document/components/DocumentMove.js b/app/scenes/Document/components/DocumentMove.js index 0bba3ed3..aab06eb5 100644 --- a/app/scenes/Document/components/DocumentMove.js +++ b/app/scenes/Document/components/DocumentMove.js @@ -13,13 +13,11 @@ import DocumentsStore from "stores/DocumentsStore"; import UiStore from "stores/UiStore"; import Document from "models/Document"; import Flex from "components/Flex"; -import Input from "components/Input"; +import { Outline } from "components/Input"; import Labeled from "components/Labeled"; import Modal from "components/Modal"; import PathToDocument from "components/PathToDocument"; -const MAX_RESULTS = 8; - type Props = {| document: Document, documents: DocumentsStore, @@ -36,14 +34,19 @@ class DocumentMove extends React.Component { @computed get searchIndex() { - const { collections } = this.props; + const { collections, documents } = this.props; const paths = collections.pathsToDocuments; const index = new Search("id"); index.addIndex("title"); // Build index const indexeableDocuments = []; - paths.forEach((path) => indexeableDocuments.push(path)); + paths.forEach((path) => { + const doc = documents.get(path.id); + if (!doc || !doc.isTemplate) { + indexeableDocuments.push(path); + } + }); index.addDocuments(indexeableDocuments); return index; @@ -136,35 +139,41 @@ class DocumentMove extends React.Component {
- - - - - - {this.results.slice(0, MAX_RESULTS).map((result, index) => ( - - index === 0 && this.setFirstDocumentRef(ref) - } - onSuccess={this.handleSuccess} - /> - ))} - - + + + + + + + + + + {this.results.map((result, index) => ( + + index === 0 && this.setFirstDocumentRef(ref) + } + onSuccess={this.handleSuccess} + /> + ))} + + + +
)} @@ -173,6 +182,37 @@ class DocumentMove extends React.Component { } } +const InputWrapper = styled("div")` + padding: 8px; + width: 100%; +`; + +const Input = styled("input")` + width: 100%; + outline: none; + background: none; + border-radius: 4px; + height: 30px; + border: 0; + color: ${(props) => props.theme.text}; + + &::placeholder { + color: ${(props) => props.theme.placeholder}; + } +`; + +const NewLocation = styled(Outline)` + flex-direction: column; +`; + +const Results = styled(Flex)` + display: block; + width: 100%; + max-height: 40vh; + overflow-y: auto; + padding: 8px; +`; + const Section = styled(Flex)` margin-bottom: 24px; `;