updated insights to use section-header

modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization updated insights to use section-header modified stats-module to use sectionheader css fixes to module sectionheaders module text padding updated insights to use section-header css fixes to module sectionheaders module text padding fixed issues with the scrolly part of the post trends visualization
Automattic · Mar 1, 2016 · f310415 · f310415
1 parent fc740a6
commit f310415
Show file tree

Hide file tree

Showing 15 changed files with 361 additions and 401 deletions.
diff --git a/calypso b/calypso
@@ -0,0 +1 @@
+calypso
diff --git a/client/my-sites/stats/all-time/index.jsx b/client/my-sites/stats/all-time/index.jsx
@@ -14,6 +14,7 @@ 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();
 
@@ -48,67 +49,42 @@ export default React.createClass( {
 		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>
+			<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">
+						<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>
 
-					<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>
+						<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>
+			</div>
 		);
 	}
 } );
diff --git a/client/my-sites/stats/controller.js b/client/my-sites/stats/controller.js
@@ -110,7 +110,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' ),
 			NuxInsights = require( 'my-sites/stats/nux/insights' ),

diff --git a/client/my-sites/stats/most-popular/index.jsx b/client/my-sites/stats/most-popular/index.jsx
@@ -10,7 +10,8 @@ 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' );
+	Gridicon = require( 'components/gridicon' ),
+	SectionHeader = require( 'components/section-header' );
 
 module.exports = React.createClass( {
 	displayName: 'StatsModuleMostPopular',
@@ -60,36 +61,29 @@ 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.apply( null, classes ) }>
+						<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>
+								{ emptyMessage }
+							</div>
 						</div>
-						{ emptyMessage }
-					</div>
-				</div>
-			</Card>
+					</Card>
+			</div>
 		);
 	}
 } );
diff --git a/client/my-sites/stats/post-performance/index.jsx b/client/my-sites/stats/post-performance/index.jsx
@@ -10,12 +10,13 @@ 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 Button from 'components/button';
+import SectionHeader from 'components/section-header';
+import Gridicon from 'components/gridicon';
 
 const PostListStore = new PostListStoreFactory;
 
@@ -158,36 +159,38 @@ 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' ) }>
+					<Button href={ summaryUrl } borderless compact><Gridicon icon="stats-alt" /></Button>
+				</SectionHeader>
+
+				<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>
 		);
 	}
 } );
diff --git a/client/my-sites/stats/post-trends/index.jsx b/client/my-sites/stats/post-trends/index.jsx
@@ -1,25 +1,29 @@
 /**
  * External dependencies
  */
-var React = require( 'react' ),
-	classNames = require( 'classnames' ),
-	throttle = require( 'lodash/throttle' );
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import throttle from 'lodash/throttle';
+import touchDetect from 'lib/touch-detect';
 
 /**
  * Internal dependencies
  */
-var observe = require( 'lib/mixins/data-observe' ),
-	i18n = require( 'lib/mixins/i18n' ),
-	Month = require( './month.jsx' );
+import observe from 'lib/mixins/data-observe';
+import i18n from 'lib/mixins/i18n';
+import Month from './month';
+import Card from 'components/card';
+import SectionHeader from 'components/section-header';
 
-module.exports = React.createClass( {
+
+export default React.createClass( {
 
 	displayName: 'PostTrends',
 
 	mixins: [ observe( 'streakList' ) ],
 
 	propTypes: {
-		streakList: React.PropTypes.object.isRequired
+		streakList: PropTypes.object.isRequired
 	},
 
 	getInitialState: function() {
@@ -131,27 +135,36 @@ module.exports = React.createClass( {
 			'is-loading': this.props.streakList.isLoading()
 		} );
 
+		if( touchDetect.hasTouch() ) {
+			return null;
+		}
+
 		return (
-			<div className={ containerClass }>
-				<h1 className="post-trends__title">{ this.translate( 'Posting activity' ) }</h1>
-				<div ref="wrapper" className="post-trends__wrapper">
-					<div ref="year" className="post-trends__year">
-						{ this.getMonthComponents() }
+
+			<div className="post-trends">
+				<SectionHeader label={ this.translate( 'Posting Activity' ) }></SectionHeader>
+				<Card>
+					<div className={ leftClass } onClick={ this.scrollLeft }><span className="left-arrow"></span></div>
+					<div className={ rightClass } onClick={ this.scrollRight }><span className="right-arrow"></span></div>
+					<div ref="wrapper" className="post-trends__wrapper">
+						<div className={ leftClass } onClick={ this.scrollLeft }><span className="left-arrow"></span></div>
+						<div className={ rightClass } onClick={ this.scrollRight }><span className="right-arrow"></span></div>
+						<div ref="year" className="post-trends__year">
+							{ this.getMonthComponents() }
+						</div>
+						<div className="post-trends__key-container">
+							<span className="post-trends__key-label">{ this.translate( 'Fewer Posts', { context: 'Legend label in stats post trends visualization' } ) }</span>
+							<ul className="post-trends__key">
+								<li className="post-trends__key-day is-today"></li>
+								<li className="post-trends__key-day is-level-1"></li>
+								<li className="post-trends__key-day is-level-2"></li>
+								<li className="post-trends__key-day is-level-3"></li>
+								<li className="post-trends__key-day is-level-4"></li>
+							</ul>
+							<span className="post-trends__key-label">{ this.translate( 'More Posts', { context: 'Legend label in stats post trends visualization' } ) }</span>
+						</div>
 					</div>
-				</div>
-				<div className={ leftClass } onClick={ this.scrollLeft }><span className="left-arrow"></span></div>
-				<div className={ rightClass } onClick={ this.scrollRight }><span className="right-arrow"></span></div>
-				<div className="post-trends__key-container">
-					<span className="post-trends__key-label">{ this.translate( 'Fewer Posts', { context: 'Legend label in stats post trends visualization' } ) }</span>
-					<ul className="post-trends__key">
-						<li className="post-trends__key-day is-today"></li>
-						<li className="post-trends__key-day is-level-1"></li>
-						<li className="post-trends__key-day is-level-2"></li>
-						<li className="post-trends__key-day is-level-3"></li>
-						<li className="post-trends__key-day is-level-4"></li>
-					</ul>
-					<span className="post-trends__key-label">{ this.translate( 'More Posts', { context: 'Legend label in stats post trends visualization' } ) }</span>
-				</div>
+				</Card>
 			</div>
 		);
 	}