diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 2d200a55b0..281e698743 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -386,6 +386,13 @@ class Status extends ImmutablePureComponent { account = status.get('account'); status = status.get('reblog'); + } else if (status.get('visibility') === 'direct') { + prepend = ( +
+
+ +
+ ); } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) { const display_name_html = { __html: status.getIn(['account', 'display_name_html']) }; diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx index 08e37e0892..7b4031b68e 100644 --- a/app/javascript/mastodon/components/status_action_bar.jsx +++ b/app/javascript/mastodon/components/status_action_bar.jsx @@ -14,7 +14,7 @@ const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' }, edit: { id: 'status.edit', defaultMessage: 'Edit' }, - direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' }, mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, block: { id: 'account.block', defaultMessage: 'Block @{name}' }, diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index be6b178969..72eb7e6b65 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -28,7 +28,7 @@ const messages = defineMessages({ linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' }, account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' }, mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' }, - direct: { id: 'account.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'account.direct', defaultMessage: 'Privately mention @{name}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, block: { id: 'account.block', defaultMessage: 'Block @{name}' }, mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, diff --git a/app/javascript/mastodon/features/direct_timeline/index.jsx b/app/javascript/mastodon/features/direct_timeline/index.jsx index e2667d8e94..5d4a7c49a5 100644 --- a/app/javascript/mastodon/features/direct_timeline/index.jsx +++ b/app/javascript/mastodon/features/direct_timeline/index.jsx @@ -11,7 +11,7 @@ import ColumnHeader from 'mastodon/components/column_header'; import ConversationsListContainer from './containers/conversations_list_container'; const messages = defineMessages({ - title: { id: 'column.direct', defaultMessage: 'Direct messages' }, + title: { id: 'column.direct', defaultMessage: 'Private mentions' }, }); class DirectTimeline extends React.PureComponent { @@ -91,7 +91,7 @@ class DirectTimeline extends React.PureComponent { timelineId='direct' onLoadMore={this.handleLoadMore} prepend={
} - emptyMessage={} + emptyMessage={} /> diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx index ee8a009eea..29659acc73 100644 --- a/app/javascript/mastodon/features/getting_started/index.jsx +++ b/app/javascript/mastodon/features/getting_started/index.jsx @@ -23,7 +23,7 @@ const messages = defineMessages({ settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' }, community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' }, explore: { id: 'navigation_bar.explore', defaultMessage: 'Explore' }, - direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' }, bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx index 5cbe4984cf..0c74c4cc4d 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.jsx +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -13,7 +13,7 @@ const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' }, edit: { id: 'status.edit', defaultMessage: 'Edit' }, - direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' }, + direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' }, mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, reply: { id: 'status.reply', defaultMessage: 'Reply' }, reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx index 8a2194450c..e4e5720268 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.jsx +++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx @@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; import StatusContent from '../../../components/status_content'; import MediaGallery from '../../../components/media_gallery'; import { Link } from 'react-router-dom'; -import { injectIntl, defineMessages, FormattedDate } from 'react-intl'; +import { injectIntl, defineMessages, FormattedDate, FormattedMessage } from 'react-intl'; import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; @@ -262,7 +262,13 @@ class DetailedStatus extends ImmutablePureComponent { return (
-
+
+ {status.get('visibility') === 'direct' && ( +
+
+ +
+ )}
diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx index 358ad14c46..1d7cb685f2 100644 --- a/app/javascript/mastodon/features/status/index.jsx +++ b/app/javascript/mastodon/features/status/index.jsx @@ -630,7 +630,7 @@ class Status extends ImmutablePureComponent { {ancestors} -
+
") no-repeat right 8px center / auto 16px; } + +.status__wrapper-direct { + background-color: rgba($ui-highlight-color, 0.1); + + &:focus { + background-color: rgba($ui-highlight-color, 0.15); + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b9303f2ef5..6d20be5419 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1244,7 +1244,7 @@ body > [data-popper-placement] { .status__prepend { padding: 16px; padding-bottom: 0; - display: flex; + display: inline-flex; gap: 10px; font-size: 15px; line-height: 22px; @@ -1262,6 +1262,18 @@ body > [data-popper-placement] { } } +.status__wrapper-direct { + background: mix($ui-base-color, $ui-highlight-color, 95%); + + &:focus { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .status__action-bar { display: flex; justify-content: space-between; @@ -1315,6 +1327,11 @@ body > [data-popper-placement] { .audio-player { margin-top: 16px; } + + .status__prepend { + padding: 0; + margin-bottom: 16px; + } } .detailed-status__meta { @@ -1333,6 +1350,32 @@ body > [data-popper-placement] { padding: 10px 0; } +.detailed-status__wrapper-direct { + .detailed-status, + .detailed-status__action-bar { + background: mix($ui-base-color, $ui-highlight-color, 95%); + } + + &:focus { + .detailed-status, + .detailed-status__action-bar { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + } + + .detailed-status__action-bar { + border-top-color: mix( + lighten($ui-base-color, 8%), + $ui-highlight-color, + 95% + ); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .detailed-status__link { color: inherit; text-decoration: none;