From b035a0ae573d265212a2c64c490d079582c2be94 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 23 Jul 2020 19:01:15 +0200 Subject: [PATCH] Added appearance animation no refs. - restructured iframe hierarchy - added appearance animation --- ghost/portal/src/App.js | 4 +- ghost/portal/src/components/Frame.styles.js | 46 ++++++++-- ghost/portal/src/components/PopupModal.js | 97 ++++----------------- 3 files changed, 58 insertions(+), 89 deletions(-) diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index 014144a180..df23bd7c1c 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -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 {}; diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index a20f962278..e1ea2b74dc 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -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 { diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js index 311ff9c9c5..13ac278ac9 100644 --- a/ghost/portal/src/components/PopupModal.js +++ b/ghost/portal/src/components/PopupModal.js @@ -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 ( -
+
{this.renderPopupClose()} {this.renderActivePage()}
@@ -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 ( -
this.handlePopupClose(e)}> +
- this.onHeightChange(height)}/> +
this.handlePopupClose(e)}>
+
);