diff --git a/js/component/common.js b/js/component/common.js index 95b8c73c9..343a3634d 100644 --- a/js/component/common.js +++ b/js/component/common.js @@ -161,8 +161,8 @@ var MenuItem = React.createClass({ var icon = (this.props.icon ? : null); return ( - + {this.props.iconPosition == 'left' ? icon : null} {this.props.label} {this.props.iconPosition == 'left' ? null : icon} diff --git a/js/lbry.js b/js/lbry.js index 5b1836f55..2afc1e607 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -119,8 +119,15 @@ lbry.stopFile = function(name, callback) { lbry.call('stop_lbry_file', { name: name }, callback); } -lbry.deleteFile = function(name, callback) { - lbry.call('delete_lbry_file', { name: name }, callback) +lbry.deleteFile = function(name, deleteTargetFile=true, callback) { + lbry.call('delete_lbry_file', { + name: name, + delete_target_file: deleteTargetFile, + }, callback); +} + +lbry.revealFile = function(path, callback) { + lbry.call('reveal', { path: path }, callback); } lbry.getVersionInfo = function(callback) { diff --git a/js/page/my_files.js b/js/page/my_files.js index 7586b8b42..3200f1078 100644 --- a/js/page/my_files.js +++ b/js/page/my_files.js @@ -1,10 +1,51 @@ -var removeIconColumnStyle = { - fontSize: '1.3em', +var moreMenuStyle = { + position: 'absolute', + display: 'block', + top: '26px', + left: '-13px', +}; +var MyFilesRowMoreMenu = React.createClass({ + onRevealClicked: function() { + lbry.revealFile(this.props.path); + }, + onRemoveClicked: function() { + lbry.deleteFile(this.props.lbryUri, false); + }, + onDeleteClicked: function() { + var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' + + (this.completed ? ' stop the download and ' : '') + + 'permanently remove the file from your system.'; + + if (confirm(alertText)) { + lbry.deleteFile(this.props.lbryUri); + } + }, + render: function() { + return ( +
+ + + + + +
+ ); + } +}); + +var moreButtonColumnStyle = { height: '120px', display: 'flex', alignItems: 'center', justifyContent: 'center', }, +moreButtonContainerStyle = { + display: 'block', + position: 'relative', +}, +moreButtonStyle = { + fontSize: '1.3em', +}, progressBarStyle = { height: '15px', width: '230px', @@ -12,23 +53,13 @@ progressBarStyle = { border: '2px solid #eee', display: 'inline-block', }, -myFilesRowImgStyle = { +artStyle = { maxHeight: '100px', display: 'block', marginLeft: 'auto', marginRight: 'auto', }; - var MyFilesRow = React.createClass({ - onRemoveClicked: function() { - var alertText = 'Are you sure you\'d like to remove "' + this.props.title + '?" This will ' + - (this.completed ? ' stop the download and ' : '') + - 'permanently remove the file from your system.'; - - if (confirm(alertText)) { - lbry.deleteFile(this.props.lbryUri); - } - }, onPauseResumeClicked: function() { if (this.props.stopped) { lbry.startFile(this.props.lbryUri); @@ -37,7 +68,9 @@ var MyFilesRow = React.createClass({ } }, render: function() { - var progressBarWidth = 230; // Move this somewhere better + //@TODO: Convert progress bar to reusable component + + var progressBarWidth = 230; if (this.props.completed) { var pauseLink = null; @@ -61,7 +94,7 @@ var MyFilesRow = React.createClass({ return (
- {'Photo + {'Photo

{this.props.title}

@@ -71,8 +104,13 @@ var MyFilesRow = React.createClass({
{ pauseLink }
{ watchButton }
-
- { this.onRemoveClicked() } } />
+
+
+ + +
); @@ -106,7 +144,8 @@ var MyFilesPage = React.createClass({ } else { var content = []; for (let fileInfo of this.state.filesInfo) { - let {completed, written_bytes, total_bytes, lbry_uri, file_name, stopped, metadata} = fileInfo; + let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path, + stopped, metadata} = fileInfo; let {name, stream_name, thumbnail} = metadata; var title = (name || stream_name || ('lbry://' + lbry_uri)); @@ -114,7 +153,7 @@ var MyFilesPage = React.createClass({ var showWatchButton = (lbry.getMediaType(file_name) == 'video'); content.push(); } }