Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Continue button container on core profiler extension screen (#50582) 

* Update core profiler continue button container

On desktop screens 900px and smaller, add a 140px tall container stuck to the bottom of the viewport
Add a transparent to solid white gradient to the container (top to bottom)
Vertically center align the continue button and dislaimer text inside the container

* Add docs

* Update style
This commit is contained in:
Chi-Hsuan Huang 2024-08-13 11:49:07 +08:00 committed by GitHub
parent af75166a07
commit 701a5cbb60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
View File

@ -219,51 +219,53 @@ export const Plugins = ( {
);
} ) }
</div>
<div className="woocommerce-profiler-plugins-continue-button-container">
<Button
className="woocommerce-profiler-plugins-continue-button"
variant="primary"
onClick={
selectedPlugins.length
? submitInstallationRequest
: skipPluginsPage
}
>
{ __( 'Continue', 'woocommerce' ) }
</Button>
</div>
{ pluginsWithAgreement.length > 0 && (
<p className="woocommerce-profiler-plugins-jetpack-agreement">
{ interpolateComponents( {
mixedString: sprintf(
/* translators: %s: a list of plugins, e.g. Jetpack */
_n(
'By installing %s plugin for free you agree to our {{link}}Terms of Service{{/link}}.',
'By installing %s plugins for free you agree to our {{link}}Terms of Service{{/link}}.',
pluginsWithAgreement.length,
'woocommerce'
),
joinWithAnd(
pluginsWithAgreement.map(
( plugin ) => plugin.name
<div className="woocommerce-profiler-plugins__footer">
<div className="woocommerce-profiler-plugins-continue-button-container">
<Button
className="woocommerce-profiler-plugins-continue-button"
variant="primary"
onClick={
selectedPlugins.length
? submitInstallationRequest
: skipPluginsPage
}
>
{ __( 'Continue', 'woocommerce' ) }
</Button>
</div>
{ pluginsWithAgreement.length > 0 && (
<p className="woocommerce-profiler-plugins-jetpack-agreement">
{ interpolateComponents( {
mixedString: sprintf(
/* translators: %s: a list of plugins, e.g. Jetpack */
_n(
'By installing %s plugin for free you agree to our {{link}}Terms of Service{{/link}}.',
'By installing %s plugins for free you agree to our {{link}}Terms of Service{{/link}}.',
pluginsWithAgreement.length,
'woocommerce'
),
joinWithAnd(
pluginsWithAgreement.map(
( plugin ) => plugin.name
)
)
)
.map( composeListFormatParts )
.join( '' )
),
components: {
span: <span />,
link: (
<Link
href="https://wordpress.com/tos/"
target="_blank"
type="external"
/>
.map( composeListFormatParts )
.join( '' )
),
},
} ) }
</p>
) }
components: {
span: <span />,
link: (
<Link
href="https://wordpress.com/tos/"
target="_blank"
type="external"
/>
),
},
} ) }
</p>
) }
</div>
</div>
</div>
);

14
plugins/woocommerce-admin/client/core-profiler/style.scss
View File

@ -386,6 +386,20 @@
}
}
.woocommerce-profiler-plugins__footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
@media screen and ( max-height: 900px ) {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 44.69%);
height: 140px;
position: fixed;
bottom: 0;
}
}
.woocommerce-profiler-plugins-continue-button-container {
@include breakpoint("<782px") {
width: 100%;

4
plugins/woocommerce/changelog/update-core-profiler-sticky-continue-button Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update core profiler continue button container on extension screen