autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix #186 - Add RTL support to the compose form textarea and statuses output

Browse Source
This commit is contained in:
Eugen Rochko
2017-02-28 01:52:31 +01:00
parent 809455aaae
commit d180aaa2a7
6 changed files with 57 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/components/components/autosuggest_textarea.jsx
View File

@ -1,5 +1,6 @@
import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { isRtl } from '../rtl';
const textAtCursorMatchesToken = (str, caretPosition) => {
let word;
@ -176,6 +177,11 @@ const AutosuggestTextarea = React.createClass({
const { value, suggestions, fileDropDate, disabled, placeholder, onKeyUp } = this.props;
const { isFileDragging, suggestionsHidden, selectedSuggestion } = this.state;
const className = isFileDragging ? 'autosuggest-textarea__textarea file-drop' : 'autosuggest-textarea__textarea';
const style = { direction: 'ltr' };
if (isRtl(value)) {
style.direction = 'rtl';
}
return (
<div className='autosuggest-textarea'>
@ -192,6 +198,7 @@ const AutosuggestTextarea = React.createClass({
onBlur={this.onBlur}
onDragEnter={this.onDragEnter}
onDragExit={this.onDragExit}
style={style}
/>
<div style={{ display: (suggestions.size > 0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'>

10
app/assets/javascripts/components/components/status_content.jsx
View File

@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import escapeTextContentForBrowser from 'escape-html';
import emojify from '../emoji';
import { isRtl } from '../rtl';
import { FormattedMessage } from 'react-intl';
import Permalink from './permalink';
@ -92,6 +93,11 @@ const StatusContent = React.createClass({
const content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
const directionStyle = { direction: 'ltr' };
if (isRtl(status.get('content'))) {
directionStyle.direction = 'rtl';
}
if (status.get('spoiler_text').length > 0) {
let mentionsPlaceholder = '';
@ -116,14 +122,14 @@ const StatusContent = React.createClass({
{mentionsPlaceholder}
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
<div style={{ display: hidden ? 'none' : 'block', ...directionStyle }} dangerouslySetInnerHTML={content} />
</div>
);
} else {
return (
<div
className='status__content'
style={{ cursor: 'pointer' }}
style={{ cursor: 'pointer', ...directionStyle }}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}