Me: Use SitesDropdown instead of SelectSite in /me/account

client/components/sites-dropdown/README.md

@@ -25,5 +25,6 @@ render() {
 * `onClose` (`function`) — called on site selection
 * `onSiteSelect` (`function`) - called with the site `slug` on site selection
 * `filter` (`function`) - If present, passed to `sites.filter()` to display a subset of sites. Return `true` to display a site.
+* `isPlaceholder` (`bool`) - `true` to display as a placeholder
 
 

client/components/sites-dropdown/index.jsx

@@ -10,6 +10,7 @@ import noop from 'lodash/utility/noop';
  * Internal dependencies
  */
 import Site from 'my-sites/site';
+import SitePlaceholder from 'my-sites/site/placeholder';
 import SiteSelector from 'components/site-selector';
 import sitesList from 'lib/sites-list';
 import Gridicon from 'components/gridicon';
@@ -30,14 +31,16 @@ export default React.createClass( {
 		showAllSites: React.PropTypes.bool,
 		onClose: React.PropTypes.func,
 		onSiteSelect: React.PropTypes.func,
-		filter: React.PropTypes.func
+		filter: React.PropTypes.func,
+		isPlaceholder: React.PropTypes.bool
 	},
 
 	getDefaultProps() {
 		return {
 			showAllSites: false,
 			onClose: noop,
-			onSiteSelect: noop
+			onSiteSelect: noop,
+			isPlaceholder: false
 		};
 	},
 
@@ -60,18 +63,22 @@ export default React.createClass( {
 		} );
 	},
 
+	toggleOpen() {
+		this.setState( { open: ! this.state.open } );
+	},
+
 	render() {
 		return (
 			<div className={ classNames( 'sites-dropdown', { 'is-open': this.state.open } ) }>
 				<div className="sites-dropdown__wrapper">
 					<div
 						className="sites-dropdown__selected"
-						onClick={ () => this.setState( { open: ! this.state.open } ) }
-					>
-						<Site
-							site={ this.getSelectedSite() }
-							indicator={ false }
-						/>
+						onClick={ this.toggleOpen } >
+						{
+							this.props.isPlaceholder
+							? <SitePlaceholder />
+							: <Site site={ this.getSelectedSite() } indicator={ false } />
+						}
 						<Gridicon icon="chevron-down" />
 					</div>
 					{ this.state.open &&

client/components/sites-dropdown/style.scss

@@ -7,10 +7,11 @@
 	}
 
 	.gridicons-chevron-down {
+		align-self: center;
 		color: lighten( $gray, 10% );
-		position: absolute;
-			right: 16px;
-			top: 22px;
+		flex-grow: 0;
+		flex-shrink: 0;
+		margin-right: 16px;
 		transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;
 	}
 }
@@ -35,6 +36,7 @@
 
 .sites-dropdown__selected {
 	cursor: pointer;
+	display: flex;
 
 	.is-open & {
 		border-bottom: 1px solid lighten( $gray, 30% );
@@ -73,6 +75,8 @@
 }
 
 .sites-dropdown .site-selector .site {
+	flex-grow: 1;
+
 	.notouch & {
 		&:hover {
 			background: $blue-medium;

client/me/account/index.jsx

@@ -18,7 +18,6 @@ import LanguageSelector from 'components/forms/language-selector';
 import MeSidebarNavigation from 'me/sidebar-navigation';
 import protectForm from 'lib/mixins/protect-form';
 import formBase from 'me/form-base';
-import SelectSite from 'me/select-site';
 import config from 'config';
 import Card from 'components/card';
 import FormTextInput from 'components/forms/form-text-input';
@@ -41,6 +40,7 @@ import observe from 'lib/mixins/data-observe';
 import eventRecorder from 'me/event-recorder';
 import Main from 'components/main';
 import SectionHeader from 'components/section-header';
+import SitesDropdown from 'components/sites-dropdown';
 
 import _sites from 'lib/sites-list';
 import _user from 'lib/user';
@@ -210,6 +210,13 @@ module.exports = React.createClass( {
 		} );
 	},
 
+	onSiteSelect( siteSlug ) {
+		let selectedSite = sites.getSite( siteSlug );
+		if ( selectedSite ) {
+			this.props.userSettings.updateSetting( 'primary_site_ID', selectedSite.ID );
+		}
+	},
+
 	renderHolidaySnow() {
 		// Note that years and months below are zero indexed
 		const today = this.moment();
@@ -350,14 +357,15 @@ module.exports = React.createClass( {
 			);
 		}
 
+		let primarySiteId = this.props.userSettings.getSetting( 'primary_site_ID' );
+
 		return (
-			<SelectSite
-				disabled={ this.getDisabledState() }
-				id="primary_site_ID"
-				name="primary_site_ID"
-				onFocus={ this.recordFocusEvent( 'Primary Site Field' ) }
-				sites={ sites }
-				valueLink={ this.valueLink( 'primary_site_ID' ) } />
+			<SitesDropdown
+				key={ primarySiteId }
+				isPlaceholder={ ! primarySiteId }
+				selected={ this.props.userSettings.getSetting( 'primary_site_ID' ) }
+				onSiteSelect={ this.onSiteSelect }
+			/>
 		);
 	},