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

Merge pull request #3943 from lbryio/fix-tipSupportErrors

Browse source 
style and limit height of errors on tip unlock modal
This commit is contained in:
jessopb 2020-04-14 09:04:39 -04:00 committed by GitHub
commit d72a3deadc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/app-strings.json
View file

@ -1116,8 +1116,17 @@
"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",
"How much would you like to unlock?": "How much would you like to unlock?",
"A prudent choice": "A prudent choice",
"Join": "Join"
}

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

@ -6,6 +6,7 @@ import Button from 'component/button';
import { Form, FormField } from 'component/common/form';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import ErrorText from 'component/common/error-text';
type Props = {
balance: number,
@ -107,61 +108,67 @@ 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>
abandonClaimError ? (
<div className="error__wrapper--no-overflow">
<ErrorText>{__('%message%', { message: abandonClaimError })}</ErrorText>
</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>
</>
) : (
<>
<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')} />
</>
) : (
<Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
)}
<div className="section__actions">
<Button
disabled={error}
button="primary"
onClick={abandonClaimError ? handleClose : handleSubmit}
label={abandonClaimError ? __('Done') : __('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);
}