Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Modal styles/UX #40

Merged
merged 10 commits into from
Oct 25, 2024
Merged

Update Modal styles/UX #40

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
94382f2
on install and activation complete event update message rather than c…
circlecube Oct 24, 2024
1d2fb36
minor style tweaks to modal and heading
circlecube Oct 24, 2024
0f02557
only close on outside click when in failed state
circlecube Oct 24, 2024
874d990
give modal background a darker background and zindex big enough to di…
circlecube Oct 24, 2024
96c5441
remove whitespace for lint
circlecube Oct 24, 2024
502e262
Merge branch 'main' into update/modal-view
wpscholar Oct 25, 2024
4d3a06d
Bump version
wpscholar Oct 25, 2024
543d67a
Update build
wpscholar Oct 25, 2024
602238d
Ensure modal closes for internal redirect
wpscholar Oct 25, 2024
427c7fd
Production build
wpscholar Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions src/Installer/components/Modal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ const Modal = ( {
};

const handleClickOutside = ( event ) => {
if ( modalRef.current && ! modalRef.current.contains( event.target ) ) {
if (
pluginStatus === 'failed' && // only close on outside click when in failed state
modalRef.current &&
! modalRef.current.contains( event.target )
) {
showModal( false );
}
};
Expand Down Expand Up @@ -137,7 +141,6 @@ const Modal = ( {
},
} );
setPluginStatus( 'completed' );
showModal( false );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might not close the modal if there is an internal redirect, If that is okay it should be fine.

For example we are on: {siteUrl}/wp-admin/admin.php?page=bluehost#/home and we install the WonderCart Plugin with the CTA: DATA It redirects us to an internal page and I am not sure if the modal closes in that case.

window.location.href = redirectUrl;
} catch ( e ) {
setPluginStatus( 'failed' );
Expand Down Expand Up @@ -174,7 +177,7 @@ const Modal = ( {
const errorMessage = createInterpolateElement(
__(
'Sorry, there was an error installing and activating the plugin. Please try again. If the problem persists, <a>contact support</a>.',
'wp-module-onboarding'
'wp-module-installer'
),
{
// eslint-disable-next-line jsx-a11y/anchor-has-content
Expand All @@ -194,7 +197,7 @@ const Modal = ( {
<div className="nfd-installer-modal__content-section">
<img
src={ loadingInstaller }
alt={ __( 'Loading Vector.', 'wp-module-onboarding' ) }
alt={ __( 'Loading Vector.', 'wp-module-installer' ) }
className="nfd-installer-modal__content-image"
/>
{ pluginStatus === 'installing' && (
Expand All @@ -203,15 +206,26 @@ const Modal = ( {
{ sprintf(
/* translators: %s: Plugin Name */
__(
'Activating the %s',
'wp-module-onboarding'
'Activating %s',
'wp-module-installer'
),
pluginName
) }
</div>
<div className="nfd-installer-modal__loader"></div>
</>
) }
{ pluginStatus === 'completed' && (
<>
<div className="nfd-installer-modal__content-subheading">
{ __(
'Activation Complete! Redirecting…',
'wp-module-installer'
) }
</div>
<div className="nfd-installer-modal__loader"></div>
</>
) }
{ pluginStatus === 'failed' && (
<div className="nfd-installer-modal__content-error">
<img
Expand Down
51 changes: 26 additions & 25 deletions src/Installer/components/Modal/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
.nfd-installer-modal {
top: 0;
left: 0;
z-index: 99;
width: 100vw;
height: 100vh;
display: flex;
position: fixed;
align-items: center;
background: rgba(0, 0, 0, 0.5);
display: flex;
height: 100vh;
justify-content: center;
background: rgba(255, 255, 255, 0.5);
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 99;

@media (max-width: #{ ($break-small) }) {
top: 30px;
}

&__content {
width: 40vw;
background-color: #fff;
border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
max-width: 80vw;
padding: 72px;
position: relative;
border-radius: 8px;
text-align: center;
background-color: #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
width: 620px;

@media (max-width: #{ ($break-small) }) {
width: 80vw;
padding: 24px;
width: 80vw;
}

&-heading {
color: #333;
font-size: 22px;
font-weight: 300;
line-height: 1.2;
margin-bottom: 60px;
letter-spacing: 1.1px;

@media (max-width: #{ ($break-small) }) {
font-size: 18px;
Expand All @@ -42,9 +43,9 @@
}

&-section {
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}

&-image {
Expand All @@ -69,18 +70,18 @@
}

&-error {
align-items: center;
display: flex;
font-size: 16px;
flex-direction: row;
align-items: center;
font-size: 16px;

@media (max-width: #{ ($break-small) }) {
font-size: 14px;
}

&--icon {
margin-right: 5px;
flex-shrink: 0;
margin-right: 5px;
}

&--text {
Expand All @@ -89,23 +90,23 @@

&-link {
all: unset;
cursor: pointer;
color: #1e90ff;
cursor: pointer;
font-weight: 300;
}
}
}
}

&__loader {
width: 30px;
height: 30px;
border-radius: 50%;
animation: spin 1s linear infinite;
border: 4px solid #f3f3f3;
border-top: 4px solid #3a3a3a;
border-right: 4px solid #3a3a3a;
border-bottom: 4px solid #3a3a3a;
animation: spin 1s linear infinite;
border-radius: 50%;
border-right: 4px solid #3a3a3a;
border-top: 4px solid #3a3a3a;
height: 30px;
width: 30px;

@media (max-width: #{ ($break-small) }) {
width: 20px;
Expand Down
2 changes: 2 additions & 0 deletions src/Installer/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,6 @@ body {
#nfd-installer {
display: none;
transition: all 3s ease-in-out;
position: relative;
z-index: 1000000;
}
Loading