mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-08 02:52:39 -05:00
Added appearance animation
no refs. - restructured iframe hierarchy - added appearance animation
This commit is contained in:
Peter Zimon
parent
6fe329bdb0
commit
b035a0ae57
3 changed files with 58 additions and 89 deletions
|
|
@ -142,8 +142,8 @@ export default class App extends React.Component {
|
|||
return {
|
||||
showPopup: true,
|
||||
site: Fixtures.site,
|
||||
member: Fixtures.member.paid,
|
||||
page: 'signup'
|
||||
member: Fixtures.member.free,
|
||||
page: 'accountHome'
|
||||
};
|
||||
}
|
||||
return {};
|
||||
|
|
|
|||
|
|
@ -231,24 +231,56 @@ export const GlobalStyles = `
|
|||
|
||||
/* Global layout styles
|
||||
/* ----------------------------------------------------- */
|
||||
.gh-portal-popup-background {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "aaa";
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding-top: 100px;
|
||||
animation: fadein 0.2s;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% { opacity: 0; }
|
||||
100%{ opacity: 1.0; }
|
||||
}
|
||||
|
||||
.gh-portal-popup-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
letter-spacing: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
padding-bottom: 32px;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
width: 440px;
|
||||
border-radius: 5px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
|
||||
animation: popup 0.25s;
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
transform: scale(0.9) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
100%{
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-closeicon-container {
|
||||
|
|
|
|||
|
|
@ -7,37 +7,15 @@ import Pages, {getActivePage} from '../pages';
|
|||
const React = require('react');
|
||||
|
||||
const StylesWrapper = ({member}) => {
|
||||
const isPaidMember = (member && member.paid);
|
||||
const accountHome = isPaidMember ? {
|
||||
width: '428px',
|
||||
minHeight: '650px',
|
||||
maxHeight: '700px'
|
||||
} : {
|
||||
width: '428px',
|
||||
minHeight: '330px',
|
||||
maxHeight: '330px'
|
||||
};
|
||||
const accountProfile = isPaidMember ? {
|
||||
width: '428px',
|
||||
minHeight: '320px',
|
||||
maxHeight: '320px'
|
||||
} : {
|
||||
width: '428px',
|
||||
minHeight: '380px',
|
||||
maxHeight: '380px'
|
||||
};
|
||||
return {
|
||||
modalContainer: {
|
||||
zIndex: '1000',
|
||||
paddingTop: '100px',
|
||||
position: 'fixed',
|
||||
left: '0',
|
||||
top: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
textAlign: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.65)'
|
||||
overflow: 'hidden'
|
||||
},
|
||||
frame: {
|
||||
common: {
|
||||
|
|
@ -45,36 +23,13 @@ const StylesWrapper = ({member}) => {
|
|||
position: 'relative',
|
||||
padding: '0',
|
||||
outline: '0',
|
||||
width: '440px',
|
||||
borderRadius: '5px',
|
||||
boxShadow: '0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)',
|
||||
width: '100%',
|
||||
opacity: '1',
|
||||
overflow: 'hidden',
|
||||
height: '60%',
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
signin: {
|
||||
minHeight: '200px',
|
||||
maxHeight: '330px'
|
||||
},
|
||||
signup: {
|
||||
minHeight: '580px',
|
||||
maxHeight: '620px'
|
||||
},
|
||||
accountHome,
|
||||
magiclink: {
|
||||
minHeight: '230px',
|
||||
maxHeight: '230px'
|
||||
},
|
||||
loading: {
|
||||
minHeight: '130px'
|
||||
},
|
||||
accountPlan: {
|
||||
width: '428px',
|
||||
minHeight: '290px',
|
||||
maxHeight: '290px'
|
||||
},
|
||||
accountProfile,
|
||||
height: '100%'
|
||||
}
|
||||
},
|
||||
page: {
|
||||
links: {
|
||||
width: '600px'
|
||||
}
|
||||
|
|
@ -89,24 +44,6 @@ class PopupContent extends React.Component {
|
|||
super(props);
|
||||
this.state = { };
|
||||
this.container = React.createRef();
|
||||
this.height = null;
|
||||
}
|
||||
|
||||
updateHeight(height) {
|
||||
this.props.updateHeight && this.props.updateHeight(height);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.height = this.container.current && this.container.current.offsetHeight;
|
||||
this.updateHeight(this.height);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const height = this.container.current && this.container.current.offsetHeight;
|
||||
if (height !== this.height) {
|
||||
this.height = height;
|
||||
this.updateHeight(this.height);
|
||||
}
|
||||
}
|
||||
|
||||
renderActivePage() {
|
||||
|
|
@ -128,8 +65,14 @@ class PopupContent extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {page} = this.context;
|
||||
getActivePage({page});
|
||||
const Styles = StylesWrapper({page});
|
||||
const pageStyle = {
|
||||
...Styles.page[page]
|
||||
};
|
||||
return (
|
||||
<div className='gh-portal-popup-container' ref={this.container}>
|
||||
<div className='gh-portal-popup-container' style={pageStyle} ref={this.container}>
|
||||
{this.renderPopupClose()}
|
||||
{this.renderActivePage()}
|
||||
</div>
|
||||
|
|
@ -188,20 +131,14 @@ export default class PopupModal extends React.Component {
|
|||
renderFrameContainer() {
|
||||
const {member} = this.context;
|
||||
const Styles = StylesWrapper({member});
|
||||
const page = getActivePage({page: this.context.page});
|
||||
const frameStyle = {
|
||||
...Styles.frame.common,
|
||||
...Styles.frame[page]
|
||||
...Styles.frame.common
|
||||
};
|
||||
if (this.state.height) {
|
||||
const updatedHeight = this.state.height;
|
||||
frameStyle.minHeight = `${updatedHeight}px`;
|
||||
frameStyle.maxHeight = `${updatedHeight}px`;
|
||||
}
|
||||
return (
|
||||
<div style={Styles.modalContainer} onClick = {e => this.handlePopupClose(e)}>
|
||||
<div style={Styles.modalContainer}>
|
||||
<Frame style={frameStyle} title="membersjs-popup" head={this.renderFrameStyles()}>
|
||||
<PopupContent updateHeight={height => this.onHeightChange(height)}/>
|
||||
<div className='gh-portal-popup-background' onClick = {e => this.handlePopupClose(e)}></div>
|
||||
<PopupContent />
|
||||
</Frame>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue