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

13
static/app-strings.json
View file

@ -1116,8 +1116,17 @@
"Repost %count%": "Repost %count%", "Repost %count%": "Repost %count%",
"File Description": "File Description", "File Description": "File Description",
"View %count% reposts": "View %count% reposts", "View %count% reposts": "View %count% reposts",
"Preparing your content": "Preparing your content",
"Already have an account? %sign_in%": "Already have an account? %sign_in%", "Already have an account? %sign_in%": "Already have an account? %sign_in%",
"Sign in with a password (optional)": "Sign in with a password (optional)", "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 { Form, FormField } from 'component/common/form';
import Card from 'component/common/card'; import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import ErrorText from 'component/common/error-text';
type Props = { type Props = {
balance: number, balance: number,
@ -107,61 +108,67 @@ const SupportsLiquidate = (props: Props) => {
</> </>
} }
body={ body={
<> abandonClaimError ? (
<div className="section"> <div className="error__wrapper--no-overflow">
<I18nMessage <ErrorText>{__('%message%', { message: abandonClaimError })}</ErrorText>
tokens={{
amount: (
<strong>
<CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
</strong>
),
}}
>
%amount% available to unlock
</I18nMessage>
</div> </div>
<div className="section"> ) : (
{previewBalance === 0 && <p>{__('No unlockable tips available')}</p>} <>
{previewBalance === undefined && <p>{__('Loading...')}</p>} <div className="section">
{previewBalance && ( <I18nMessage
<Form onSubmit={handleSubmit}> tokens={{
<label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label> amount: (
<FormField <strong>
name="supports_liquidate_range" <CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
type={'range'} </strong>
min={0} ),
step={0.01} }}
max={previewBalance} >
value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available %amount% available to unlock
onChange={e => handleChange(e.target.value)} </I18nMessage>
/> </div>
<label className="range__label"> <div className="section">
<span>0</span> {previewBalance === 0 && <p>{__('No unlockable tips available')}</p>}
<span>{previewBalance / 2}</span> {previewBalance === undefined && <p>{__('Loading...')}</p>}
<span>{previewBalance}</span> {previewBalance && (
</label> <Form onSubmit={handleSubmit}>
<FormField <label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label>
type="text" <FormField
value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4} name="supports_liquidate_range"
helper={message} type={'range'}
onChange={e => handleChange(e.target.value)} min={0}
/> step={0.01}
</Form> max={previewBalance}
)} value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
</div> 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={ actions={
<React.Fragment> <React.Fragment>
{abandonClaimError ? ( <div className="section__actions">
<> <Button
<div className="error__text">{__('%message%', { message: abandonClaimError })}</div> disabled={error}
<Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} /> button="primary"
</> onClick={abandonClaimError ? handleClose : handleSubmit}
) : ( label={abandonClaimError ? __('Done') : __('Unlock')}
<Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} /> />
)} </div>
</React.Fragment> </React.Fragment>
} }
/> />

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

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