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

Position Jumpstart dialog close button same as upgrade dialog close button #8961

Merged
merged 1 commit into from
Mar 7, 2018
Merged

Position Jumpstart dialog close button same as upgrade dialog close button #8961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions _inc/client/components/jetpack-dialogue/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ class JetpackDialogue extends Component {
);
return (
<div className="jp-dialogue-full__container" role="dialog" onClick={ this.maybeDismiss } onKeyDown={ onKeyDownCallback( this.maybeDismiss ) }>
<img src={ imagePath + 'stars-full.svg' } width="60" height="60" alt={ __( 'Stars' ) } className="jp-jumpstart-full__svg-stars" />
<img src={ imagePath + 'jupiter.svg' } width="50" height="100" alt={ __( 'Jupiter' ) } className="jp-jumpstart-full__svg-jupiter" />
<img src={ imagePath + 'stars-full.svg' } width="60" height="60" alt={ __( 'Stars' ) } className="jp-dialogue-full__svg-stars" />
<img src={ imagePath + 'jupiter.svg' } width="50" height="100" alt={ __( 'Jupiter' ) } className="jp-dialogue-full__svg-jupiter" />

<div className={ classes } role="dialog" onClick={ this.clickForeground } onKeyDown={ onKeyDownCallback( this.clickForeground ) }>
{ this.props.svg }
Expand Down
76 changes: 33 additions & 43 deletions _inc/client/components/jumpstart/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Card from 'components/card';
import Button from 'components/button';
import { translate as __ } from 'i18n-calypso';
import Gridicon from 'components/gridicon';

/**
* Internal dependencies
Expand All @@ -18,8 +16,8 @@ import {
isJumpstarting as _isJumpstarting
} from 'state/jumpstart';
import { getModulesByFeature as _getModulesByFeature } from 'state/modules';
import onKeyDownCallback from 'utils/onkeydown-callback';
import { imagePath } from 'constants/urls';
import JetpackDialogue from 'components/jetpack-dialogue';

class JumpStart extends React.Component {
static displayName = 'JumpStart';
Expand All @@ -34,7 +32,7 @@ class JumpStart extends React.Component {
</Button>;
};

render() {
renderInnerContent() {
/* eslint-disable react/no-danger */
const jumpstartModules = this.props.jumpstartFeatures.map( ( module ) => (
<div
Expand All @@ -51,54 +49,46 @@ class JumpStart extends React.Component {
</div>
) );
/* eslint-enable react/no-danger */
return (
<div className="jp-jumpstart-full__container">
<img src={ imagePath + 'stars-full.svg' } width="60" height="60" alt={ __( 'Stars' ) } className="jp-jumpstart-full__svg-stars" />
<img src={ imagePath + 'jupiter.svg' } width="50" height="100" alt={ __( 'Jupiter' ) } className="jp-jumpstart-full__svg-jupiter" />
<Gridicon
icon="cross-small"
className="jp-jumpstart-full__dismiss"
tabIndex="0"
onKeyDown={ onKeyDownCallback( this.props.jumpStartSkip ) }
onClick={ this.props.jumpStartSkip }
/>

<div className="jp-jumpstart">
<img src={ imagePath + 'man-and-laptop.svg' } width="199" height="153" alt={ __( 'Person with laptop' ) } />

<h1 className="jp-jumpstart__title">
{ __( 'Your Jetpack site is ready to go!' ) }
</h1>

<Card className="jp-jumpstart__description">
<p>
{ __( "We're now collecting stats, securing your site, and speeding up your images. Pretty soon you'll be able to see everything going on with your site right through Jetpack! Welcome aboard." ) }
</p>
</Card>
return (
<div className="jp-jumpstart">
<p>
{ __( "We're now collecting stats, securing your site, and speeding up your images. Pretty soon you'll be able to see everything going on with your site right through Jetpack! Welcome aboard." ) }
</p>

<Card>
{ this.activateButton() }
</Card>
<p>
{ this.activateButton() }
</p>

<Card>
<h2 className="jp-jumpstart__feature-heading">
{ __( "Jetpack's recommended features include:" ) }
</h2>
<p>
<h2 className="jp-jumpstart__feature-heading">
{ __( "Jetpack's recommended features include:" ) }
</h2>

<div className="jp-jumpstart__feature-list">
{ jumpstartModules }
</div>
<div className="jp-jumpstart__feature-list">
{ jumpstartModules }
</div>

{ this.activateButton() }
{ this.activateButton() }

<p className="jp-jumpstart__note">
{ __( 'Features can be activated or deactivated at any time.' ) }
</p>
</Card>
</div>
<p className="jp-jumpstart__note">
{ __( 'Features can be activated or deactivated at any time.' ) }
</p>
</p>
</div>
);
}

render() {
return (
<JetpackDialogue
svg={ <img src={ imagePath + 'man-and-laptop.svg' } width="199" height="153" alt={ __( 'Person with laptop' ) } /> }
title={ __( 'Your Jetpack site is ready to go!' ) }
content={ this.renderInnerContent() }
dismiss={ this.props.jumpStartSkip }
/>
);
}
}

export default connect(
Expand Down
41 changes: 2 additions & 39 deletions _inc/client/components/jumpstart/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
.jp-jumpstart-full__container {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100; // to sit over other elements
background: rgba($gray-light, .95);
text-align: center;
padding: rem( 32px );
}


.jp-jumpstart {
text-align: center;
Expand All @@ -21,17 +10,6 @@
}
}

.jp-jumpstart-full__dismiss {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
fill: $gray;
padding: rem( 16px );
height: rem( 24px );
width: rem( 24px );
}

.jp-jumpstart__cta-container {
position: relative; // allows spinner to be positioned
padding: 0;
Expand Down Expand Up @@ -160,19 +138,4 @@
font-size: rem( 14px );
clear: both;
font-style: italic;
}

// Planet + star svgs for decoration only
.jp-jumpstart-full__svg-jupiter {
position: absolute;
right: 0;
top: rem( 80px );
opacity: .90;
}

.jp-jumpstart-full__svg-stars {
position: absolute;
left: rem( 100px );
top: rem( 100px );
opacity: .90;
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

No newline at end of file.

1 change: 0 additions & 1 deletion modules/module-headings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ function jetpack_get_module_i18n( $key ) {
'seo-tools' => array(
'name' => _x( 'SEO Tools', 'Module Name', 'jetpack' ),
'description' => _x( 'Better results on search engines and social media.', 'Module Description', 'jetpack' ),
'recommended description' => _x( 'Better results on search engines and social media.', 'Jumpstart Description', 'jetpack' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

You may want to revert this file to avoid having it show up in this PR. See: #8981

Copy link
Contributor

Choose a reason for hiding this comment

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

Due to the previous upstream change in master, this didn't actually make it into the merge: b9ddc11

),

'sharedaddy' => array(
Expand Down