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

Added back button and rearranged logout

Browse source
This commit is contained in:
Peter Zimon 2020-09-10 13:55:20 +02:00 • committed by Rishabh Garg
parent 24a29773e2
commit fab3e3ff3b
7 changed files with 104 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/portal/src/App.js
View file

@ -13,7 +13,7 @@ const DEV_MODE_DATA = {
showPopup: true,
site: Fixtures.site,
member: Fixtures.member.paid,
page: 'accountPlan'
page: 'accountHome'
};
export default class App extends React.Component {
constructor(props) {

73
ghost/portal/src/components/Frame.styles.js
View file

@ -4,6 +4,7 @@
*/
import {ActionButtonStyles} from './common/ActionButton';
import {BackButtonStyles} from './common/BackButton';
import {SwitchStyles} from './common/Switch';
import {AccountHomePageStyles} from './pages/AccountHomePage';
import {AccountPlanPageStyles} from './pages/AccountPlanPage';
@ -164,7 +165,7 @@ const GlobalStyles = `
background: var(--white);
border: none;
min-width: 80px;
height: 40px;
height: 42px;
padding: 0 1.8rem;
border-radius: 4px;
cursor: pointer;
@ -227,8 +228,8 @@ const GlobalStyles = `
.gh-portal-btn-logout {
position: absolute;
top: 13px;
left: 14px;
top: 22px;
left: 24px;
background: none;
border: none;
height: unset;
@ -259,6 +260,29 @@ const GlobalStyles = `
transform: translateX(-4px);
}
.gh-portal-logouticon {
color: var(--grey9);
cursor: pointer;
width: 23px;
height: 23px;
padding: 6px;
transform: translateX(0);
transition: all 0.2s ease-in-out;
}
.gh-portal-logouticon path {
stroke: var(--grey9);
transition: all 0.2s ease-in-out;
}
.gh-portal-btn-logout:hover .gh-portal-logouticon {
transform: translateX(-2px);
}
.gh-portal-btn-logout:hover .gh-portal-logouticon path {
stroke: var(--grey3);
}
/* Global layout styles
/* ----------------------------------------------------- */
.gh-portal-popup-background {
@ -360,8 +384,8 @@ const GlobalStyles = `
.gh-portal-closeicon-container {
position: absolute;
top: 8px;
right: 8px;
top: 20px;
right: 20px;
z-index: 999;
}
@ -384,29 +408,6 @@ const GlobalStyles = `
left: 8px;
}
.gh-portal-logouticon {
color: var(--grey9);
cursor: pointer;
width: 23px;
height: 23px;
padding: 6px;
transform: translateX(0);
transition: all 0.2s ease-in-out;
}
.gh-portal-logouticon path {
stroke: var(--grey9);
transition: all 0.2s ease-in-out;
}
.gh-portal-btn-logout:hover .gh-portal-logouticon {
transform: translateX(-2px);
}
.gh-portal-btn-logout:hover .gh-portal-logouticon path {
stroke: var(--grey3);
}
.gh-portal-header {
display: flex;
flex-direction: column;
@ -426,19 +427,8 @@ const GlobalStyles = `
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 0 20px;
}
.gh-portal-detail-header .gh-portal-btn-back,
.gh-portal-detail-header .gh-portal-btn-back:hover {
position: absolute;
top: -10px;
left: 0;
background: none;
padding: 0;
margin: 0;
box-shadow: none;
justify-content: center;
margin: -4px 0 24px;
}
.gh-portal-detail-footer .gh-portal-btn {
@ -648,6 +638,7 @@ const FrameStyle =
PlanSectionStyles +
SwitchStyles +
ActionButtonStyles +
BackButtonStyles +
AvatarStyles +
MagicLinkStyles +
LinkPageStyles +

50
ghost/portal/src/components/common/BackButton.js Normal file
View file

@ -0,0 +1,50 @@
import React from 'react';
import {ReactComponent as LeftArrowIcon} from '../../images/icons/arrow-left.svg';
export const BackButtonStyles = `
.gh-portal-btn-back,
.gh-portal-btn-back:hover {
box-shadow: none;
position: relative;
height: unset;
min-width: unset;
position: absolute;
top: -3px;
left: -12px;
background: none;
padding: 8px;
margin: 0;
box-shadow: none;
color: var(--grey3);
}
.gh-portal-btn-back:hover {
color: var(--grey1);
transform: translateX(-4px);
}
.gh-portal-btn-back svg {
width: 16px;
height: 16px;
}
.gh-portal-btn-main:hover {
box-shadow: none;
}
`;
function ActionButton({label = 'Back', brandColor = '#3eb0ef', hidden = false, onClick}) {
if (hidden) {
return;
}
let style = {
color: brandColor
};
return (
<button className='gh-portal-btn gh-portal-btn-back' onClick={e => onClick(e)}>
<LeftArrowIcon /> {label}
</button>
);
}
export default ActionButton;

41
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -1,5 +1,4 @@
import AppContext from '../../AppContext';
import {ReactComponent as LogoutIcon} from '../../images/icons/logout.svg';
import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton';
import Switch from '../common/Switch';
@ -9,10 +8,13 @@ import {getDateString} from '../../utils/date-time';
const React = require('react');
export const AccountHomePageStyles = `
<<<<<<< HEAD
.gh-portal-content.account-home {
max-height: calc(100vh - 12vw - 104px);
}
=======
>>>>>>> Added back button and rearranged logout
.gh-portal-account-main {
background: var(--grey13);
margin: -32px;
@ -85,14 +87,6 @@ export const AccountHomePageStyles = `
}
`;
const LogoutButton = ({handleSignout}) => {
return (
<button className='gh-portal-btn gh-portal-btn-logout' name='logout' aria-label='logout' onClick = {e => handleSignout(e)}>
<LogoutIcon className='gh-portal-logouticon' /><span className='label'>Logout</span>
</button>
);
};
const UserAvatar = ({avatar, brandColor}) => {
return (
<div>
@ -101,18 +95,16 @@ const UserAvatar = ({avatar, brandColor}) => {
);
};
const AccountFooter = ({onClose, supportAddress = ''}) => {
const AccountFooter = ({onClose, handleSignout, supportAddress = ''}) => {
const supportAddressMail = `mailto:${supportAddress}`;
return (
<footer className='gh-portal-account-footer'>
<ul className='gh-portal-account-footermenu'>
<li><a className='gh-portal-btn' href={supportAddressMail}>Contact support</a></li>
<li><button className='gh-portal-btn' name='logout' aria-label='logout' onClick={e => handleSignout(e)}>Logout</button></li>
</ul>
<div className='gh-portal-account-footerright'>
<ul className='gh-portal-account-footermenu'>
<li>
<button className='gh-portal-btn gh-portal-btn-branded' onClick={onClose}>OK</button>
</li>
<li><a className='gh-portal-btn gh-portal-btn-branded' href={supportAddressMail}>Contact support</a></li>
</ul>
</div>
</footer>
@ -408,18 +400,15 @@ export default class AccountHomePage extends React.Component {
}
return (
<div className='gh-portal-account-wrapper'>
<div className='gh-portal-content account-home'>
<LogoutButton handleSignout={e => this.handleSignout(e)} />
<AccountMain
{...this.context}
openSubscribe={e => this.openSubscribe(e)}
openEditProfile={e => this.openEditProfile(e)}
onToggleSubscription={(e, subscribed) => this.onToggleSubscription(e, subscribed)}
openUpdatePlan={(e, subscribed) => this.openUpdatePlan(e, subscribed)}
onEditBilling={(e, subscribed) => this.onEditBilling(e, subscribed)}
/>
</div>
<AccountFooter onClose={() => this.context.onAction('closePopup')} supportAddress={supportAddress} />
<AccountMain
{...this.context}
openSubscribe={e => this.openSubscribe(e)}
openEditProfile={e => this.openEditProfile(e)}
onToggleSubscription={(e, subscribed) => this.onToggleSubscription(e, subscribed)}
openUpdatePlan={(e, subscribed) => this.openUpdatePlan(e, subscribed)}
onEditBilling={(e, subscribed) => this.onEditBilling(e, subscribed)}
/>
<AccountFooter onClose={() => this.context.onAction('closePopup')} handleSignout={e => this.handleSignout(e)} supportAddress={supportAddress} />
</div>
);
}

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

@ -1,5 +1,6 @@
import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton';
import BackButton from '../common/BackButton';
import PlansSection from '../common/PlansSection';
import {getDateString} from '../../utils/date-time';
import {getMemberSubscription, getSitePlans} from '../../utils/helpers';
@ -122,6 +123,7 @@ export default class AccountPlanPage extends React.Component {
const title = member.paid ? 'Choose Plan' : 'Choose your subscription';
return (
<header className='gh-portal-detail-header'>
<BackButton brandColor={this.context.brandColor} onClick={e => this.onBack(e)} />
<h3 className='gh-portal-main-title'>{title}</h3>
</header>
);

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

@ -1,6 +1,7 @@
import AppContext from '../../AppContext';
import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton';
import BackButton from '../common/BackButton';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
@ -71,7 +72,7 @@ export default class AccountProfilePage extends React.Component {
disabled={disabled}
brandColor={this.context.brandColor}
label={label}
style={{height: '40px'}}
style={{height: '44px', width: '100%'}}
/>
);
}
@ -85,7 +86,6 @@ export default class AccountProfilePage extends React.Component {
renderAccountFooter() {
return (
<footer className='gh-portal-action-footer'>
<button className='gh-portal-btn' onClick={e => this.onBack(e)}>Cancel</button>
{this.renderSaveButton()}
</footer>
);
@ -94,6 +94,7 @@ export default class AccountProfilePage extends React.Component {
renderHeader() {
return (
<header className='gh-portal-detail-header'>
<BackButton brandColor={this.context.brandColor} onClick={e => this.onBack(e)} />
<h3 className='gh-portal-main-title'>Account settings</h3>
</header>
);

2
ghost/portal/src/utils/fixtures.js
View file

@ -58,7 +58,7 @@ export const member = {
status: 'active',
start_date: '2019-05-01T11:42:40.000Z',
default_payment_card_last4: '4242',
cancel_at_period_end: true,
cancel_at_period_end: false,
current_period_end: '2021-06-05T11:42:40.000Z'
}],
paid: true