diff --git a/lib/gui/app/components/file-selector/file-selector/file-selector.jsx b/lib/gui/app/components/file-selector/file-selector/file-selector.jsx index 6474f61a..04c33110 100644 --- a/lib/gui/app/components/file-selector/file-selector/file-selector.jsx +++ b/lib/gui/app/components/file-selector/file-selector/file-selector.jsx @@ -53,6 +53,7 @@ const Flex = styled.div` align-items: ${ props => props.alignItems }; flex-wrap: ${ props => props.wrap }; flex-grow: ${ props => props.grow }; + overflow: ${ props => props.overflow }; ` const Header = Flex.extend` @@ -72,21 +73,54 @@ const Footer = Flex.extend` > * { margin: 0 10px; } + + > button { + flex-grow: 0; + flex-shrink: 0; + } +` + +class UnstyledFilePath extends React.PureComponent { + render () { + return ( +
+ { + this.props.file && !this.props.file.isDirectory + ? this.props.file.basename + : '' + } +
+ ) + } +} + +const FilePath = styled(UnstyledFilePath)` + display: flex; + flex-grow: 1; + align-items: center; + overflow: hidden; + + > span { + font-size: 16px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } ` class FileSelector extends React.PureComponent { constructor (props) { super(props) - this.highlighted = null this.state = { path: props.path, + highlighted: null, files: [], } } confirmSelection () { - if (this.highlighted) { - this.selectFile(this.highlighted) + if (this.state.highlighted) { + this.selectFile(this.state.highlighted) } } @@ -192,7 +226,7 @@ class FileSelector extends React.PureComponent { } onHighlight (file) { - this.highlighted = file + this.setState({ highlighted: file }) } render () { @@ -205,7 +239,7 @@ class FileSelector extends React.PureComponent { {/**/} - +