From 9ab1aa15e96f6d0f77664cd923cd9e54ce5e1248 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 19 Nov 2023 21:28:53 +0100 Subject: [PATCH 1/2] Change `ReplyIndicator` implementation and markup to match upstream's --- .../compose/components/reply_indicator.jsx | 31 ++++++++++--------- .../containers/reply_indicator_container.js | 5 ++- .../styles/components/compose_form.scss | 23 +++++++++++--- 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx index 661dff3d54..6a8bf6e882 100644 --- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx @@ -6,9 +6,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import AttachmentList from 'flavours/glitch/components/attachment_list'; +import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router'; +import { Avatar } from '../../../components/avatar'; +import { DisplayName } from '../../../components/display_name'; import { IconButton } from '../../../components/icon_button'; -import AccountContainer from '../../../containers/account_container'; const messages = defineMessages({ cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' }, @@ -18,14 +20,19 @@ class ReplyIndicator extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, - onCancel: PropTypes.func, + onCancel: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + ...WithOptionalRouterPropTypes, }; handleClick = () => { - const { onCancel } = this.props; - if (onCancel) { - onCancel(); + this.props.onCancel(); + }; + + handleAccountClick = (e) => { + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + this.props.history?.push(`/@${this.props.status.getIn(['account', 'acct'])}`); } }; @@ -38,19 +45,15 @@ class ReplyIndicator extends ImmutablePureComponent { const content = { __html: status.get('contentHtml') }; - const account = status.get('account'); - return (
- {account && ( - - )} + +
+ +
@@ -67,4 +70,4 @@ class ReplyIndicator extends ImmutablePureComponent { } -export default injectIntl(ReplyIndicator); +export default withOptionalRouter(injectIntl(ReplyIndicator)); diff --git a/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js b/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js index 678124b2a8..1147e448af 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js @@ -1,9 +1,12 @@ import { connect } from 'react-redux'; import { cancelReplyCompose } from '../../../actions/compose'; +import { makeGetStatus } from '../../../selectors'; import ReplyIndicator from '../components/reply_indicator'; const makeMapStateToProps = () => { + const getStatus = makeGetStatus(); + const mapStateToProps = state => { let statusId = state.getIn(['compose', 'id'], null); let editing = true; @@ -14,7 +17,7 @@ const makeMapStateToProps = () => { } return { - status: state.getIn(['statuses', statusId]), + status: getStatus(state, { id: statusId }), editing, }; }; diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 0f64c0dcc1..d84e672b8f 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -141,10 +141,6 @@ .reply-indicator__header { margin-bottom: 5px; overflow: hidden; - - & > .account.small { - color: $inverted-text-color; - } } .reply-indicator__cancel { @@ -152,6 +148,25 @@ line-height: 24px; } +.reply-indicator__display-name { + color: $inverted-text-color; + display: block; + max-width: 100%; + line-height: 24px; + overflow: hidden; + text-decoration: none; + + & > .display-name { + line-height: unset; + height: unset; + } +} + +.reply-indicator__display-avatar { + float: left; + margin-inline-end: 5px; +} + .reply-indicator__content { position: relative; font-size: 14px; From f00fcda785b2a107467190d24a1ac0c2565ac2bc Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 19 Nov 2023 22:04:48 +0100 Subject: [PATCH 2/2] Reduce differences with upstream in `Account` component --- .../flavours/glitch/components/account.jsx | 36 +++---------------- .../glitch/styles/components/accounts.scss | 15 -------- 2 files changed, 4 insertions(+), 47 deletions(-) diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 8aaafc18b9..78cf59e345 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -18,7 +18,7 @@ import { RelativeTimestamp } from './relative_timestamp'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, - requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, + requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' }, @@ -38,7 +38,6 @@ class Account extends ImmutablePureComponent { onMuteNotifications: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, - small: PropTypes.bool, actionIcon: PropTypes.string, actionTitle: PropTypes.string, defaultAction: PropTypes.string, @@ -74,17 +73,7 @@ class Account extends ImmutablePureComponent { }; render () { - const { - account, - hidden, - intl, - small, - onActionClick, - actionIcon, - actionTitle, - defaultAction, - size, - } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; if (!account) { return ( @@ -114,7 +103,7 @@ class Account extends ImmutablePureComponent { if (actionIcon) { buttons = ; } - } else if (account.get('id') !== me && !small && account.get('relationship', null) !== null) { + } else if (account.get('id') !== me && account.get('relationship', null) !== null) { const following = account.getIn(['relationship', 'following']); const requested = account.getIn(['relationship', 'requested']); const blocking = account.getIn(['relationship', 'blocking']); @@ -151,24 +140,7 @@ class Account extends ImmutablePureComponent { mute_expires_at =
; } - return small ? ( - -
- -
- - - ) : ( + return (
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index e68c6cac04..5d4426fbc6 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -27,21 +27,6 @@ -webkit-box-orient: vertical; color: $ui-secondary-color; } - - &.small { - border: 0; - padding: 0; - - & > .account__avatar-wrapper { - margin: 0; - margin-inline-end: 8px; - } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } } .follow-recommendations-account {