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

Site Settings: Moves Site Address up to Site Profile card #1682

Merged
merged 1 commit into from
Dec 17, 2015
Merged

Site Settings: Moves Site Address up to Site Profile card #1682

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
90 changes: 50 additions & 40 deletions client/my-sites/site-settings/form-general.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ var Card = require( 'components/card' ),
protectForm = require( 'lib/mixins/protect-form' ),
notices = require( 'notices' ),
analytics = require( 'analytics' ),
dirtyLinkedState = require( 'lib/mixins/dirty-linked-state' );
dirtyLinkedState = require( 'lib/mixins/dirty-linked-state' ),
Button = require( 'components/button' ),
Gridicon = require( 'components/gridicon' ),
FormInput = require( 'components/forms/form-text-input' );

module.exports = React.createClass( {

Expand Down Expand Up @@ -82,30 +85,33 @@ module.exports = React.createClass( {

siteOptions: function() {
return (
<fieldset>
<label htmlFor="blogname">{ this.translate( 'Site Title' ) }</label>
<input
name="blogname"
id="blogname"
type="text"
valueLink={ this.linkState( 'blogname' ) }
disabled={ this.state.fetchingSettings }
onClick={ this.recordEvent.bind( this, 'Clicked Site Title Field' ) }
onKeyPress={ this.recordEventOnce.bind( this, 'typedTitle', 'Typed in Site Title Field' ) }
/>
<p className="settings-explanation">{ this.translate( 'In a few words, explain what this site is about.' ) }</p>

<label htmlFor="blogdescription">{ this.translate( 'Site Tagline' ) }</label>
<input
name="blogdescription"
type="text"
id="blogdescription"
valueLink={ this.linkState( 'blogdescription' ) }
disabled={ this.state.fetchingSettings }
onClick={ this.recordEvent.bind( this, 'Clicked Site Site Tagline Field' ) }
onKeyPress={ this.recordEventOnce.bind( this, 'typedTagline', 'Typed in Site Site Tagline Field' ) }
/>
</fieldset>
<div>
<fieldset>
<label htmlFor="blogname">{ this.translate( 'Site Title' ) }</label>
<FormInput
name="blogname"
id="blogname"
type="text"
valueLink={ this.linkState( 'blogname' ) }
disabled={ this.state.fetchingSettings }
onClick={ this.recordEvent.bind( this, 'Clicked Site Title Field' ) }
onKeyPress={ this.recordEventOnce.bind( this, 'typedTitle', 'Typed in Site Title Field' ) }
/>
</fieldset>
<fieldset>
<label htmlFor="blogdescription">{ this.translate( 'Site Tagline' ) }</label>
<FormInput
name="blogdescription"
type="text"
id="blogdescription"
valueLink={ this.linkState( 'blogdescription' ) }
disabled={ this.state.fetchingSettings }
onClick={ this.recordEvent.bind( this, 'Clicked Site Site Tagline Field' ) }
onKeyPress={ this.recordEventOnce.bind( this, 'typedTagline', 'Typed in Site Site Tagline Field' ) }
/>
<p className="settings-explanation">{ this.translate( 'In a few words, explain what this site is about.' ) }</p>
</fieldset>
</div>
);
},

Expand All @@ -120,13 +126,13 @@ module.exports = React.createClass( {

if ( config.isEnabled( 'upgrades/domain-search' ) ) {
customAddress = (
<a
<Button
href={ '/domains/add/' + site.slug }
className="button"
onClick={ this.trackUpgradeClick }

>
{ this.translate( 'Add a custom address', { context: 'Site address, domain' } ) }
</a>
<Gridicon icon="plus" /> { this.translate( 'Add a Custom Address', { context: 'Site address, domain' } ) }
</Button>
);

addressDescription =
Expand All @@ -144,7 +150,7 @@ module.exports = React.createClass( {
}

return (
<fieldset>
<fieldset className="site-settings__blog-address-container">
<label htmlFor="blogaddress">{ this.translate( 'Site Address' ) }</label>

<div className="blogaddress-settings">
Expand Down Expand Up @@ -198,9 +204,6 @@ module.exports = React.createClass( {

return (
<fieldset>

<legend>{ this.translate( 'Site Visibility' ) }</legend>

<label>
<input
type="radio"
Expand Down Expand Up @@ -256,7 +259,6 @@ module.exports = React.createClass( {

return (
<fieldset>
<legend>{ this.translate( 'Related Posts' ) }</legend>
<ul id="settings-reading-relatedposts">
<li>
<label>
Expand Down Expand Up @@ -323,7 +325,7 @@ module.exports = React.createClass( {
</li>
</ul>
</form>
</Card>
</Card>
);
},

Expand Down Expand Up @@ -389,6 +391,7 @@ module.exports = React.createClass( {
compact={ true }
onClick={ this.submitForm }
primary={ true }

type="submit"
disabled={ this.state.fetchingSettings || this.state.submittingForm }>
{ this.state.submittingForm
Expand All @@ -400,15 +403,17 @@ module.exports = React.createClass( {
<Card>
<form onChange={ this.markChanged }>
{ this.siteOptions() }
{ this.blogAddress() }
{ this.languageOptions() }
{ this.holidaySnowOption() }
</form>
</Card>
<SectionHeader label={ this.translate( 'Address and visibility' ) }>
<SectionHeader label={ this.translate( 'Visibility' ) }>
<Button
Copy link
Member

Choose a reason for hiding this comment

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

This is an added bonus - because Jetpack sites do not require the custom address controls, so the 'Address and Visibility' label is a bit confusing there. Now it will be just 'Visibility' . Win win!

compact={ true }
onClick={ this.submitForm }
primary={ true }

type="submit"
disabled={ this.state.fetchingSettings || this.state.submittingForm }>
{ this.state.submittingForm
Expand All @@ -419,25 +424,29 @@ module.exports = React.createClass( {
</SectionHeader>
<Card>
<form onChange={ this.markChanged }>
{ this.blogAddress() }

{ this.visibilityOptions() }
</form>
</Card>
{ this.props.site.jetpack
? <div>
<SectionHeader label={ this.translate( 'Jetpack' ) }>
{ this.jetpackDisconnectOption() }
<Button
compact={ true }
{ config.isEnabled( 'manage/option_sync_non_public_post_stati' )
? <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>
</Button>
: null
}
</SectionHeader>

{ this.syncNonPublicPostTypes() }
Expand All @@ -455,6 +464,7 @@ module.exports = React.createClass( {
compact={ true }
onClick={ this.submitForm }
primary={ true }

type="submit"
disabled={ this.state.fetchingSettings || this.state.submittingForm }>
{ this.state.submittingForm
Expand Down
11 changes: 8 additions & 3 deletions client/my-sites/site-settings/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,10 @@
}

.button {
margin: 8px 0 0 0;
text-align: center;
width: 100%;
margin-left: 16px;

@include breakpoint( ">660px" ) {
margin: 0 0 0 16px;
width: 45%;
}
}
Expand Down Expand Up @@ -218,3 +216,10 @@
}

}

.site-settings__blog-address-container {
margin: 0 -24px;
padding: 24px 24px 16px 24px;
border: 1px lighten( $gray, 30% ) solid;
border-width: 1px 0;
}