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

move lbc symbol to left of amount

Browse source
This commit is contained in:
Sean Yesmunt 2020-09-10 11:54:41 -04:00
parent 4facd12c7c
commit 707abdd280
14 changed files with 39 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelCreate/view.jsx
View file

@ -112,7 +112,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
<FormField <FormField
className="form-field--price-amount" className="form-field--price-amount"
name="channel-deposit" name="channel-deposit"
label={<LbcSymbol prefix={__('Deposit')} size={14} />} label={<LbcSymbol postfix={__('Deposit')} size={14} />}
step="any" step="any"
min="0" min="0"
type="number" type="number"

2
ui/component/channelEdit/view.jsx
View file

@ -295,7 +295,7 @@ function ChannelForm(props: Props) {
type="number" type="number"
name="content_bid2" name="content_bid2"
step="any" step="any"
label={<LbcSymbol prefix={__('Deposit')} size={14} />} label={<LbcSymbol postfix={__('Deposit')} size={14} />}
value={params.amount} value={params.amount}
error={bidError} error={bidError}
min="0.0" min="0.0"

2
ui/component/claimEffectiveAmount/view.jsx
View file

@ -14,7 +14,7 @@ function ClaimEffectiveAmount(props: Props) {
return null; return null;
} }
return <LbcSymbol prefix={claim.meta.effective_amount} />; return <LbcSymbol postfix={claim.meta.effective_amount} />;
} }
export default ClaimEffectiveAmount; export default ClaimEffectiveAmount;

2
ui/component/common/credit-amount.jsx
View file

@ -53,7 +53,7 @@ class CreditAmount extends React.PureComponent<Props> {
} }
if (showLBC) { if (showLBC) {
amountText = <LbcSymbol prefix={amountText} />; amountText = <LbcSymbol postfix={amountText} />;
} }
if (fee) { if (fee) {

10
ui/component/common/lbc-symbol.jsx
View file

@ -9,18 +9,24 @@ type Props = {
isTitle?: boolean, isTitle?: boolean,
size?: number, size?: number,
prefix?: string | number, prefix?: string | number,
postfix?: string | number,
}; };
const LbcSymbol = (props: Props) => { const LbcSymbol = (props: Props) => {
const { prefix, size, isTitle = false } = props; const { prefix, postfix, size, isTitle = false } = props;
return ( return (
<> <>
{prefix} {prefix}
<Icon <Icon
icon={ICONS.LBC} icon={ICONS.LBC}
size={isTitle ? 22 : size} size={isTitle ? 22 : size}
className={classnames('icon__lbc', { 'icon__lbc--with-text': prefix, 'icon__lbc--title': isTitle })} className={classnames('icon__lbc', {
'icon__lbc--before-text': prefix,
'icon__lbc--after-text': postfix,
'icon__lbc--title': isTitle,
})}
/> />
{postfix}
</> </>
); );
}; };

4
ui/component/header/view.jsx
View file

@ -183,7 +183,7 @@ const Header = (props: Props) => {
navigate={`/$/${PAGES.WALLET}`} navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance" className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()} label={getWalletTitle()}
iconRight={ICONS.LBC} icon={ICONS.LBC}
// @if TARGET='app' // @if TARGET='app'
onDoubleClick={e => { onDoubleClick={e => {
e.stopPropagation(); e.stopPropagation();
@ -363,7 +363,7 @@ const Header = (props: Props) => {
navigate={`/$/${PAGES.WALLET}`} navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance" className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()} label={getWalletTitle()}
iconRight={ICONS.LBC} icon={ICONS.LBC}
// @if TARGET='app' // @if TARGET='app'
onDoubleClick={e => { onDoubleClick={e => {
e.stopPropagation(); e.stopPropagation();

2
ui/component/publishName/view.jsx
View file

@ -132,7 +132,7 @@ function PublishName(props: Props) {
step="any" step="any"
placeholder="0.123" placeholder="0.123"
className="form-field--price-amount" className="form-field--price-amount"
label={<LbcSymbol prefix={__('Deposit')} size={14} />} label={<LbcSymbol postfix={__('Deposit')} size={12} />}
value={bid} value={bid}
error={bidError} error={bidError}
disabled={!name} disabled={!name}

2
ui/component/walletBalance/view.jsx
View file

@ -27,7 +27,7 @@ const WalletBalance = (props: Props) => {
<React.Fragment> <React.Fragment>
<section className="columns"> <section className="columns">
<Card <Card
title={<LbcSymbol prefix={balance} isTitle />} title={<LbcSymbol postfix={balance} isTitle />}
subtitle={__('Available Balance')} subtitle={__('Available Balance')}
actions={ actions={
<div className="section__actions"> <div className="section__actions">

19
ui/component/walletSendTip/view.jsx
View file

@ -54,7 +54,7 @@ function WalletSendTip(props: Props) {
const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0); const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0);
const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false); const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
const [tipError, setTipError] = React.useState(); const [tipError, setTipError] = React.useState();
const [sendAsTip, setSendAsTip] = usePersistedState('comment-support:sendAsTip', true); const [sendAsTip, setSendAsTip] = React.useState(true); // usePersistedState('comment-support:sendAsTip', true);
const [isConfirming, setIsConfirming] = React.useState(false); const [isConfirming, setIsConfirming] = React.useState(false);
const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel'); const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel');
const { claim_id: claimId } = claim; const { claim_id: claimId } = claim;
@ -175,14 +175,14 @@ function WalletSendTip(props: Props) {
/> />
) : ( ) : (
<Card <Card
title={claimIsMine ? __('Boost your content') : isSupport ? __('Support this content') : __('Send a tip')} title={claimIsMine ? __('Boost your content') : isSupport ? __('Support this content') : __('Support')}
subtitle={ subtitle={
<React.Fragment> <React.Fragment>
{isSupport {isSupport
? __( ? __(
'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.' 'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
) )
: __('Send a chunk of change to this creator to let them know you appreciate their content.')}{' '} : __('Show this channel your appreciation by sending a donation.')}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />. <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
</React.Fragment> </React.Fragment>
} }
@ -197,7 +197,7 @@ function WalletSendTip(props: Props) {
<div className="confirm__value">{selectedChannel}</div> <div className="confirm__value">{selectedChannel}</div>
<div className="confirm__label">{__(isSupport ? 'Supporting' : 'Tipping')}</div> <div className="confirm__label">{__(isSupport ? 'Supporting' : 'Tipping')}</div>
<div className="confirm__value"> <div className="confirm__value">
<LbcSymbol prefix={tipAmount} size={22} /> <LbcSymbol postfix={tipAmount} size={22} />
</div> </div>
</div> </div>
</div> </div>
@ -233,7 +233,7 @@ function WalletSendTip(props: Props) {
'button-toggle--disabled': amount > balance, 'button-toggle--disabled': amount > balance,
})} })}
label={amount} label={amount}
iconRight={ICONS.LBC} icon={ICONS.LBC}
onClick={() => { onClick={() => {
setPresetTipAmount(amount); setPresetTipAmount(amount);
setUseCustomTip(false); setUseCustomTip(false);
@ -245,6 +245,7 @@ function WalletSendTip(props: Props) {
className={classnames('button-toggle button-toggle--expandformobile', { className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount), 'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
})} })}
icon={ICONS.LBC}
label={__('Custom')} label={__('Custom')}
onClick={() => setUseCustomTip(true)} onClick={() => setUseCustomTip(true)}
/> />
@ -267,8 +268,10 @@ function WalletSendTip(props: Props) {
label={ label={
<React.Fragment> <React.Fragment>
{__('Custom support amount')}{' '} {__('Custom support amount')}{' '}
<I18nMessage tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} /> }}> <I18nMessage
(%lbc_balance% available) tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
>
(%lbc_balance% Credits available)
</I18nMessage> </I18nMessage>
</React.Fragment> </React.Fragment>
} }
@ -298,7 +301,7 @@ function WalletSendTip(props: Props) {
} }
/> />
{fetchingChannels && <span className="help">{__('Loading your channels...')}</span>} {fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
{!claimIsMine && !fetchingChannels && ( {false && !claimIsMine && !fetchingChannels && (
<FormField <FormField
name="toggle-is-support" name="toggle-is-support"
type="checkbox" type="checkbox"

2
ui/modal/modalConfirmTransaction/view.jsx
View file

@ -32,7 +32,7 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
<div className="section section--padded card--inline confirm__wrapper"> <div className="section section--padded card--inline confirm__wrapper">
<div className="section"> <div className="section">
<div className="confirm__label">{__('Sending')}</div> <div className="confirm__label">{__('Sending')}</div>
<div className="confirm__value">{<LbcSymbol prefix={amount} size={22} />}</div> <div className="confirm__value">{<LbcSymbol postfix={amount} size={22} />}</div>
<div className="confirm__label">{__('To')}</div> <div className="confirm__label">{__('To')}</div>
<div className="confirm__value">{address}</div> <div className="confirm__value">{address}</div>
</div> </div>

2
ui/modal/modalRepost/view.jsx
View file

@ -181,7 +181,7 @@ function ModalRepost(props: Props) {
step="any" step="any"
placeholder="0.123" placeholder="0.123"
className="form-field--price-amount" className="form-field--price-amount"
label={<LbcSymbol prefix={__('Deposit')} size={14} />} label={<LbcSymbol postfix={__('Deposit')} size={14} />}
value={repostBid} value={repostBid}
error={repostBidError} error={repostBidError}
disabled={!repostName} disabled={!repostName}

4
ui/scss/component/_form-field.scss
View file

@ -105,6 +105,10 @@ label {
color: var(--color-input-label); color: var(--color-input-label);
display: inline-block; display: inline-block;
margin-bottom: var(--spacing-xxs); margin-bottom: var(--spacing-xxs);
.icon__lbc {
margin-bottom: 4px;
}
} }
input-submit { input-submit {

11
ui/scss/component/_icon.scss
View file

@ -46,17 +46,16 @@
.icon__lbc { .icon__lbc {
vertical-align: middle; vertical-align: middle;
// fill: none;
path {
// fill: none;
}
} }
.icon__lbc--with-text { .icon__lbc--before-text {
margin-left: 5px; margin-left: 5px;
} }
.icon__lbc--after-text {
margin-right: 5px;
}
.icon__lbc--title { .icon__lbc--title {
margin-bottom: 4px; margin-bottom: 4px;
} }

5
ui/scss/component/_purchase.scss
View file

@ -1,9 +1,6 @@
.credit-amount { .credit-amount {
display: inline-flex;
align-items: center;
.icon { .icon {
// margin-left: var(--spacing-xs); margin-bottom: 4px;
} }
} }