modified site-settings/general to use sectionheader and clickable car…

…d patterns updated verbiage from Manage Jetpack Monitor Settings to View Jetpack Monitor Settings removed some of the verbiage I'd added to the jetpack disconnection dialog. after seeing the extra copy in the dialog, i decided it didn't work very well and was unnecessary anyway added a space to the scss, and moved the whole file into the right directory, out of assets/stylesheets added space to jetpack button scss
Automattic · Dec 15, 2015 · bdbe6e2 · bdbe6e2
1 parent cff0901
commit bdbe6e2
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 51 deletions.
diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
@@ -219,6 +219,7 @@
 @import 'my-sites/sharing/connections/services-group';
 @import 'my-sites/sidebar-navigation/style';
 @import 'my-sites/site-indicator/style';
+@import 'my-sites/site-settings/style';
 @import 'my-sites/site-settings/action-panel/style';
 @import 'my-sites/site-settings/delete-site-options/style';
 @import 'my-sites/site-settings/delete-site/style';

diff --git a/assets/stylesheets/style.scss b/assets/stylesheets/style.scss
@@ -32,7 +32,6 @@
 @import 'sections/stats';                      // stats page styles
 @import 'sections/upgrades';                   // upgrades page styles
 @import 'sections/sharing';                    // sharing page styles
-@import 'sections/site-settings';              // blog setting styles
 @import 'sections/notifications';              // notifications styles
 @import 'sections/checkout';                   // Checkout styles
 @import 'sections/billing-history';            // Billing History styles

diff --git a/client/my-sites/plugins/style.scss b/client/my-sites/plugins/style.scss
@@ -78,4 +78,11 @@
 
 .plugins__plugin-list-state {
 	white-space: nowrap;
-}
+}
+
+.disconnect-jetpack-button {
+	margin-right: 8px;
+}
+.card.is-compact.section-header.after-compact {
+	margin-top: 16px;
+}
diff --git a/client/my-sites/site-settings/form-general.jsx b/client/my-sites/site-settings/form-general.jsx
@@ -225,7 +225,7 @@ module.exports = React.createClass( {
 						onClick={ this.recordEvent.bind( this, 'Clicked Site Visibility Radio Button' ) }
 					/>
 					<span>{ this.translate( 'Discourage search engines from indexing this site' ) }</span>
-					<p className="settings-explanation inside-list">
+					<p className="settings-explanation inside-list is-indented">
 						{ this.translate( 'Note: This option does not block access to your site — it is up to search engines to honor your request.' ) }
 					</p>
 				</label>
@@ -316,36 +316,13 @@ module.exports = React.createClass( {
 					<label>
 						<input name="jetpack_sync_non_public_post_stati" type="checkbox" checkedLink={ this.linkState( 'jetpack_sync_non_public_post_stati' ) }/>
 						<span>{ this.translate( 'Allow synchronization of Posts and Pages with non-public post statuses' ) }</span>
-						<p className="settings-explanation">{ this.translate( '(e.g. drafts, scheduled, private, etc\u2026)' ) }</p>
+						<p className="settings-explanation is-indented">{ this.translate( '(e.g. drafts, scheduled, private, etc\u2026)' ) }</p>
 					</label>
 				</li>
 			</ul>
 		);
 	},
 
-	jetpackOptions: function() {
-		var site = this.props.site;
-
-		if ( ! site.jetpack ) {
-			return null;
-		}
-
-		return (
-			<fieldset>
-				<legend>{ this.translate( 'Jetpack Status' ) }</legend>
-				{ this.syncNonPublicPostTypes() }
-				<p>{
-					this.translate( 'You can also {{manageLink}}manage the monitor settings{{/manageLink}} and {{migrateLink}}migrate followers{{/migrateLink}}.', {
-						components: {
-							manageLink: <a href={ '../security/' + site.slug } />,
-							migrateLink: <a href={ 'https://wordpress.com/manage/' + site.ID } />
-						}
-					} )
-				}</p>
-			</fieldset>
-		);
-	},
-
 	jetpackDisconnectOption: function() {
 		var site = this.props.site,
 			disconnectText;
@@ -358,26 +335,11 @@ module.exports = React.createClass( {
 			context: 'Jetpack: Action user takes to disconnect Jetpack site from .com link in general site settings'
 		} );
 
-		return (
-			<fieldset>
-				<legend>{ this.translate( 'Jetpack Connection' ) }</legend>
-				<ul id="settings-jetpack-connection" className="settings-jetpack">
-					<li>
-						<label>
-							<DisconnectJetpackButton
-								site={ site }
-								text= { disconnectText }
-								redirect= "/stats"
-								linkDisplay={ false }
-							/>
-							<p className="settings-explanation inside-list">
-								{ this.translate( 'This action cannot be undone. You will need to reconnect manually from your site dashboard.' ) }
-							</p>
-						</label>
-					</li>
-				</ul>
-			</fieldset>
-		);
+		return <DisconnectJetpackButton
+				site={ site }
+				text= { disconnectText }
+				redirect= "/stats"
+				linkDisplay={ false } />;
 	},
 
 	holidaySnowOption: function() {
@@ -435,6 +397,7 @@ module.exports = React.createClass( {
 					<form onChange={ this.markChanged }>
 						{ this.siteOptions() }
 						{ this.languageOptions() }
+						{ this.holidaySnowOption() }
 					</form>
 				</Card>
 				<SectionHeader label={ this.translate( 'Address and visibility' ) }>
@@ -456,7 +419,36 @@ module.exports = React.createClass( {
 						{ this.visibilityOptions() }
 					</form>
 				</Card>
-				<SectionHeader label={ this.translate( 'Other' ) }>
+				{ this.props.site.jetpack
+					? <div>
+						<SectionHeader label={ this.translate( 'Jetpack' ) }>
+							{ this.jetpackDisconnectOption() }
+							<Button
+								compact={ true }
+								onClick={ this.submitForm }
+								primary={ true }
+								type="submit"
+								disabled={ this.state.fetchingSettings || this.state.submittingForm }>
+									{ this.state.submittingForm
+										? this.translate( 'Saving…' )
+										: this.translate( 'Save Settings' )
+									}
+							</Button>
+						</SectionHeader>
+						<Card className="is-compact">
+							<form onChange={ this.markChanged }>
+								{ this.syncNonPublicPostTypes() }
+							</form>
+						</Card>
+						<Card href={ '../security/' + site.slug } className="is-compact">
+							{ this.translate( 'View Jetpack Monitor Settings' ) }
+						</Card>
+						<Card href={ 'https://wordpress.com/manage/' + site.ID } className="is-compact">
+							{ this.translate( 'Migrate followers from another WordPress.com blog' ) }
+						</Card>
+					</div>
+					: null }
+				<SectionHeader className="after-compact" label={ this.translate( 'Related Posts' ) }>
 					<Button
 						compact={ true }
 						onClick={ this.submitForm }
@@ -471,9 +463,6 @@ module.exports = React.createClass( {
 				</SectionHeader>
 				<Card>
 					<form onChange={ this.markChanged }>
-						{ this.jetpackOptions() }
-						{ this.jetpackDisconnectOption() }
-						{ this.holidaySnowOption() }
 						{ this.relatedPostsOptions() }
 					</form>
 				</Card>

diff --git a/.../stylesheets/sections/_site-settings.scss → client/my-sites/site-settings/style.scss b/.../stylesheets/sections/_site-settings.scss → client/my-sites/site-settings/style.scss
@@ -69,6 +69,9 @@
 		font-style: italic;
 		font-weight: 400;
 		color: $gray;
+		&.is-indented {
+			margin-left: 24px;
+		}
 	}
 
 	p.settings-alert {