From cc746a1e14b02c78b006b18191407b599ee23001 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Dec 2015 15:25:39 -0600 Subject: [PATCH 1/8] SiteSelector: Scroll selected site into view This commit modifies the site pickers (both in the sidebar and in the new post popover) to scroll to the selected site upon a change in site. This makes it easier to jump straight back to the current site you're working on, which is the most common use case. --- client/components/site-selector/style.scss | 1 + client/components/sites-popover/index.jsx | 4 ++-- client/layout/masterbar/publish.jsx | 1 + client/my-sites/site/index.jsx | 17 +++++++++++++++-- 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/client/components/site-selector/style.scss b/client/components/site-selector/style.scss index ce96fb139e538..171178f94d80b 100644 --- a/client/components/site-selector/style.scss +++ b/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-selector__no-results { diff --git a/client/components/sites-popover/index.jsx b/client/components/sites-popover/index.jsx index b6d5a88513da4..22e62469a9690 100644 --- a/client/components/sites-popover/index.jsx +++ b/client/components/sites-popover/index.jsx @@ -8,7 +8,6 @@ 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' ); @@ -16,6 +15,7 @@ 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 ? { this.props.children } Date: Tue, 15 Dec 2015 15:31:40 -0600 Subject: [PATCH 2/8] Fix a bug determining and highlighting the selected site For my test site (nylen.io/blog) we weren't checking against the site slug correctly. This commit restores the highlighting in the sidebar when this site (and probably others) are active. --- client/components/site-selector/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/components/site-selector/index.jsx b/client/components/site-selector/index.jsx index 8bd6cbc9c71f0..5f112eb6458f9 100644 --- a/client/components/site-selector/index.jsx +++ b/client/components/site-selector/index.jsx @@ -134,7 +134,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() { From 784455b9c5464509258e36793666dbab3b66e0d1 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Dec 2015 15:39:37 -0600 Subject: [PATCH 3/8] Masterbar: Highlight current site in new post sites picker --- client/components/sites-popover/style.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/components/sites-popover/style.scss b/client/components/sites-popover/style.scss index 6079e2ec3411d..54f9de8f4e34c 100644 --- a/client/components/sites-popover/style.scss +++ b/client/components/sites-popover/style.scss @@ -14,7 +14,6 @@ $sites-popover-width: 300px; } .sites-popover .site-selector { - &.is-large { padding-top: 50px; } @@ -38,18 +37,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; } } From 8fbe99d8919d4f87fcfaabb7ad09811992b65c5b Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Dec 2015 15:40:49 -0600 Subject: [PATCH 4/8] Masterbar: Correctly clip hovered sites in popover to border-radius --- client/components/sites-popover/style.scss | 6 +----- client/my-sites/site/style.scss | 1 - 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/client/components/sites-popover/style.scss b/client/components/sites-popover/style.scss index 54f9de8f4e34c..26552717b9491 100644 --- a/client/components/sites-popover/style.scss +++ b/client/components/sites-popover/style.scss @@ -11,6 +11,7 @@ $sites-popover-width: 300px; .sites-popover .tip-inner { position: relative; text-align: left; + overflow: hidden; } .sites-popover .site-selector { @@ -65,11 +66,6 @@ $sites-popover-width: 300px; color: white; } } - - &:last-child { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } } } diff --git a/client/my-sites/site/style.scss b/client/my-sites/site/style.scss index 582ca169df9a8..809654b00e918 100644 --- a/client/my-sites/site/style.scss +++ b/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; From 3def0634d89b0efa0906048c7aac7cbd79b0dd4d Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Dec 2015 15:42:35 -0600 Subject: [PATCH 5/8] Show half of previous site in site picker This makes it more visually obvious that more sites are available by scrolling up. --- client/my-sites/site/index.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/my-sites/site/index.jsx b/client/my-sites/site/index.jsx index 8652d3ab95cc5..958d4072d4db2 100644 --- a/client/my-sites/site/index.jsx +++ b/client/my-sites/site/index.jsx @@ -29,8 +29,12 @@ module.exports = React.createClass( { }, scrollIntoView: function() { - var node = ReactDom.findDOMNode( this ); - node.parentNode.scrollTop = node.offsetTop; + var node = ReactDom.findDOMNode( this ), + parentScrollTop = node.offsetTop; + if ( node.previousSibling ) { + parentScrollTop -= node.previousSibling.offsetHeight / 2; + } + node.parentNode.scrollTop = parentScrollTop; }, getDefaultProps: function() { From dee4da5a02ec7f5c2565ab1e28ce0d5cdb148408 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Wed, 16 Dec 2015 17:09:28 -0600 Subject: [PATCH 6/8] Use a ref instead of ReactDom.findDOMNode --- client/my-sites/site/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/my-sites/site/index.jsx b/client/my-sites/site/index.jsx index 958d4072d4db2..73f79dd96c77a 100644 --- a/client/my-sites/site/index.jsx +++ b/client/my-sites/site/index.jsx @@ -2,7 +2,6 @@ * External dependencies */ var React = require( 'react' ), - ReactDom = require( 'react-dom' ), classNames = require( 'classnames' ), noop = require( 'lodash/utility/noop' ); @@ -29,7 +28,7 @@ module.exports = React.createClass( { }, scrollIntoView: function() { - var node = ReactDom.findDOMNode( this ), + var node = this.refs.site, parentScrollTop = node.offsetTop; if ( node.previousSibling ) { parentScrollTop -= node.previousSibling.offsetHeight / 2; @@ -97,7 +96,7 @@ module.exports = React.createClass( { } ); return ( -
+
Date: Mon, 4 Jan 2016 15:14:04 -0600 Subject: [PATCH 7/8] Remove some dead code --- client/components/site-selector/index.jsx | 30 ----------------------- 1 file changed, 30 deletions(-) diff --git a/client/components/site-selector/index.jsx b/client/components/site-selector/index.jsx index 5f112eb6458f9..c20a7d0aa239c 100644 --- a/client/components/site-selector/index.jsx +++ b/client/components/site-selector/index.jsx @@ -73,36 +73,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 ( Date: Wed, 16 Dec 2015 16:59:19 -0600 Subject: [PATCH 8/8] Add missing propType --- client/components/site-selector/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/components/site-selector/index.jsx b/client/components/site-selector/index.jsx index c20a7d0aa239c..dcbcd5e74962f 100644 --- a/client/components/site-selector/index.jsx +++ b/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,