diff options
10 files changed, 126 insertions, 131 deletions
diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js index ced18b348..bb1979cc7 100644 --- a/app/javascript/flavours/glitch/components/account.js +++ b/app/javascript/flavours/glitch/components/account.js @@ -105,10 +105,22 @@ export default class Account extends ImmutablePureComponent { } return small ? ( - <div className='account small'> - <div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div> - <DisplayName account={account} /> - </div> + <Permalink + className='account small' + href={account.get('url')} + to={`/accounts/${account.get('id')}`} + > + <div className='account__avatar-wrapper'> + <Avatar + account={account} + size={24} + /> + </div> + <DisplayName + account={account} + inline + /> + </Permalink> ) : ( <div className='account'> <div className='account__wrapper'> diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js index ad1c3a534..4c65aaefa 100644 --- a/app/javascript/flavours/glitch/components/display_name.js +++ b/app/javascript/flavours/glitch/components/display_name.js @@ -1,28 +1,30 @@ +// Package imports. import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -export default class DisplayName extends React.PureComponent { - - static propTypes = { - account: ImmutablePropTypes.map.isRequired, - className: PropTypes.string, - }; - - render () { - const { - account, - className, - } = this.props; - const computedClass = classNames('display-name', className); - const displayNameHtml = { __html: account.get('display_name_html') }; - - return ( - <span className={computedClass}> - <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span> - </span> - ); - } +// The component. +export default function DisplayName ({ + account, + className, + inline, +}) { + const computedClass = classNames('display-name', { inline }, className); + // The result. + return account ? ( + <span className={computedClass}> + <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /> + {inline ? ' ' : null} + <span className='display-name__account'>@{account.get('acct')}</span> + </span> + ) : null; } + +// Props. +DisplayName.propTypes = { + account: ImmutablePropTypes.map, + className: PropTypes.string, + inline: PropTypes.bool, +}; diff --git a/app/javascript/flavours/glitch/components/permalink.js b/app/javascript/flavours/glitch/components/permalink.js index d726d37a2..d6556b584 100644 --- a/app/javascript/flavours/glitch/components/permalink.js +++ b/app/javascript/flavours/glitch/components/permalink.js @@ -22,7 +22,13 @@ export default class Permalink extends React.PureComponent { } render () { - const { href, children, className, ...other } = this.props; + const { + children, + className, + href, + to, + ...other + } = this.props; return ( <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}> diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js index 4c9d4b197..3582dedfe 100644 --- a/app/javascript/flavours/glitch/features/composer/index.js +++ b/app/javascript/flavours/glitch/features/composer/index.js @@ -59,7 +59,7 @@ function mapStateToProps (state) { preselectDate: state.getIn(['compose', 'preselectDate']), privacy: state.getIn(['compose', 'privacy']), progress: state.getIn(['compose', 'progress']), - replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null, + replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null, replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null, resetFileKey: state.getIn(['compose', 'resetFileKey']), sideArm: state.getIn(['local_settings', 'side_arm']), @@ -265,7 +265,6 @@ class Composer extends React.Component { handleSubmit, handleRefTextarea, } = this.handlers; - const { history } = this.context; const { acceptContentTypes, amUnlocked, @@ -317,7 +316,6 @@ class Composer extends React.Component { <ComposerReply account={replyAccount} content={replyContent} - history={history} intl={intl} onCancel={onCancelReply} /> @@ -384,11 +382,6 @@ class Composer extends React.Component { } -// Context -Composer.contextTypes = { - history: PropTypes.object, -}; - // Props. Composer.propTypes = { intl: PropTypes.object.isRequired, @@ -405,7 +398,7 @@ Composer.propTypes = { preselectDate: PropTypes.instanceOf(Date), privacy: PropTypes.string, progress: PropTypes.number, - replyAccount: ImmutablePropTypes.map, + replyAccount: PropTypes.string, replyContent: PropTypes.string, resetFileKey: PropTypes.number, sideArm: PropTypes.string, diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js index 568705aff..0b8ceddee 100644 --- a/app/javascript/flavours/glitch/features/composer/reply/index.js +++ b/app/javascript/flavours/glitch/features/composer/reply/index.js @@ -1,12 +1,10 @@ // Package imports. import PropTypes from 'prop-types'; import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages } from 'react-intl'; // Components. -import Avatar from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import AccountContainer from 'flavours/glitch/containers/account_container'; import IconButton from 'flavours/glitch/components/icon_button'; // Utils. @@ -31,17 +29,6 @@ const handlers = { onCancel(); } }, - - // Handles a click on the status's account. - handleClickAccount () { - const { - account, - history, - } = this.props; - if (history) { - history.push(`/accounts/${account.get('id')}`); - } - }, }; // The component. @@ -55,10 +42,7 @@ export default class ComposerReply extends React.PureComponent { // Rendering. render () { - const { - handleClick, - handleClickAccount, - } = this.handlers; + const { handleClick } = this.handlers; const { account, content, @@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent { title={intl.formatMessage(messages.cancel)} /> {account ? ( - <a - className='account' - href={account.get('url')} - onClick={handleClickAccount} - > - <Avatar - account={account} - className='avatar' - size={24} - /> - <DisplayName - account={account} - className='display_name' - /> - </a> + <AccountContainer + id={account} + small + /> ) : null} </header> <div @@ -105,9 +78,8 @@ export default class ComposerReply extends React.PureComponent { } ComposerReply.propTypes = { - account: ImmutablePropTypes.map, + account: PropTypes.string, content: PropTypes.string, - history: PropTypes.object, intl: PropTypes.object.isRequired, onCancel: PropTypes.func, }; diff --git a/app/javascript/flavours/glitch/features/composer/textarea/index.js b/app/javascript/flavours/glitch/features/composer/textarea/index.js index 955c06098..2e0b3e3d7 100644 --- a/app/javascript/flavours/glitch/features/composer/textarea/index.js +++ b/app/javascript/flavours/glitch/features/composer/textarea/index.js @@ -32,7 +32,7 @@ const handlers = { // When blurring the textarea, suggestions are hidden. handleBlur () { - //this.setState({ suggestionsHidden: true }); + this.setState({ suggestionsHidden: true }); }, // When the contents of the textarea change, we have to pull up new @@ -57,7 +57,7 @@ const handlers = { const right = value.slice(selectionStart).search(/[\s\u200B]/); const token = function () { switch (true) { - case left < 0 || /[@:]/.test(!value[left]): + case left < 0 || !/[@:]/.test(value[left]): return null; case right < 0: return value.slice(left); diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js index d2c794ae9..f55640bcf 100644 --- a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js +++ b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js @@ -24,9 +24,16 @@ const handlers = { } = this.props; if (onClick) { e.preventDefault(); + e.stopPropagation(); // Prevents following account links onClick(index); } }, + + // This prevents the focus from changing, which would mess with + // our suggestion code. + handleMouseDown (e) { + e.preventDefault(); + }, }; // The component. @@ -40,7 +47,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component { // Rendering. render () { - const { handleClick } = this.handlers; + const { + handleMouseDown, + handleClick, + } = this.handlers; const { selected, suggestion, @@ -51,7 +61,8 @@ export default class ComposerTextareaSuggestionsItem extends React.Component { return ( <div className={computedClass} - onMouseDown={handleClick} + onMouseDown={handleMouseDown} + onClickCapture={handleClick} // Jumps in front of contents role='button' tabIndex='0' > diff --git a/app/javascript/flavours/glitch/locales/pl.js b/app/javascript/flavours/glitch/locales/pl.js index c131845b9..e38385715 100644 --- a/app/javascript/flavours/glitch/locales/pl.js +++ b/app/javascript/flavours/glitch/locales/pl.js @@ -36,7 +36,7 @@ const messages = { 'favourite_modal.combo': 'Możesz nacisnąć {combo}, aby pominąć to następnym razem', -'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie', + 'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie', 'notification.markForDeletion': 'Oznacz do usunięcia', 'notifications.clear': 'Wyczyść wszystkie powiadomienia', diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 46df79906..ab5fa4712 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -52,22 +52,7 @@ margin-bottom: 5px; overflow: hidden; - & > .account { - & > .avatar { - float: left; - margin-right: 5px; - } - - & > .display_name { - color: $ui-base-color; - display: block; - padding-right: 25px; - max-width: 100%; - line-height: 24px; - text-decoration: none; - overflow: hidden; - } - } + & > .account.small { color: $ui-base-color } & > .cancel { float: right; @@ -87,34 +72,34 @@ overflow: visible; white-space: pre-wrap; padding-top: 5px; - } - - .emojione { - width: 20px; - height: 20px; - margin: -5px 0 0; - } - p { - margin-bottom: 20px; + p { + margin-bottom: 20px; - &:last-child { margin-bottom: 0 } - } + &:last-child { margin-bottom: 0 } + } - a { - color: lighten($ui-base-color, 20%); - text-decoration: none; + a { + color: lighten($ui-base-color, 20%); + text-decoration: none; - &:hover { text-decoration: underline } + &:hover { text-decoration: underline } - &.mention { - &:hover { - text-decoration: none; + &.mention { + &:hover { + text-decoration: none; - span { text-decoration: underline } + span { text-decoration: underline } + } } } } + + .emojione { + width: 20px; + height: 20px; + margin: -5px 0 0; + } } .composer--textarea { @@ -175,6 +160,7 @@ padding: 10px; font-size: 14px; line-height: 18px; + overflow: hidden; cursor: pointer; &:hover, @@ -191,6 +177,12 @@ height: 18px; } } + + & > .account.small { + .display-name { + & > span { color: lighten($ui-base-color, 36%) } + } + } } .composer--upload_form { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index ab1359108..1cda5343b 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -745,6 +745,8 @@ .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); + color: inherit; + text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -762,27 +764,8 @@ & > .account__avatar-wrapper { margin: 0 8px 0 0 } & > .display-name { - display: block; - padding: 0; - height: auto; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - & > strong { - display: inline; - font-size: inherit; - line-height: inherit; - } - - & > span { - display: inline; - color: lighten($ui-base-color, 36%); - font-size: inherit; - line-height: inherit; - - &::before { content: " " } - } + height: 24px; + line-height: 24px; } } } @@ -1243,6 +1226,30 @@ text-decoration: underline; } } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } } .status__relative-time, |