coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Unable to view all possible locations when moving document (#1490)

Browse Source 
* fix: Remove limit of displayed results on Move dialog

* fix: Filter templates from results

* Show final document location on hover/active, reduces visual noise
This commit is contained in:
Tom Moor
2020-08-25 08:44:46 -07:00
committed by GitHub
parent 76279902f9
commit e117d5f103
2 changed files with 87 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/PathToDocument.js
View File

@ -42,20 +42,23 @@ class PathToDocument extends React.Component<Props> {
return ( return (
<Component ref={ref} onClick={this.handleClick} href="" selectable> <Component ref={ref} onClick={this.handleClick} href="" selectable>
{collection && <CollectionIcon collection={collection} />} {collection && <CollectionIcon collection={collection} />}
&nbsp;
{result.path {result.path
.map((doc) => <Title key={doc.id}>{doc.title}</Title>) .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
.reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])} .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
{document && ( {document && (
<Flex> <DocumentTitle>
{" "} {" "}
<StyledGoToIcon /> <Title>{document.title}</Title> <StyledGoToIcon /> <Title>{document.title}</Title>
</Flex> </DocumentTitle>
)} )}
</Component> </Component>
); );
} }
} }
const DocumentTitle = styled(Flex)``;
const Title = styled.span` const Title = styled.span`
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -79,13 +82,20 @@ const ResultWrapper = styled.div`
const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))` const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
margin: 0 -8px; margin: 0 -8px;
padding: 8px 4px; padding: 8px 4px;
border-radius: 8px;
${DocumentTitle} {
display: none;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: ${(props) => props.theme.listItemHoverBackground}; background: ${(props) => props.theme.listItemHoverBackground};
outline: none; outline: none;
${DocumentTitle} {
display: flex;
}
} }
`; `;

108
app/scenes/Document/components/DocumentMove.js
View File

@ -13,13 +13,11 @@ import DocumentsStore from "stores/DocumentsStore";
import UiStore from "stores/UiStore"; import UiStore from "stores/UiStore";
import Document from "models/Document"; import Document from "models/Document";
import Flex from "components/Flex"; import Flex from "components/Flex";
import Input from "components/Input"; import { Outline } from "components/Input";
import Labeled from "components/Labeled"; import Labeled from "components/Labeled";
import Modal from "components/Modal"; import Modal from "components/Modal";
import PathToDocument from "components/PathToDocument"; import PathToDocument from "components/PathToDocument";
const MAX_RESULTS = 8;
type Props = {| type Props = {|
document: Document, document: Document,
documents: DocumentsStore, documents: DocumentsStore,
@ -36,14 +34,19 @@ class DocumentMove extends React.Component<Props> {
@computed @computed
get searchIndex() { get searchIndex() {
const { collections } = this.props; const { collections, documents } = this.props;
const paths = collections.pathsToDocuments; const paths = collections.pathsToDocuments;
const index = new Search("id"); const index = new Search("id");
index.addIndex("title"); index.addIndex("title");
// Build index // Build index
const indexeableDocuments = []; 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); index.addDocuments(indexeableDocuments);
return index; return index;
@ -136,35 +139,41 @@ class DocumentMove extends React.Component<Props> {
</Section> </Section>
<Section column> <Section column>
<Labeled label="Choose a new location"> <Labeled label="Choose a new location" />
<Input <NewLocation>
type="search" <InputWrapper>
placeholder="Search collections & documents…" <Input
onKeyDown={this.handleKeyDown} type="search"
onChange={this.handleFilter} placeholder="Search collections & documents…"
required onKeyDown={this.handleKeyDown}
autoFocus onChange={this.handleFilter}
/> required
</Labeled> autoFocus
<Flex column> />
<StyledArrowKeyNavigation </InputWrapper>
mode={ArrowKeyNavigation.mode.VERTICAL}
defaultActiveChildIndex={0} <Results>
> <Flex column>
{this.results.slice(0, MAX_RESULTS).map((result, index) => ( <StyledArrowKeyNavigation
<PathToDocument mode={ArrowKeyNavigation.mode.VERTICAL}
key={result.id} defaultActiveChildIndex={0}
result={result} >
document={document} {this.results.map((result, index) => (
collection={collections.get(result.collectionId)} <PathToDocument
ref={(ref) => key={result.id}
index === 0 && this.setFirstDocumentRef(ref) result={result}
} document={document}
onSuccess={this.handleSuccess} collection={collections.get(result.collectionId)}
/> ref={(ref) =>
))} index === 0 && this.setFirstDocumentRef(ref)
</StyledArrowKeyNavigation> }
</Flex> onSuccess={this.handleSuccess}
/>
))}
</StyledArrowKeyNavigation>
</Flex>
</Results>
</NewLocation>
</Section> </Section>
</Flex> </Flex>
)} )}
@ -173,6 +182,37 @@ class DocumentMove extends React.Component<Props> {
} }
} }
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)` const Section = styled(Flex)`
margin-bottom: 24px; margin-bottom: 24px;
`; `;