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

Fixes: Overflow of long titles in move dialog

Browse Source
This commit is contained in:
Tom Moor
2019-01-26 18:05:58 +00:00
parent 70d30e31b9
commit a2434988b4
1 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/components/PathToDocument.js
View File

@ -8,37 +8,6 @@ import Flex from 'shared/components/Flex';
import Document from 'models/Document'; import Document from 'models/Document';
import type { DocumentPath } from 'stores/CollectionsStore'; import type { DocumentPath } from 'stores/CollectionsStore';
const StyledGoToIcon = styled(GoToIcon)``;
const ResultWrapper = styled.div`
display: flex;
margin-bottom: 10px;
color: ${props => props.theme.text};
cursor: default;
`;
const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
height: 32px;
padding-top: 3px;
padding-left: 5px;
&:hover,
&:active,
&:focus {
margin-left: 0px;
border-radius: 2px;
background: ${props => props.theme.black};
color: ${props => props.theme.smokeLight};
outline: none;
cursor: pointer;
${StyledGoToIcon} {
fill: ${props => props.theme.white};
}
}
`;
type Props = { type Props = {
result: DocumentPath, result: DocumentPath,
document?: Document, document?: Document,
@ -76,12 +45,12 @@ class PathToDocument extends React.Component<Props> {
return ( return (
<Component ref={ref} onClick={this.handleClick} href="" selectable> <Component ref={ref} onClick={this.handleClick} href="" selectable>
{result.path {result.path
.map(doc => <span key={doc.id}>{doc.title}</span>) .map(doc => <Title key={doc.id}>{doc.title}</Title>)
.reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])} .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
{document && ( {document && (
<Flex> <Flex>
{' '} {' '}
<StyledGoToIcon /> {document.title} <StyledGoToIcon /> <Title>{document.title}</Title>
</Flex> </Flex>
)} )}
</Component> </Component>
@ -89,4 +58,41 @@ class PathToDocument extends React.Component<Props> {
} }
} }
const Title = styled.span`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const StyledGoToIcon = styled(GoToIcon)``;
const ResultWrapper = styled.div`
display: flex;
margin-bottom: 10px;
color: ${props => props.theme.text};
cursor: default;
`;
const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
height: 32px;
padding-top: 3px;
padding-left: 5px;
&:hover,
&:active,
&:focus {
margin-left: 0px;
border-radius: 2px;
background: ${props => props.theme.black};
color: ${props => props.theme.smokeLight};
outline: none;
cursor: pointer;
${StyledGoToIcon} {
fill: ${props => props.theme.white};
}
}
`;
export default PathToDocument; export default PathToDocument;