woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

💫 Animate the confirmation message

Browse source
This commit is contained in:
Philipp Stracker 2025-02-07 16:50:46 +01:00
parent b985059181
commit 877c7bbe3b
No known key found for this signature in database
2 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -134,9 +134,21 @@ $margin_bottom: 48px;
}
.ppcp-r-navbar-notice {
// Theming.
background: var(--navbar-notice-background);
color: var(--navbar-notice-color);
// Animation.
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
opacity: 0;
transform: translateY(-10px);
&.ppcp--animating {
opacity: 1;
transform: translateY(0);
}
// Styling.
position: absolute;
top: 48px;
right: 0;

19
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
View file

@ -11,6 +11,9 @@ import classNames from 'classnames';
// How long the save confirmation stays visible, in milliseconds.
const SAVE_CONFIRMATION_DURATION = 2500;
// How long does the CSS transition last (match this with _navigation.scss values)
const NOTIFICATION_ANIMATION_DURATION = 300;
const SettingsNavigation = ( {
canSave = true,
tabs,
@ -50,6 +53,7 @@ export default SettingsNavigation;
const SaveStateMessage = () => {
const [ isSaving, setIsSaving ] = useState( false );
const [ isVisible, setIsVisible ] = useState( false );
const [ isAnimating, setIsAnimating ] = useState( false );
const { onStarted, onFinished } = CommonHooks.useActivityObserver();
const timerRef = useRef( null );
@ -57,6 +61,7 @@ const SaveStateMessage = () => {
if ( started.startsWith( 'persist' ) ) {
setIsSaving( true );
setIsVisible( false );
setIsAnimating( false );
if ( timerRef.current ) {
clearTimeout( timerRef.current );
@ -68,8 +73,17 @@ const SaveStateMessage = () => {
( done, remaining ) => {
if ( isSaving && remaining.length === 0 ) {
setIsSaving( false );
setIsVisible( true );
}
setIsVisible( true );
setTimeout( () => setIsAnimating( true ), 50 );
timerRef.current = setTimeout( () => {
setIsAnimating( false );
setTimeout(
() => setIsVisible( false ),
NOTIFICATION_ANIMATION_DURATION
);
}, SAVE_CONFIRMATION_DURATION );
}
},
[ isSaving ]
);
@ -84,6 +98,7 @@ const SaveStateMessage = () => {
}
const className = classNames( 'ppcp-r-navbar-notice', 'ppcp--success', {
'ppcp--animating': isAnimating,
} );
return (