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