Add FileUnavailableMessage component
This commit is contained in:
parent
3e33b5a2e8
commit
42517587ee
2 changed files with 36 additions and 0 deletions
23
js/component/file-unavailable-message.js
Normal file
23
js/component/file-unavailable-message.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Link, ToolTipLink} from '../component/link.js';
|
||||||
|
|
||||||
|
const FileUnavailableMessage = React.createClass({
|
||||||
|
_unavailableMessage: "The content on LBRY is hosted by its users. It appears there are no users " +
|
||||||
|
"connected that have this file at the moment.",
|
||||||
|
propTypes: {
|
||||||
|
onShowActionsClicked: React.PropTypes.func,
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<div className="file-unavailable-message">
|
||||||
|
<span className="empty">This file is not currently available.</span> { ' ' }
|
||||||
|
<ToolTipLink label="Why?" tooltip={this._unavailableMessage} className="not-available-tooltip-link" /> { ' ' }
|
||||||
|
{'onShowActionsClicked' in this.props
|
||||||
|
? <Link label="Try Anyway" className="button-text" onClick={this.props.onShowActionsClicked} />
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default FileUnavailableMessage;
|
13
scss/component/_file-unavailable-message.scss
Normal file
13
scss/component/_file-unavailable-message.scss
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
.file-unavailable-message {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.not-available-tooltip-link__tooltip { /* temporary */
|
||||||
|
left: -225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-available-tooltip-link__link {
|
||||||
|
@include text-link();
|
||||||
|
font-size: 14px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue