Skip to content

Commit

Permalink
Merge pull request #2863 from Automattic/update/stats-standard-ui
Browse files Browse the repository at this point in the history 
Stats: Update module headers to SectionHeader
  • Loading branch information
@alternatekev
alternatekev committed Apr 1, 2016
2 parents e6684d5 + 08d2eb8 commit 3dc2a69
Show file tree
Hide file tree
Showing 20 changed files with 494 additions and 687 deletions.
100 changes: 33 additions & 67 deletions client/my-sites/stats/all-time/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,23 @@ import classNames from 'classnames';
import observe from 'lib/mixins/data-observe';
import Card from 'components/card';
import User from 'lib/user';
import toggle from '../mixin-toggle';
import Gridicon from 'components/gridicon';
import StatsTabs from '../stats-tabs';
import StatsTab from '../stats-tabs/tab';
import SectionHeader from 'components/section-header';

const user = User();

export default React.createClass( {
displayName: 'StatsAllTime',

mixins: [ toggle( 'allTimeList' ), observe( 'allTimeList' ) ],
mixins: [ observe( 'allTimeList' ) ],

propTypes: {
allTimeList: PropTypes.object.isRequired
},

render() {
const infoIcon = this.state.showInfo ? 'info' : 'info-outline';
const allTimeList = this.props.allTimeList.response;
const { showInfo, showModule } = this.state;
const isLoading = this.props.allTimeList.isLoading();

let bestDay;
Expand All @@ -39,76 +36,45 @@ export default React.createClass( {
}

const classes = {
'is-expanded': showModule,
'is-showing-info': showInfo,
'is-loading': this.props.allTimeList.isLoading(),
'is-non-en': user.data.localeSlug && ( user.data.localeSlug !== 'en' )
};

const bestViews = allTimeList['best-views'] ? allTimeList['best-views'].count : null;

return (
<Card className={ classNames( 'stats-module', 'stats-all-time', classes ) }>
<div className="module-header">
<h1 className="module-header-title">{ this.translate( 'All-time posts, views, and visitors' ) }</h1>
<ul className="module-header-actions">
<li className="module-header-action toggle-info">
<a
href="#"
className="module-header-action-link"
aria-label={
this.translate(
'Show or hide panel information',
{ context: 'Stats panel action' }
)
}
title={
this.translate(
'Show or hide panel information',
{ context: 'Stats panel action' }
)
}
onClick={
this.toggleInfo
}
>
<Gridicon icon={ infoIcon } />
</a>
</li>
</ul>
</div>
<div className="module-content">
<div className="module-content-text module-content-text-info">
<p>{ this.translate( 'These are your site\'s overall total number of Posts, Views and Visitors as well as the day when you had the most number of Views.' ) }</p>
<div>
<SectionHeader label={ this.translate( 'All-time posts, views, and visitors' ) }></SectionHeader>
<Card className={ classNames( 'stats-module', 'stats-all-time', classes ) }>
<div className="module-content">
<StatsTabs borderless>
<StatsTab
gridicon="posts"
label={ this.translate( 'Posts' ) }
loading={ isLoading }
value={ allTimeList.posts } />
<StatsTab
gridicon="visible"
label={ this.translate( 'Views' ) }
loading={ isLoading }
value={ allTimeList.views } />
<StatsTab
gridicon="user"
label={ this.translate( 'Visitors' ) }
loading={ isLoading }
value={ allTimeList.visitors } />
<StatsTab
className="is-best"
gridicon="trophy"
label={ this.translate( 'Best Views Ever' ) }
loading={ isLoading }
value={ bestViews }>
<span className="stats-all-time__best-day">{ bestDay }</span>
</StatsTab>
</StatsTabs>
</div>

<StatsTabs>
<StatsTab
gridicon="posts"
label={ this.translate( 'Posts' ) }
loading={ isLoading }
value={ allTimeList.posts } />
<StatsTab
gridicon="visible"
label={ this.translate( 'Views' ) }
loading={ isLoading }
value={ allTimeList.views } />
<StatsTab
gridicon="user"
label={ this.translate( 'Visitors' ) }
loading={ isLoading }
value={ allTimeList.visitors } />
<StatsTab
className="is-best"
gridicon="trophy"
label={ this.translate( 'Best Views Ever' ) }
loading={ isLoading }
value={ bestViews }>
<span className="stats-all-time__best-day">{ bestDay }</span>
</StatsTab>
</StatsTabs>
</div>
</Card>
</Card>
</div>
);
}
} );
2 changes: 1 addition & 1 deletion client/my-sites/stats/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ module.exports = {
},

insights: function( context, next ) {
var Insights = require( 'my-sites/stats/insights' ),
var Insights = require( 'my-sites/stats/stats-insights' ),
StatsList = require( 'lib/stats/stats-list' ),
StatsSummaryList = require( 'lib/stats/summary-list' ),
FollowList = require( 'lib/follow-list' ),
Expand Down
56 changes: 21 additions & 35 deletions client/my-sites/stats/most-popular/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ var React = require( 'react' ),
*/
var Card = require( 'components/card' ),
observe = require( 'lib/mixins/data-observe' ),
toggle = require( 'my-sites/stats/mixin-toggle' ),
Gridicon = require( 'components/gridicon' );
SectionHeader = require( 'components/section-header' );

module.exports = React.createClass( {
displayName: 'StatsModuleMostPopular',
Expand All @@ -19,11 +18,10 @@ module.exports = React.createClass( {
insightsList: React.PropTypes.object.isRequired
},

mixins: [ observe( 'insightsList' ), toggle( 'mostPopular' ) ],
mixins: [ observe( 'insightsList' ) ],

render: function() {
var emptyMessage = null,
infoIcon = this.state.showInfo ? 'info' : 'info-outline',
data,
isLoading,
isEmpty,
Expand All @@ -38,8 +36,6 @@ module.exports = React.createClass( {
'stats-most-popular',
'is-site-overview',
{
'is-expanded': this.state.showModule,
'is-showing-info': this.state.showInfo,
'is-loading': isLoading,
'is-empty': isEmpty
}
Expand All @@ -60,36 +56,26 @@ module.exports = React.createClass( {
}

return (
<Card className={ classNames.apply( null, classes ) }>
<div className="module-header">
<h1 className="module-header-title">{ this.translate( 'Most popular day and hour' ) }</h1>
<ul className="module-header-actions">
<li className="module-header-action toggle-info">
<a href="#" className="module-header-action-link" aria-label={ this.translate( 'Show or hide panel information', { textOnly: true, context: 'Stats panel action' } ) } title={ this.translate( 'Show or hide panel information', { textOnly: true, context: 'Stats panel action' } ) } onClick={ this.toggleInfo } >
<Gridicon icon={ infoIcon } />
</a>
</li>
</ul>
</div>
<div className="module-content">
<div className="module-content-text module-content-text-info">
<p>{ this.translate( 'This is the day and hour when you have been getting the most Views on average. The best timing for publishing a post may be around this period.' ) }</p>
</div>
<div className="stats-popular">
<div className="stats-popular__item">
<span className="stats-popular__label">{ this.translate( 'Most popular day' ) }</span>
<span className="stats-popular__day">{ data.day }</span>
<span className="stats-popular__percentage">{ this.translate( '%(percent)d%% of views', { args: { percent: data.percent || 0 }, context: 'Stats: Percentage of views' } ) }</span>
</div>
<div className="stats-popular__item">
<span className="stats-popular__label">{ this.translate( 'Most popular hour' ) }</span>
<span className="stats-popular__hour">{ data.hour }</span>
<span className="stats-popular__percentage">{ this.translate( '%(percent)d%% of views', { args: { percent: data.hour_percent || 0 }, context: 'Stats: Percentage of views' } ) }</span>
<div>
<SectionHeader label={ this.translate( 'Most popular day and hour' ) }></SectionHeader>
<Card className={ classNames( classes ) }>
<div className="module-content">
<div className="stats-popular">
<div className="stats-popular__item">
<span className="stats-popular__label">{ this.translate( 'Most popular day' ) }</span>
<span className="stats-popular__day">{ data.day }</span>
<span className="stats-popular__percentage">{ this.translate( '%(percent)d%% of views', { args: { percent: data.percent || 0 }, context: 'Stats: Percentage of views' } ) }</span>
</div>
<div className="stats-popular__item">
<span className="stats-popular__label">{ this.translate( 'Most popular hour' ) }</span>
<span className="stats-popular__hour">{ data.hour }</span>
<span className="stats-popular__percentage">{ this.translate( '%(percent)d%% of views', { args: { percent: data.hour_percent || 0 }, context: 'Stats: Percentage of views' } ) }</span>
</div>
{ emptyMessage }
</div>
</div>
{ emptyMessage }
</div>
</div>
</Card>
</Card>
</div>
);
}
} );
62 changes: 30 additions & 32 deletions client/my-sites/stats/post-performance/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import classNames from 'classnames';
import Card from 'components/card';
import PostListStoreFactory from 'lib/posts/post-list-store-factory';
import PostStatsStore from 'lib/post-stats/store';
import StatsModuleHeader from '../stats-module/header';
import StatsModuleContent from '../stats-module/content-text';
import StatsTabs from '../stats-tabs';
import StatsTab from '../stats-tabs/tab';
import Emojify from 'components/emojify';
import actions from 'lib/posts/actions';
import SectionHeader from 'components/section-header';

const PostListStore = new PostListStoreFactory;

Expand Down Expand Up @@ -161,36 +160,35 @@ export default React.createClass( {
}

return (
<Card className={ cardClass }>
<StatsModuleHeader
showActions={ false }
titleLink={ summaryUrl }
title={ this.translate( 'Latest Post Summary' ) } />
<StatsModuleContent>
{ post
? (
<p>
{ this.translate(
'It\'s been %(timeLapsed)s since {{href}}{{postTitle/}}{{/href}} was published. Here\'s how the post has performed so far\u2026',
{
args: {
timeLapsed: postTime.fromNow( true )
},
components: {
href: <a href={ post.URL } target="_blank" />,
postTitle: <Emojify>{ postTitle }</Emojify>
},
context: 'Stats: Sentence showing how much time has passed since the last post, and how the stats are'
} )
}
</p>
) : null
}
</StatsModuleContent>
<StatsTabs>
{ this.buildTabs( summaryUrl ) }
</StatsTabs>
</Card>
<div>
<SectionHeader label={ this.translate( 'Latest Post Summary' ) } href={ summaryUrl } />
<Card className={ cardClass }>
<div className="module-content-text">
{ post
? (
<p>
{ this.translate(
'It\'s been %(timeLapsed)s since {{href}}{{postTitle/}}{{/href}} was published. Here\'s how the post has performed so far\u2026',
{
args: {
timeLapsed: postTime.fromNow( true )
},
components: {
href: <a href={ post.URL } target="_blank" />,
postTitle: <Emojify>{ postTitle }</Emojify>
},
context: 'Stats: Sentence showing how much time has passed since the last post, and how the stats are'
} )
}
</p>
) : null
}
</div>
<StatsTabs>
{ this.buildTabs( summaryUrl ) }
</StatsTabs>
</Card>
</div>
);
}
} );
Loading

0 comments on commit 3dc2a69

Please sign in to comment.