Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Cleaned action running states

Browse source 
no issue

- Adds running states for action buttons on plan and profile pages
This commit is contained in:
Rish 2020-05-28 17:21:46 +05:30
parent a9a083f2f1
commit b361754ea9
2 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -89,16 +89,26 @@ export default class AccountPlanPage extends React.Component {
selectedPlan={this.state.plan}
onPlanSelect={(e, name) => this.onPlanSelect(e, name)}
/>
<ActionButton
label="Continue"
onClick={e => this.onPlanCheckout(e)}
brandColor={this.context.brandColor}
style={{button: {marginTop: '12px'}}}
/>
{this.renderActionButton()}
</div>
);
}
renderActionButton() {
const isRunning = ['updateSubscription:running', 'checkoutPlan:running'].includes(this.context.action);
const label = isRunning ? 'Updating...' : 'Continue';
const disabled = isRunning ? true : false;
return (
<ActionButton
style={{button: {marginTop: '12px'}}}
onClick={e => this.onPlanCheckout(e)}
disabled={disabled}
brandColor={this.context.brandColor}
label={label}
/>
);
}
render() {
return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>

22
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -31,17 +31,27 @@ export default class AccountProfilePage extends React.Component {
this.context.onAction('updateMember', {email, name});
}
renderSaveButton() {
const isRunning = (this.context.action === 'updateMember:running');
const label = isRunning ? 'Saving' : 'Save';
const disabled = isRunning ? true : false;
return (
<ActionButton
style={{button: {width: '120px'}}}
onClick={e => this.onProfileSave(e)}
disabled={disabled}
brandColor={this.context.brandColor}
label={label}
/>
);
}
renderAccountFooter() {
return (
<div style={{display: 'flex', padding: '0 24px', marginTop: '12px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px', alignItems: 'center'}}>
<div style={{cursor: 'pointer', color: 'red'}} role='button'> Delete Account </div>
<div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
<ActionButton
style={{button: {width: '120px'}}}
label="Save"
onClick={e => this.onProfileSave(e)}
brandColor={this.context.brandColor}
/>
{this.renderSaveButton()}
</div>
</div>
);