Clarify available options in document move

closes #852

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)};
   }
 `;
 

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<Props> {
     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<Props> {
     }
   };
 
+  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<Props> {
                 <Labeled label="Choose a new location">
                   <Input
                     type="text"
-                    placeholder="Filter…"
+                    placeholder="Search collections & documents…"
                     onKeyDown={this.handleKeyDown}
                     onChange={this.handleFilter}
                     required
@@ -152,18 +146,20 @@ class DocumentMove extends React.Component<Props> {
                     mode={ArrowKeyNavigation.mode.VERTICAL}
                     defaultActiveChildIndex={0}
                   >
-                    {this.results.map((result, index) => (
-                      <PathToDocument
-                        key={result.id}
-                        result={result}
-                        document={document}
-                        collection={collections.get(result.collectionId)}
-                        ref={ref =>
-                          index === 0 && this.setFirstDocumentRef(ref)
-                        }
-                        onSuccess={onRequestClose}
-                      />
-                    ))}
+                    {this.results
+                      .slice(0, MAX_RESULTS)
+                      .map((result, index) => (
+                        <PathToDocument
+                          key={result.id}
+                          result={result}
+                          document={document}
+                          collection={collections.get(result.collectionId)}
+                          ref={ref =>
+                            index === 0 && this.setFirstDocumentRef(ref)
+                          }
+                          onSuccess={this.handleSuccess}
+                        />
+                      ))}
                   </StyledArrowKeyNavigation>
                 </Flex>
               </Section>
@@ -184,4 +180,4 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
   flex: 1;
 `;
 
-export default inject('documents', 'collections')(DocumentMove);
+export default inject('documents', 'collections', 'ui')(DocumentMove);