From ad10a80a9925c247ef14837d3a14ff7e7375f001 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Fri, 5 Jan 2018 20:04:13 -0800 Subject: [PATCH] Styling and autosuggest fixes for #293 --- .../flavours/glitch/components/account.js | 20 ++++-- .../glitch/components/display_name.js | 44 +++++++------ .../flavours/glitch/components/permalink.js | 8 ++- .../glitch/features/composer/index.js | 11 +--- .../glitch/features/composer/reply/index.js | 42 ++---------- .../features/composer/textarea/index.js | 4 +- .../textarea/suggestions/item/index.js | 15 ++++- app/javascript/flavours/glitch/locales/pl.js | 2 +- .../glitch/styles/components/composer.scss | 66 ++++++++----------- .../glitch/styles/components/index.scss | 49 ++++++++------ 10 files changed, 128 insertions(+), 133 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 ? ( -
-
- -
+ +
+ +
+ +
) : (
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 ( - - @{this.props.account.get('acct')} - - ); - } +// The component. +export default function DisplayName ({ + account, + className, + inline, +}) { + const computedClass = classNames('display-name', { inline }, className); + // The result. + return account ? ( + + + {inline ? ' ' : null} + @{account.get('acct')} + + ) : 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 ( 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 { @@ -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 ? ( - - - - + ) : null}
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,6 +72,27 @@ overflow: visible; white-space: pre-wrap; padding-top: 5px; + + p { + margin-bottom: 20px; + + &:last-child { margin-bottom: 0 } + } + + a { + color: lighten($ui-base-color, 20%); + text-decoration: none; + + &:hover { text-decoration: underline } + + &.mention { + &:hover { + text-decoration: none; + + span { text-decoration: underline } + } + } + } } .emojione { @@ -94,27 +100,6 @@ height: 20px; margin: -5px 0 0; } - - p { - margin-bottom: 20px; - - &:last-child { margin-bottom: 0 } - } - - a { - color: lighten($ui-base-color, 20%); - text-decoration: none; - - &:hover { text-decoration: underline } - - &.mention { - &:hover { - text-decoration: none; - - span { text-decoration: underline } - } - } - } } .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,