diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.tsx b/app/javascript/mastodon/features/ui/components/boost_modal.tsx index 40b0c81833..cdf7138d49 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.tsx +++ b/app/javascript/mastodon/features/ui/components/boost_modal.tsx @@ -1,28 +1,17 @@ -import type { MouseEventHandler } from 'react'; import { useCallback, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; -import { useHistory } from 'react-router'; - -import type Immutable from 'immutable'; import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; -import AttachmentList from 'mastodon/components/attachment_list'; +import { Button } from 'mastodon/components/button'; import { Icon } from 'mastodon/components/icon'; -import { VisibilityIcon } from 'mastodon/components/visibility_icon'; import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown'; -import type { Account } from 'mastodon/models/account'; +import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status'; import type { Status, StatusVisibility } from 'mastodon/models/status'; import { useAppSelector } from 'mastodon/store'; -import { Avatar } from '../../../components/avatar'; -import { Button } from '../../../components/button'; -import { DisplayName } from '../../../components/display_name'; -import { RelativeTimestamp } from '../../../components/relative_timestamp'; -import StatusContent from '../../../components/status_content'; - const messages = defineMessages({ cancel_reblog: { id: 'status.cancel_reblog_private', @@ -37,18 +26,17 @@ export const BoostModal: React.FC<{ onReblog: (status: Status, privacy: StatusVisibility) => void; }> = ({ status, onReblog, onClose }) => { const intl = useIntl(); - const history = useHistory(); - const default_privacy = useAppSelector( + const defaultPrivacy = useAppSelector( // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access (state) => state.compose.get('default_privacy') as StatusVisibility, ); - const account = status.get('account') as Account; + const statusId = status.get('id') as string; const statusVisibility = status.get('visibility') as StatusVisibility; const [privacy, setPrivacy] = useState( - statusVisibility === 'private' ? 'private' : default_privacy, + statusVisibility === 'private' ? 'private' : defaultPrivacy, ); const onPrivacyChange = useCallback((value: StatusVisibility) => { @@ -60,20 +48,9 @@ export const BoostModal: React.FC<{ onClose(); }, [onClose, onReblog, status, privacy]); - const handleAccountClick = useCallback( - (e) => { - if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { - e.preventDefault(); - onClose(); - history.push(`/@${account.acct}`); - } - }, - [history, onClose, account], - ); - - const buttonText = status.get('reblogged') - ? messages.cancel_reblog - : messages.reblog; + const handleCancel = useCallback(() => { + onClose(); + }, [onClose]); const findContainer = useCallback( () => document.getElementsByClassName('modal-root__container')[0], @@ -81,81 +58,78 @@ export const BoostModal: React.FC<{ ); return ( -
-
-
-
- - - - - - - - -
- -
- - -
+
+
+
+
+
- {/* @ts-expect-error Expected until StatusContent is typed */} - +
+

+ {status.get('reblogged') ? ( + + ) : ( + + )} +

+
+ + Shift+ + + ), + }} + /> +
+
+
- {(status.get('media_attachments') as Immutable.List).size > - 0 && ( - - )} +
+
-
-
- - Shift + - - ), - }} +
+
+ {!status.get('reblogged') && ( + + )} + +
+ + + +
- {statusVisibility !== 'private' && !status.get('reblogged') && ( - - )} -
); diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 343af40424..4321acef4b 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -97,6 +97,8 @@ "block_modal.title": "Block user?", "block_modal.you_wont_see_mentions": "You won't see posts that mention them.", "boost_modal.combo": "You can press {combo} to skip this next time", + "boost_modal.reblog": "Boost post?", + "boost_modal.undo_reblog": "Unboost post?", "bundle_column_error.copy_stacktrace": "Copy error report", "bundle_column_error.error.body": "The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.", "bundle_column_error.error.title": "Oh, no!", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6157a83af4..0b0cbbfa84 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6142,6 +6142,48 @@ a.status-card { } } + &__status { + border: 1px solid var(--modal-border-color); + border-radius: 8px; + padding: 8px; + cursor: pointer; + + &__account { + display: flex; + align-items: center; + gap: 4px; + margin-bottom: 8px; + color: $dark-text-color; + + bdi { + color: inherit; + } + } + + &__content { + display: -webkit-box; + font-size: 15px; + line-height: 22px; + color: $dark-text-color; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + max-height: 4 * 22px; + overflow: hidden; + + p, + a { + color: inherit; + } + } + + .reply-indicator__attachments { + margin-top: 0; + font-size: 15px; + line-height: 22px; + color: $dark-text-color; + } + } + &__bullet-points { display: flex; flex-direction: column; @@ -6219,6 +6261,12 @@ a.status-card { gap: 8px; justify-content: flex-end; + &__hint { + font-size: 14px; + line-height: 20px; + color: $dark-text-color; + } + .link-button { padding: 10px 12px; font-weight: 600; @@ -6226,6 +6274,18 @@ a.status-card { } } +.hotkey-combination { + display: inline-flex; + align-items: center; + gap: 4px; + + kbd { + padding: 3px 5px; + border: 1px solid var(--background-border-color); + border-radius: 4px; + } +} + .boost-modal, .report-modal, .actions-modal, @@ -10579,6 +10639,7 @@ noscript { } .reply-indicator__attachments { + margin-top: 0; font-size: 15px; line-height: 22px; color: $dark-text-color;