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

Reader: fix sidebar list highlight #1535

Merged
merged 3 commits into from
Dec 22, 2015
Merged

Reader: fix sidebar list highlight #1535

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
052ad32
Fix list highlight - prevent multiple lists with the same start to th…
bluefuton Dec 14, 2015
6835a66
Reader sidebar: check last segment of URL to determine current list
bluefuton Dec 15, 2015
49373a8
Remove redundant method getFollowingEditLink() - not needed now Calyp…
bluefuton Dec 15, 2015
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
41 changes: 12 additions & 29 deletions client/reader/sidebar/sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
const assign = require( 'lodash/object/assign' ),
classnames = require( 'classnames' ),
closest = require( 'component-closest' ),
debug = require( 'debug' )( 'calypso:reader:sidebar' ),
map = require( 'lodash/collection/map' ),
some = require( 'lodash/collection/some' ),
startsWith = require( 'lodash/string/startsWith' ),
ReactDom = require( 'react-dom' ),
React = require( 'react' ),
page = require( 'page' ),
url = require( 'url' );
url = require( 'url' ),
last = require( 'lodash/array/last' );

/**
* Internal Dependencies
Expand All @@ -32,10 +32,6 @@ const layoutFocus = require( 'lib/layout-focus' ),
module.exports = React.createClass( {
displayName: 'ReaderSidebar',

componentWillMount: function() {
debug( 'Mounting the reader sidebar React component.' );
},

itemLinkClass: function( path, additionalClasses ) {
var basePathLowerCase = this.props.path.split( '?' )[0].replace( /\/edit$/, '' ).toLowerCase(),
pathLowerCase = path.replace( /\/edit$/, '' ).toLowerCase(),
Expand Down Expand Up @@ -192,15 +188,20 @@ module.exports = React.createClass( {
}

const listManagementUrls = [
listRelativeUrl + '/followers',
listRelativeUrl + '/tags',
listRelativeUrl + '/edit',
listRelativeUrl + '/description/edit',
listRelativeUrl + '/sites',
];

const lastPathSegment = last( this.props.path.split( '/' ) );
const isCurrentList = lastPathSegment && lastPathSegment.toLowerCase() === list.slug.toLowerCase();
const isActionButtonSelected = this.pathStartsWithOneOf( listManagementUrls );

const classes = classnames(
this.itemLinkClassStartsWithOneOf( [ listRelativeUrl ], { 'sidebar-dynamic-menu__list has-buttons': true } ),
{
'is-action-button-selected': this.pathStartsWithOneOf( listManagementUrls )
'sidebar-dynamic-menu__list has-buttons': true,
selected: isCurrentList || isActionButtonSelected,
'is-action-button-selected': isActionButtonSelected
}
);

Expand Down Expand Up @@ -251,25 +252,7 @@ module.exports = React.createClass( {
}, this );
},

getFollowingEditLink: function() {
var followingEditUrl = '/following/edit',
followingEditRel;

// If Calypso following/edit isn't yet enabled, use the Atlas version
if ( ! config.isEnabled( 'reader/following-edit' ) ) {
followingEditUrl = 'https://wordpress.com'.concat( followingEditUrl );
followingEditRel = 'external';
}

return {
url: followingEditUrl,
rel: followingEditRel
};
},

render: function() {
let followingEditLink = this.getFollowingEditLink();

return (
<ul className="wpcom-sidebar sidebar reader-sidebar" onClick={ this.handleClick }>
<li className="sidebar-menu sidebar-streams">
Expand All @@ -280,7 +263,7 @@ module.exports = React.createClass( {
<Gridicon icon="checkmark-circle" size={ 24 } />
<span className="menu-link-text">{ this.translate( 'Followed Sites' ) }</span>
</a>
<a href={ followingEditLink.url } rel={ followingEditLink.rel } className="add-new">{ this.translate( 'Manage' ) }</a>
<a href="/following/edit" className="add-new">{ this.translate( 'Manage' ) }</a>
</li>

{ this.renderTeams() }
Expand Down