From b8a57d6ddf3ea72c8f0e7b8b1d526cc6f79a9cea Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 13 Oct 2020 14:22:05 +0200 Subject: [PATCH] Updated animation timings no refs. - removed double trigger of in-popup notifications - adjusted timing and easing for both in-popup and global notifications --- ghost/portal/src/App.js | 2 +- ghost/portal/src/actions.js | 4 ++-- ghost/portal/src/components/Frame.styles.js | 2 +- ghost/portal/src/components/Notification.js | 2 +- ghost/portal/src/components/Notification.styles.js | 13 +++++++------ .../src/components/common/PopupNotification.js | 11 +++++------ ghost/portal/src/utils/fixtures.js | 2 +- 7 files changed, 18 insertions(+), 18 deletions(-) diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index 4bf5bcd1bb..30137b5d22 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -16,7 +16,7 @@ const DEV_MODE_DATA = { showPopup: true, site: Fixtures.site, member: Fixtures.member.paid, - page: 'signup' + page: 'accountHome' }; export default class App extends React.Component { constructor(props) { diff --git a/ghost/portal/src/actions.js b/ghost/portal/src/actions.js index 3d8781097a..84b1d324e6 100644 --- a/ghost/portal/src/actions.js +++ b/ghost/portal/src/actions.js @@ -211,7 +211,7 @@ async function updateNewsletter({data, state, api}) { action, member: member, popupNotification: createPopupNotification({ - type: action, autoHide: true, duration: 2000, closeable: true, state, status: 'success', + type: action, autoHide: true, closeable: true, state, status: 'success', message: 'Email newsletter settings updated' }) }; @@ -319,7 +319,7 @@ async function updateProfile({data, state, api}) { action: 'updateProfile:success', page: 'accountHome', popupNotification: createPopupNotification({ - type: 'updateProfile:success', autoHide: true, duration: 2000, closeable: true, status: 'success', state, + type: 'updateProfile:success', autoHide: true, closeable: true, status: 'success', state, message: 'Account details updated successfully' }) }; diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 181e83c347..abcf7115c3 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -252,7 +252,7 @@ const FrameStyles = ` } .gh-portal-container-narrow { - width: 388px; + width: 380px; } .gh-portal-popup-container.preview { diff --git a/ghost/portal/src/components/Notification.js b/ghost/portal/src/components/Notification.js index f3ceb21013..1554e3f1fd 100644 --- a/ghost/portal/src/components/Notification.js +++ b/ghost/portal/src/components/Notification.js @@ -114,7 +114,7 @@ class NotificationContent extends React.Component { } componentDidMount() { - const {autoHide, duration = 2000} = this.props; + const {autoHide, duration = 2400} = this.props; const {showPopup} = this.context; if (showPopup) { this.setState({ diff --git a/ghost/portal/src/components/Notification.styles.js b/ghost/portal/src/components/Notification.styles.js index 07fa57f7b1..38bde8f009 100644 --- a/ghost/portal/src/components/Notification.styles.js +++ b/ghost/portal/src/components/Notification.styles.js @@ -23,11 +23,11 @@ const NotificationStyles = ` color: var(--white); border-radius: 5px; box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.08); - animation: notification-slidein 0.7s ease-in-out; + animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000); } .gh-portal-notification.slideout { - animation: notification-slideout 0.6s ease-in-out; + animation: notification-slideout 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190); } .gh-portal-notification.hide { @@ -94,25 +94,25 @@ const NotificationStyles = ` @keyframes notification-slidein { 0% { transform: translateX(380px); } - 75% { transform: translateX(-8px); } + 60% { transform: translateX(-6px); } 100% { transform: translateX(0); } } @keyframes notification-slideout { 0% { transform: translateX(0); } - 25% { transform: translateX(-8px); } + 30% { transform: translateX(-10px); } 100% { transform: translateX(380px); } } @keyframes notification-slidein-mobile { 0% { transform: translateY(-150px); } - 75% { transform: translateY(8px); } + 50% { transform: translateY(6px); } 100% { transform: translateY(0); } } @keyframes notification-slideout-mobile { 0% { transform: translateY(0); } - 25% { transform: translateY(8px); } + 35% { transform: translateY(6px); } 100% { transform: translateY(-150px); } } @@ -124,6 +124,7 @@ const NotificationStyles = ` } .gh-portal-notification.slideout { + animation-duration: 0.55s; animation-name: notification-slideout-mobile; } } diff --git a/ghost/portal/src/components/common/PopupNotification.js b/ghost/portal/src/components/common/PopupNotification.js index 45dd54dda8..668341ec3f 100644 --- a/ghost/portal/src/components/common/PopupNotification.js +++ b/ghost/portal/src/components/common/PopupNotification.js @@ -25,7 +25,7 @@ export const PopupNotificationStyles = ` } .gh-portal-popupnotification.slideout { - animation: popupnotification-slideout 0.6s ease-in-out; + animation: popupnotification-slideout 0.48s ease-in; } .gh-portal-popupnotification p { @@ -144,8 +144,11 @@ export default class PopupNotification extends React.Component { } handlePopupNotification({popupNotification}) { + this.setState({ + notificationCount: popupNotification.count + }); if (popupNotification.autoHide) { - const {duration = 2400} = popupNotification; + const {duration = 2600} = popupNotification; this.timeoutId = setTimeout(() => { this.setState((state) => { if (state.className !== 'slideout') { @@ -157,10 +160,6 @@ export default class PopupNotification extends React.Component { return {}; }); }, duration); - } else { - this.setState({ - notificationCount: popupNotification.count - }); } } diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js index d9696606d2..1e60218d04 100644 --- a/ghost/portal/src/utils/fixtures.js +++ b/ghost/portal/src/utils/fixtures.js @@ -15,7 +15,7 @@ export const site = { is_stripe_configured: true, portal_button: true, portal_name: true, - portal_plans: ['free', 'monthly', 'yearly'], + portal_plans: ['yearly'], portal_button_icon: 'icon-1', portal_button_signup_text: 'Subscribe now', portal_button_style: 'icon-and-text',