Merge pull request #1641 from Automattic/fix/site-picker-scroll-to-se…

…lected

Site Picker: Scroll to selected site when opening picker

client/components/site-selector/index.jsx

@@ -21,6 +21,7 @@ module.exports = React.createClass( {
 	displayName: 'SiteSelector',
 
 	propTypes: {
+		sites: React.PropTypes.object,
 		showAddNewSite: React.PropTypes.bool,
 		showAllSites: React.PropTypes.bool,
 		indicator: React.PropTypes.bool,
@@ -33,6 +34,7 @@ module.exports = React.createClass( {
 
 	getDefaultProps: function() {
 		return {
+			sites: {},
 			showAddNewSite: false,
 			showAllSites: false,
 			siteBasePath: false,
@@ -73,36 +75,6 @@ module.exports = React.createClass( {
 		this.refs.siteSearch.blur();
 	},
 
-	visibleCount: function() {
-		return this.props.sites.selected ? 1 : this.getCount();
-	},
-
-	// more complex translation logic here
-	getTranslations: function() {
-		var output = {},
-			visibleCount = this.visibleCount();
-
-		if ( ! this.props.sites.selected ) {
-			output.selectedSites = this.translate( 'All sites' );
-		} else {
-			output.selectedSites = this.translate( '%(numberSelected)s site selected', '%(numberSelected)s sites selected', {
-				count: visibleCount,
-				args: {
-					numberSelected: visibleCount
-				}
-			} );
-		}
-
-		output.totalSites = this.translate( '%(numberTotal)s site', 'All %(numberTotal)s Sites', {
-			count: this.getCount(),
-			args: {
-				numberTotal: this.getCount()
-			}
-		} );
-
-		return output;
-	},
-
 	addNewSite: function() {
 		return (
 			<AddNewButton
@@ -134,7 +106,8 @@ module.exports = React.createClass( {
 	},
 
 	isSelected: function( site ) {
-		return this.props.sites.selected === site.domain || this.props.selected === site.slug;
+		var selectedSite = this.props.selected || this.props.sites.selected;
+		return selectedSite === site.domain || selectedSite === site.slug;
 	},
 
 	renderSiteElements: function() {

client/components/site-selector/style.scss

@@ -109,6 +109,7 @@
 .site-selector__sites {
 	max-height: calc( 100% - 89px );
 	overflow-y: auto;
+	position: relative; // for calculation of offsetTop in <Site>
 }
 
 .site-selector__no-results {

client/components/sites-popover/index.jsx

@@ -8,14 +8,14 @@ var React = require( 'react' ),
  * Internal dependencies
  */
 var Popover = require( 'components/popover' ),
-	sitesList = require( 'lib/sites-list' )(),
 	hasTouch = require( 'lib/touch-detect' ).hasTouch,
 	SiteSelector = require( 'components/site-selector' );
 
 module.exports = React.createClass( {
 	displayName: 'SitesPopover',
 
 	propTypes: {
+		sites: React.PropTypes.object,
 		context: React.PropTypes.object,
 		visible: React.PropTypes.bool,
 		onClose: React.PropTypes.func,
@@ -62,7 +62,7 @@ module.exports = React.createClass( {
 				className="popover sites-popover">
 				{ this.state.popoverVisible ?
 					<SiteSelector
-						sites={ sitesList }
+						sites={ this.props.sites }
 						siteBasePath="/post"
 						showAddNewSite={ false }
 						indicator={ false }

client/components/sites-popover/style.scss

@@ -11,10 +11,10 @@ $sites-popover-width: 300px;
 .sites-popover .tip-inner {
 	position: relative;
 	text-align: left;
+	overflow: hidden;
 }
 
 .sites-popover .site-selector {
-
 	&.is-large {
 		padding-top: 50px;
 	}
@@ -38,18 +38,18 @@ $sites-popover-width: 300px;
 
 .sites-popover .site-selector .site {
 	&.is-selected {
-		background: $white;
+		background-color: $gray;
 
 		.site__title {
-			color: $gray-dark;
+			color: $white;
 
 			&::before {
-				color: $gray;
+				color: $white;
 			}
 		}
 
 		.site__domain {
-			color: $gray;
+			color: $white;
 		}
 	}
 
@@ -66,11 +66,6 @@ $sites-popover-width: 300px;
 				color: white;
 			}
 		}
-
-		&:last-child {
-			border-bottom-right-radius: 2px;
-			border-bottom-left-radius: 2px;
-		}
 	}
 }
 

client/layout/masterbar/publish.jsx

@@ -95,6 +95,7 @@ export default React.createClass( {
 			>
 				{ this.props.children }
 				<SitesPopover
+					sites={ this.props.sites }
 					visible={ this.state.isShowingPopover }
 					context={ this.state.postButtonContext }
 					onClose={ this.toggleSitesPopover.bind( this, false ) }

client/my-sites/site/index.jsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	debug = require( 'debug' )( 'calypso:my-sites:site' ),
 	classNames = require( 'classnames' ),
 	noop = require( 'lodash/utility/noop' );
 
@@ -17,7 +16,24 @@ module.exports = React.createClass( {
 	displayName: 'Site',
 
 	componentDidMount: function() {
-		debug( 'The Site component is mounted.' );
+		if ( this.props.isSelected ) {
+			this.scrollIntoView();
+		}
+	},
+
+	componentDidUpdate: function( prevProps, prevState ) {
+		if ( this.props.isSelected && ! prevProps.isSelected ) {
+			this.scrollIntoView();
+		}
+	},
+
+	scrollIntoView: function() {
+		var node = this.refs.site,
+			parentScrollTop = node.offsetTop;
+		if ( node.previousSibling ) {
+			parentScrollTop -= node.previousSibling.offsetHeight / 2;
+		}
+		node.parentNode.scrollTop = parentScrollTop;
 	},
 
 	getDefaultProps: function() {
@@ -80,7 +96,7 @@ module.exports = React.createClass( {
 		} );
 
 		return (
-			<div className={ siteClass }>
+			<div className={ siteClass } ref="site">
 				<a className="site__content"
 					href={ this.props.homeLink ? site.URL : this.props.href }
 					target={ this.props.externalLink && '_blank' }

client/my-sites/site/style.scss

@@ -53,7 +53,6 @@
 
 // Wraps the anchor element
 .site__content {
-	border-radius: 2px;
 	display: flex;
 	justify-content: space-between;
 	overflow: hidden;