Merge pull request #9664 from Automattic/add/auto-direction

Add auto language direction in reader
Automattic · Dec 7, 2016 · 8da32e5 · 8da32e5
2 parents a3803e0 + 09a0fc2
commit 8da32e5
Show file tree

Hide file tree

Showing 10 changed files with 1,013 additions and 23 deletions.
diff --git a/client/blocks/comments/form.jsx b/client/blocks/comments/form.jsx
@@ -11,6 +11,7 @@ import { translate } from 'i18n-calypso';
 /**
  * Internal dependencies
  */
+import AutoDirection from 'components/auto-direction';
 import Gravatar from 'components/gravatar';
 import Notice from 'components/notice';
 import {
@@ -200,16 +201,18 @@ class PostCommentForm extends React.Component {
 					<label>
 						<div className={ expandingAreaClasses }>
 							<pre><span>{ this.state.commentText }</span><br /></pre>
-							<textarea
-								value={ this.state.commentText }
-								placeholder={ translate( 'Enter your comment here…' ) }
-								ref={ this.handleTextAreaNode }
-								onKeyUp={ this.handleKeyUp }
-								onKeyDown={ this.handleKeyDown }
-								onFocus={ this.handleFocus }
-								onBlur={ this.handleBlur }
-								onChange={ this.handleTextChange }
-							/>
+							<AutoDirection>
+								<textarea
+									value={ this.state.commentText }
+									placeholder={ translate( 'Enter your comment here…' ) }
+									ref={ this.handleTextAreaNode }
+									onKeyUp={ this.handleKeyUp }
+									onKeyDown={ this.handleKeyDown }
+									onFocus={ this.handleFocus }
+									onBlur={ this.handleBlur }
+									onChange={ this.handleTextChange }
+								/>
+							</AutoDirection>
 						</div>
 						<button
 							ref="commentButton"

diff --git a/client/blocks/comments/post-comment-content.jsx b/client/blocks/comments/post-comment-content.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
+import AutoDirection from 'components/auto-direction';
 
 export default class PostCommentContent extends React.Component {
 	render() {
@@ -12,8 +13,10 @@ export default class PostCommentContent extends React.Component {
 
 		/*eslint-disable react/no-danger*/
 		return (
-			<div className="comments__comment-content" dangerouslySetInnerHTML={ { __html: this.props.content } }>
-			</div>
+			<AutoDirection>
+				<div className="comments__comment-content" dangerouslySetInnerHTML={ { __html: this.props.content } }>
+				</div>
+			</AutoDirection>
 		);
 		/*eslint-enable react/no-danger*/
 	}

diff --git a/client/blocks/reader-full-post/header.jsx b/client/blocks/reader-full-post/header.jsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
+import AutoDirection from 'components/auto-direction';
 import ExternalLink from 'components/external-link';
 import { recordPermalinkClick } from 'reader/stats';
 import PostTime from 'reader/post-time';
@@ -32,11 +33,13 @@ const ReaderFullPostHeader = ( { post } ) => {
 	return (
 		<div className={ classNames( classes ) }>
 			{ post.title
-				? <h1 className="reader-full-post__header-title" onClick={ handlePermalinkClick }>
-					<ExternalLink className="reader-full-post__header-title-link" href={ post.URL } target="_blank" icon={ false }>
-						{ post.title }
-					</ExternalLink>
-				</h1>
+				? <AutoDirection>
+					<h1 className="reader-full-post__header-title" onClick={ handlePermalinkClick }>
+						<ExternalLink className="reader-full-post__header-title-link" href={ post.URL } target="_blank" icon={ false }>
+							{ post.title }
+						</ExternalLink>
+					</h1>
+				</AutoDirection>
 				: null }
 			<div className="reader-full-post__header-meta">
 				{ post.date

diff --git a/client/blocks/reader-full-post/index.jsx b/client/blocks/reader-full-post/index.jsx
@@ -13,6 +13,7 @@ import { get } from 'lodash';
 /**
  * Internal Dependencies
  */
+import AutoDirection from 'components/auto-direction';
 import ReaderMain from 'components/reader-main';
 import EmbedContainer from 'components/embed-container';
 import PostExcerpt from 'components/post-excerpt';
@@ -316,10 +317,12 @@ export class FullPostView extends React.Component {
 						{ post.use_excerpt
 							? <PostExcerpt content={ post.better_excerpt ? post.better_excerpt : post.excerpt } />
 							: <EmbedContainer>
+								<AutoDirection>
 									<div
 										className="reader-full-post__story-content"
 										dangerouslySetInnerHTML={ { __html: post.content } } />
-								</EmbedContainer>
+								</AutoDirection>
+							</EmbedContainer>
 						}
 
 						{ post.use_excerpt && ! isDiscoverPost( post )

diff --git a/client/blocks/reader-full-post/style.scss b/client/blocks/reader-full-post/style.scss
@@ -405,6 +405,10 @@
 		margin-top: 8px;
 	}
 
+	.reader-full-post__header-title-link {
+		display: block;
+	}
+
 	.reader-full-post__header-title-link,
 	.reader-full-post__header-title-link:hover {
 		color: $gray-dark;

diff --git a/client/blocks/reader-post-card/index.jsx b/client/blocks/reader-post-card/index.jsx
@@ -10,6 +10,7 @@ import closest from 'component-closest';
 /**
  * Internal Dependencies
  */
+import AutoDirection from 'components/auto-direction';
 import Card from 'components/card';
 import DisplayTypes from 'state/reader/posts/display-types';
 import ReaderPostActions from 'blocks/reader-post-actions';
@@ -152,10 +153,12 @@ export default class RefreshPostCard extends React.Component {
 					{ ! isGallery && featuredAsset }
 					{ isGallery && <PostGallery post={ post } /> }
 					<div className="reader-post-card__post-details">
-						<h1 className="reader-post-card__title">
-							<a className="reader-post-card__title-link" href={ post.URL }>{ title }</a>
-						</h1>
-						{ showExcerpt && <div className="reader-post-card__excerpt">{ post[ excerptAttribute ] }</div> }
+						<AutoDirection>
+							<h1 className="reader-post-card__title">
+								<a className="reader-post-card__title-link" href={ post.URL }>{ title }</a>
+							</h1>
+						</AutoDirection>
+						{ showExcerpt && <AutoDirection><div className="reader-post-card__excerpt">{ post[ excerptAttribute ] }</div></AutoDirection> }
 						{ isDailyPostChallengeOrPrompt( post ) && <DailyPostButton post={ post } tagName="span" /> }
 						{ post &&
 							<ReaderPostActions

diff --git a/client/blocks/reader-post-card/style.scss b/client/blocks/reader-post-card/style.scss
@@ -350,6 +350,7 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )";
 	cursor: pointer;
 	font-size: 18px;
 	font-weight: 700;
+	display: block;
 
 	&:hover {
 		color: $gray-dark;
@@ -381,6 +382,22 @@ $reader-post-card-breakpoint-small: "( max-width: 550px )";
 			height: 15px * 1.6;
 		}
 	}
+
+	.reader-post-card__excerpt[direction=rtl] {
+		&::before {
+			@include long-content-fade( $direction: left, $size: 15px * 1.6 * 5 );
+			top: inherit;
+			height: 15px * 1.6;
+		}
+	}
+
+	.reader-post-card__excerpt[direction=ltr] {
+		&::before {
+			@include long-content-fade( $direction: right, $size: 15px * 1.6 * 5 );
+			top: inherit;
+			height: 15px * 1.6;
+		}
+	}
 }
 
 // Action buttons in post card