LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-05 05:15:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ability to display non-styled prices and credit amounts

Browse source
This commit is contained in:
Alex Liebowitz 2017-04-17 03:59:06 -04:00
parent c252c757b0
commit 7644566ef5
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/js/component/common.js
View file

@ -62,18 +62,20 @@ export let CreditAmount = React.createClass({
propTypes: { propTypes: {
amount: React.PropTypes.number.isRequired, amount: React.PropTypes.number.isRequired,
precision: React.PropTypes.number, precision: React.PropTypes.number,
label: React.PropTypes.bool label: React.PropTypes.bool,
look: React.PropTypes.oneOf(['indicator', 'plain']),
}, },
getDefaultProps: function() { getDefaultProps: function() {
return { return {
precision: 1, precision: 1,
label: true, label: true,
look: 'indicator',
} }
}, },
render: function() { render: function() {
var formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision); var formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
return ( return (
<span className="credit-amount"> <span className={`credit-amount credit-amount--${this.props.look}`}>
<span> <span>
{formattedAmount} {formattedAmount}
{this.props.label ? {this.props.label ?
@ -91,6 +93,13 @@ export let FilePrice = React.createClass({
propTypes: { propTypes: {
metadata: React.PropTypes.object, metadata: React.PropTypes.object,
uri: React.PropTypes.string.isRequired, uri: React.PropTypes.string.isRequired,
look: React.PropTypes.oneOf(['indicator', 'plain']),
},
getDefaultProps: function() {
return {
look: 'indicator',
}
}, },
getInitialState: function() { getInitialState: function() {
@ -121,19 +130,19 @@ export let FilePrice = React.createClass({
render: function() { render: function() {
if (this.state.cost === null && this.props.metadata) { if (this.state.cost === null && this.props.metadata) {
if (!this.props.metadata.fee) { if (!this.props.metadata.fee) {
return <span className="credit-amount">free*</span>; return <span className={`credit-amount credit-amount--${this.props.look}`}>free*</span>;
} else { } else {
if (this.props.metadata.fee.currency === "LBC") { if (this.props.metadata.fee.currency === "LBC") {
return <CreditAmount label={false} amount={this.props.metadata.fee.amount} isEstimate={true} /> return <CreditAmount label={false} amount={this.props.metadata.fee.amount} isEstimate={true} />
} else if (this.props.metadata.fee.currency === "USD") { } else if (this.props.metadata.fee.currency === "USD") {
return <span className="credit-amount">???</span>; return <span className={`credit-amount credit-amount--${this.props.look}`}>???</span>;
} }
} }
} }
return ( return (
this.state.cost !== null ? this.state.cost !== null ?
<CreditAmount amount={this.state.cost} label={false} isEstimate={!this.state.isEstimate}/> : <CreditAmount amount={this.state.cost} label={false} isEstimate={!this.state.isEstimate} look={this.props.look} /> :
<span className="credit-amount">???</span> <span className={`credit-amount credit-amount--${this.props.look}`}>???</span>
); );
} }
}); });

6
ui/scss/_canvas.scss
View file

@ -57,15 +57,11 @@ $drawer-width: 220px;
color: white; color: white;
border-radius: 2px; border-radius: 2px;
} }
.credit-amount .credit-amount--indicator
{ {
font-weight: bold; font-weight: bold;
color: $color-money; color: $color-money;
} }
.credit-amount--estimate {
font-style: italic;
color: $color-meta-light;
}
#drawer-handle #drawer-handle
{ {
padding: $spacing-vertical / 2; padding: $spacing-vertical / 2;