LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Basics of More Options menu on My Files items

Browse source
This commit is contained in:
Alex Liebowitz 2016-05-29 07:04:25 -04:00
parent df31e97e60
commit 9aabfc171c
2 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/component/common.js
View file

@ -161,8 +161,8 @@ var MenuItem = React.createClass({
var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
return (
<a style={menuItemStyle} href={this.props.href} label={this.props.label} title={this.props.label}
className="button-text no-underline">
<a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
href={this.props.href || 'javascript:'} label={this.props.label}>
{this.props.iconPosition == 'left' ? icon : null}
{this.props.label}
{this.props.iconPosition == 'left' ? null : icon}

57
js/page/my_files.js
View file

@ -1,10 +1,45 @@
var removeIconColumnStyle = {
fontSize: '1.3em',
var myFilesRowMoreMenuStyle = {
position: 'absolute',
display: 'block',
top: '26px',
left: '-13px',
};
var MyFilesRowMoreMenu = React.createClass({
onDeleteClicked: 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);
}
},
render: function() {
return (
<div style={myFilesRowMoreMenuStyle}>
<Menu {...this.props}>
<MenuItem onClick={function() { alert('Make me work please!') }} label="Open in Finder" />
<MenuItem onClick={function() { alert('Make me work please!') }} label="Remove from LBRY" />
<MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
</Menu>
</div>
);
}
});
var moreButtonColumnStyle = {
height: '120px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
moreButtonContainerStyle = {
display: 'block',
position: 'relative',
},
moreButtonStyle = {
fontSize: '1.3em',
},
progressBarStyle = {
height: '15px',
width: '230px',
@ -18,17 +53,7 @@ myFilesRowImgStyle = {
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);
@ -71,8 +96,12 @@ var MyFilesRow = React.createClass({
<div>{ pauseLink }</div>
<div>{ watchButton }</div>
</div>
<div className="span1" style={removeIconColumnStyle}>
<Link icon="icon-close" title="Remove file" onClick={() => { this.onRemoveClicked() } } /><br />
<div className="span1" style={moreButtonColumnStyle}>
<div style={moreButtonContainerStyle}>
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
lbryUri={this.props.lbryUri} />
</div>
</div>
</div>
);