diff --git a/app/components/PathToDocument.js b/app/components/PathToDocument.js index 7f8c3cf50..e67cd5adb 100644 --- a/app/components/PathToDocument.js +++ b/app/components/PathToDocument.js @@ -1,6 +1,7 @@ // @flow import * as React from 'react'; import { observer } from 'mobx-react'; +import { darken } from 'polished'; import styled from 'styled-components'; import { GoToIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons'; import Flex from 'shared/components/Flex'; @@ -74,29 +75,29 @@ const StyledGoToIcon = styled(GoToIcon)` const ResultWrapper = styled.div` display: flex; margin-bottom: 10px; + margin-left: -4px; + user-select: none; color: ${props => props.theme.text}; cursor: default; `; const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))` - height: 32px; - padding-top: 3px; - padding-left: 5px; + margin: 0 -10px; + padding: 8px 4px; + border-radius: 8px; + border: 2px solid transparent; &:hover, &:active, &:focus { - margin-left: 0px; - border-radius: 2px; - background: ${props => props.theme.black}; - color: ${props => props.theme.smokeLight}; + background: ${props => props.theme.listItemHoverBackground}; + border: 2px solid ${props => props.theme.listItemHoverBorder}; outline: none; - cursor: pointer; + } - ${StyledGoToIcon} { - fill: ${props => props.theme.white}; - } + &:focus { + border: 2px solid ${props => darken(0.5, props.theme.listItemHoverBorder)}; } `; diff --git a/app/scenes/Document/components/DocumentMove.js b/app/scenes/Document/components/DocumentMove.js index ebd737125..d33002b37 100644 --- a/app/scenes/Document/components/DocumentMove.js +++ b/app/scenes/Document/components/DocumentMove.js @@ -16,12 +16,16 @@ import Flex from 'shared/components/Flex'; import Document from 'models/Document'; import DocumentsStore from 'stores/DocumentsStore'; +import UiStore from 'stores/UiStore'; import CollectionsStore, { type DocumentPath } from 'stores/CollectionsStore'; +const MAX_RESULTS = 8; + type Props = { document: Document, documents: DocumentsStore, collections: CollectionsStore, + ui: UiStore, onRequestClose: *, }; @@ -53,24 +57,9 @@ class DocumentMove extends React.Component { let results = []; if (collections.isLoaded) { if (this.searchTerm) { - // Search by the keyword results = this.searchIndex.search(this.searchTerm); } else { - // Default results, root of the current collection - results = []; - collections.orderedData.forEach(collection => { - collection.documents.forEach(doc => { - const path = collections.getPathForDocument(doc.id); - if (doc && path) { - results.push(path); - } - }); - - const rootPath = collections.getPathForDocument(collection.id); - if (rootPath) { - results = [rootPath, ...results]; - } - }); + results = this.searchIndex._documents; } } @@ -100,6 +89,11 @@ class DocumentMove extends React.Component { } }; + handleSuccess = () => { + this.props.ui.showToast('Document moved'); + this.props.onRequestClose(); + }; + handleFilter = (ev: SyntheticInputEvent<*>) => { this.searchTerm = ev.target.value; }; @@ -140,7 +134,7 @@ class DocumentMove extends React.Component { { mode={ArrowKeyNavigation.mode.VERTICAL} defaultActiveChildIndex={0} > - {this.results.map((result, index) => ( - - index === 0 && this.setFirstDocumentRef(ref) - } - onSuccess={onRequestClose} - /> - ))} + {this.results + .slice(0, MAX_RESULTS) + .map((result, index) => ( + + index === 0 && this.setFirstDocumentRef(ref) + } + onSuccess={this.handleSuccess} + /> + ))} @@ -184,4 +180,4 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` flex: 1; `; -export default inject('documents', 'collections')(DocumentMove); +export default inject('documents', 'collections', 'ui')(DocumentMove);