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

style and limit height of errors on tip unlock modal

Browse source
This commit is contained in:
jessop 2020-04-02 14:45:21 -04:00
parent 3c41c5006c
commit 067615afc2
3 changed files with 70 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/app-strings.json
View file

@ -1116,8 +1116,15 @@
"Repost %count%": "Repost %count%",
"File Description": "File Description",
"View %count% reposts": "View %count% reposts",
"Preparing your content": "Preparing your content",
"Already have an account? %sign_in%": "Already have an account? %sign_in%",
"Sign in with a password (optional)": "Sign in with a password (optional)",
"Don't have an account? %sign_up%": "Don't have an account? %sign_up%"
"Don't have an account? %sign_up%": "Don't have an account? %sign_up%",
"Preparing your content": "Preparing your content",
"File Details": "File Details",
"You can unlock all or some of this LBC at any time.": "You can unlock all or some of this LBC at any time.",
"Keeping it locked improves the trust and discoverability of your content.": "Keeping it locked improves the trust and discoverability of your content.",
"It's usually only worth unlocking what you intend to use immediately. %learn_more%": "It's usually only worth unlocking what you intend to use immediately. %learn_more%",
"%amount% available to unlock": "%amount% available to unlock",
"%message% hihi": "%message% hihi",
"Comrade Yrbl, we have a problem": "Comrade Yrbl, we have a problem"
}

102
ui/component/supportsLiquidate/view.jsx
View file

@ -107,60 +107,68 @@ const SupportsLiquidate = (props: Props) => {
</>
}
body={
<>
<div className="section">
<I18nMessage
tokens={{
amount: (
<strong>
<CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
</strong>
),
}}
>
%amount% available to unlock
</I18nMessage>
</div>
<div className="section">
{previewBalance === 0 && <p>{__('No unlockable tips available')}</p>}
{previewBalance === undefined && <p>{__('Loading...')}</p>}
{previewBalance && (
<Form onSubmit={handleSubmit}>
<label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label>
<FormField
name="supports_liquidate_range"
type={'range'}
min={0}
step={0.01}
max={previewBalance}
value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
onChange={e => handleChange(e.target.value)}
/>
<label className="range__label">
<span>0</span>
<span>{previewBalance / 2}</span>
<span>{previewBalance}</span>
</label>
<FormField
type="text"
value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4}
helper={message}
onChange={e => handleChange(e.target.value)}
/>
</Form>
)}
</div>
</>
!abandonClaimError && (
<>
<div className="section">
<I18nMessage
tokens={{
amount: (
<strong>
<CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
</strong>
),
}}
>
%amount% available to unlock
</I18nMessage>
</div>
<div className="section">
{previewBalance === 0 && <p>{__('No unlockable tips available')}</p>}
{previewBalance === undefined && <p>{__('Loading...')}</p>}
{previewBalance && (
<Form onSubmit={handleSubmit}>
<label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label>
<FormField
name="supports_liquidate_range"
type={'range'}
min={0}
step={0.01}
max={previewBalance}
value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
onChange={e => handleChange(e.target.value)}
/>
<label className="range__label">
<span>0</span>
<span>{previewBalance / 2}</span>
<span>{previewBalance}</span>
</label>
<FormField
type="text"
value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4}
helper={message}
onChange={e => handleChange(e.target.value)}
/>
</Form>
)}
</div>
</>
)
}
actions={
<React.Fragment>
{abandonClaimError ? (
<>
<div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
<Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
<div className="error__wrapper--no-overflow">
<div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
</div>
<div className="section__actions">
<Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
</div>
</>
) : (
<Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
<div className="section__actions">
<Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
</div>
)}
</React.Fragment>
}

6
ui/scss/init/_gui.scss
View file

@ -244,6 +244,12 @@ img {
border-radius: var(--border-radius);
}
.error__wrapper--no-overflow {
@extend .error-wrapper;
max-height: 10rem;
overflow: hidden;
}
.error__text {
color: var(--color-text-error);
}