Layout tweak to "Download Succeeded" Modal
This displays the file path on its own line and does character-level wrapping on the path only. Ideally, we would just apply character wrapping to all words that are too long for their line. There are CSS props for that but I haven't been able to find a reliable way to do it without setting a width on the outer container, which we don't want here (modals stretch based on their content). So this is the best compromise I can come up with.
This commit is contained in:
parent
d913e0be63
commit
8e90389122
2 changed files with 7 additions and 2 deletions
|
@ -135,8 +135,9 @@ var DownloadLink = React.createClass({
|
|||
<span className="button-container">
|
||||
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
|
||||
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
|
||||
<Modal isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
|
||||
Downloading to {this.state.filePath}
|
||||
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
|
||||
<p>Downloading to:</p>
|
||||
<div className="download-started-modal__file-path">{this.state.filePath}</div>
|
||||
</Modal>
|
||||
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
|
||||
You don't have enough LBRY credits to pay for this stream.
|
||||
|
|
|
@ -351,4 +351,8 @@ input[type="text"], input[type="search"]
|
|||
.error-modal__warning-symbol {
|
||||
margin-top: 6px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.download-started-modal__file-path {
|
||||
word-break: break-all;
|
||||
}
|
Loading…
Add table
Reference in a new issue