gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 18:10:58 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

refactor: Revert styles, implement quote posts as nested Status

Browse Source
This commit is contained in:
diondiondion 2025-05-20 11:38:42 +02:00
parent 7d30e60869
commit 4ff108601b
12 changed files with 153 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
app/javascript/mastodon/components/quote.tsx
View File

@ -1,73 +0,0 @@
import { FormattedMessage } from 'react-intl';
import { Map as ImmutableMap } from 'immutable';
import { useAppSelector } from 'mastodon/store';
import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status';
type QuoteMap = ImmutableMap<'state' | 'quoted_status', string | null>;
export const Quote: React.FC<{ quote: QuoteMap }> = ({ quote }) => {
const quotedStatusId = quote.get('quoted_status');
const state = quote.get('state');
const status = useAppSelector((state) =>
quotedStatusId ? state.statuses.get(quotedStatusId) : undefined,
);
const accountId = status?.get('account') as string | undefined;
const account = useAppSelector((state) =>
accountId ? state.accounts.get(accountId) : undefined,
);
if (!status || !quotedStatusId) {
return (
<div className='status__quote'>
<FormattedMessage
id=''
defaultMessage='This post cannot be displayed.'
/>
</div>
);
} else if (state === 'deleted') {
return (
<div className='status__quote'>
<FormattedMessage
id=''
defaultMessage='This post was removed by its author.'
/>
</div>
);
} else if (state === 'unauthorized') {
return (
<div className='status__quote'>
<FormattedMessage
id=''
defaultMessage='This post cannot be displayed as you are not authorized to view it.'
/>
</div>
);
} else if (state === 'pending') {
return (
<div className='status__quote'>
<FormattedMessage
id=''
defaultMessage='This post is pending approval from the original author.'
/>
</div>
);
} else if (state === 'rejected' || state === 'revoked') {
return (
<div className='status__quote'>
<FormattedMessage
id=''
defaultMessage='This post cannot be displayed as the original author does not allow it to be quoted.'
/>
</div>
);
}
return (
<div className='status__quote'>
<EmbeddedStatus statusId={quotedStatusId} />
</div>
);
};

15
app/javascript/mastodon/components/status.jsx
View File

@ -5,14 +5,12 @@ import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import { ContentWarning } from 'mastodon/components/content_warning';
import { FilterWarning } from 'mastodon/components/filter_warning';
@ -37,7 +35,6 @@ import StatusActionBar from './status_action_bar';
import StatusContent from './status_content';
import { StatusThreadLabel } from './status_thread_label';
import { VisibilityIcon } from './visibility_icon';
import { Quote } from './quote';
const domParser = new DOMParser();
@ -89,6 +86,7 @@ class Status extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map,
account: ImmutablePropTypes.record,
children: PropTypes.node,
previousId: PropTypes.string,
nextInReplyToId: PropTypes.string,
rootId: PropTypes.string,
@ -116,6 +114,7 @@ class Status extends ImmutablePureComponent {
onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func,
showThread: PropTypes.bool,
showActionBar: PropTypes.bool,
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
cacheMediaWidth: PropTypes.func,
@ -373,7 +372,7 @@ class Status extends ImmutablePureComponent {
};
render () {
const { intl, hidden, featured, unfocusable, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
const { intl, hidden, featured, unfocusable, unread, showThread, showActionBar = true, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46, children } = this.props;
let { status, account, ...other } = this.props;
@ -568,8 +567,6 @@ class Status extends ImmutablePureComponent {
{expanded && (
<>
{status.get('quote') && <Quote quote={status.get('quote')} />}
<StatusContent
status={status}
onClick={this.handleClick}
@ -579,12 +576,16 @@ class Status extends ImmutablePureComponent {
{...statusContentProps}
/>
{children}
{media}
{hashtagBar}
</>
)}
<StatusActionBar scrollKey={scrollKey} status={status} account={account} {...other} />
{showActionBar &&
<StatusActionBar scrollKey={scrollKey} status={status} account={account} {...other} />
}
</div>
</div>
</HotKeys>

6
app/javascript/mastodon/components/status_list.jsx
View File

@ -9,7 +9,7 @@ import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines';
import { RegenerationIndicator } from 'mastodon/components/regeneration_indicator';
import { InlineFollowSuggestions } from 'mastodon/features/home_timeline/components/inline_follow_suggestions';
import StatusContainer from '../containers/status_container';
import { StatusQuoteManager } from '../components/status_quoted';
import { LoadGap } from './load_gap';
import ScrollableList from './scrollable_list';
@ -113,7 +113,7 @@ export default class StatusList extends ImmutablePureComponent {
);
default:
return (
<StatusContainer
<StatusQuoteManager
key={statusId}
id={statusId}
onMoveUp={this.handleMoveUp}
@ -130,7 +130,7 @@ export default class StatusList extends ImmutablePureComponent {
if (scrollableContent && featuredStatusIds) {
scrollableContent = featuredStatusIds.map(statusId => (
<StatusContainer
<StatusQuoteManager
key={`f-${statusId}`}
id={statusId}
featured

87
app/javascript/mastodon/components/status_quoted.tsx Normal file
View File

@ -0,0 +1,87 @@
import { FormattedMessage } from 'react-intl';
import type { Map as ImmutableMap } from 'immutable';
import StatusContainer from 'mastodon/containers/status_container';
import { useAppSelector } from 'mastodon/store';
type QuoteMap = ImmutableMap<'state' | 'quoted_status', string | null>;
export const QuotedStatus: React.FC<{ quote: QuoteMap }> = ({ quote }) => {
const quotedStatusId = quote.get('quoted_status');
const state = quote.get('state');
const status = useAppSelector((state) =>
quotedStatusId ? state.statuses.get(quotedStatusId) : undefined,
);
if (!status || !quotedStatusId) {
return (
<FormattedMessage id='' defaultMessage='This post cannot be displayed.' />
);
} else if (state === 'deleted') {
return (
<FormattedMessage
id=''
defaultMessage='This post was removed by its author.'
/>
);
} else if (state === 'unauthorized') {
return (
<FormattedMessage
id=''
defaultMessage='This post cannot be displayed as you are not authorized to view it.'
/>
);
} else if (state === 'pending') {
return (
<FormattedMessage
id=''
defaultMessage='This post is pending approval from the original author.'
/>
);
} else if (state === 'rejected' || state === 'revoked') {
return (
<FormattedMessage
id=''
defaultMessage='This post cannot be displayed as the original author does not allow it to be quoted.'
/>
);
}
return (
<StatusContainer
// @ts-expect-error Status isn't typed yet
showActionBar={false}
id={quotedStatusId}
avatarSize={40}
/>
);
};
interface StatusQuoteManagerProps {
id: string;
[key: string]: unknown;
}
/**
* This wrapper component takes a status ID and, if the associated status
* is a quote post, it renders the quote into `StatusContainer` as a child.
* It passes all other props through to `StatusContainer`.
*/
export const StatusQuoteManager = (props: StatusQuoteManagerProps) => {
const status = useAppSelector((state) => state.statuses.get(props.id));
const quote = status?.get('quote') as QuoteMap | undefined;
if (quote) {
return (
<StatusContainer {...props}>
<div className='status__quote'>
<QuotedStatus quote={quote} />
</div>
</StatusContainer>
);
}
return <StatusContainer {...props} />;
};

4
app/javascript/mastodon/containers/status_container.jsx
View File

@ -42,8 +42,10 @@ import {
undoStatusTranslation,
} from '../actions/statuses';
import Status from '../components/status';
import { QuotedStatus } from '../components/status_quoted';
import { deleteModal } from '../initial_state';
import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
import { useAppSelector } from '../store';
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
@ -218,4 +220,4 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
});
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

5
app/javascript/mastodon/features/account_featured/index.tsx
View File

@ -14,7 +14,7 @@ import { Account } from 'mastodon/components/account';
import { ColumnBackButton } from 'mastodon/components/column_back_button';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { RemoteHint } from 'mastodon/components/remote_hint';
import StatusContainer from 'mastodon/containers/status_container';
import { StatusQuoteManager } from 'mastodon/components/status_quoted';
import { AccountHeader } from 'mastodon/features/account_timeline/components/account_header';
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
import Column from 'mastodon/features/ui/components/column';
@ -142,9 +142,8 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
/>
</h4>
{featuredStatusIds.map((statusId) => (
<StatusContainer
<StatusQuoteManager
key={`f-${statusId}`}
// @ts-expect-error inferred props are wrong
id={statusId}
contextType='account'
/>

14
app/javascript/mastodon/features/notifications/components/notification.jsx
View File

@ -20,7 +20,7 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import { Account } from 'mastodon/components/account';
import { Icon } from 'mastodon/components/icon';
import StatusContainer from 'mastodon/containers/status_container';
import { StatusQuoteManager } from 'mastodon/components/status_quoted';
import { me } from 'mastodon/initial_state';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
@ -175,7 +175,7 @@ class Notification extends ImmutablePureComponent {
renderMention (notification) {
return (
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
withDismiss
hidden={this.props.hidden}
@ -205,7 +205,7 @@ class Notification extends ImmutablePureComponent {
</span>
</div>
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
account={notification.get('account')}
muted
@ -235,7 +235,7 @@ class Notification extends ImmutablePureComponent {
</span>
</div>
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
account={notification.get('account')}
muted
@ -269,7 +269,7 @@ class Notification extends ImmutablePureComponent {
</span>
</div>
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
account={notification.get('account')}
contextType='notifications'
@ -304,7 +304,7 @@ class Notification extends ImmutablePureComponent {
</span>
</div>
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
account={notification.get('account')}
contextType='notifications'
@ -345,7 +345,7 @@ class Notification extends ImmutablePureComponent {
</span>
</div>
<StatusContainer
<StatusQuoteManager
id={notification.get('status')}
account={account}
contextType='notifications'

5
app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx
View File

@ -12,7 +12,7 @@ import {
} from 'mastodon/actions/statuses';
import type { IconProp } from 'mastodon/components/icon';
import { Icon } from 'mastodon/components/icon';
import Status from 'mastodon/containers/status_container';
import { StatusQuoteManager } from 'mastodon/components/status_quoted';
import { getStatusHidden } from 'mastodon/selectors/filters';
import { useAppSelector, useAppDispatch } from 'mastodon/store';
@ -102,8 +102,7 @@ export const NotificationWithStatus: React.FC<{
{label}
</div>
<Status
// @ts-expect-error -- <Status> is not yet typed
<StatusQuoteManager
id={statusId}
contextType='notifications'
withDismiss

8
app/javascript/mastodon/features/search/index.tsx
View File

@ -17,7 +17,7 @@ import { ColumnHeader } from 'mastodon/components/column_header';
import { CompatibilityHashtag as Hashtag } from 'mastodon/components/hashtag';
import { Icon } from 'mastodon/components/icon';
import ScrollableList from 'mastodon/components/scrollable_list';
import Status from 'mastodon/containers/status_container';
import { StatusQuoteManager } from 'mastodon/components/status_quoted';
import { Search } from 'mastodon/features/compose/components/search';
import { useSearchParam } from 'mastodon/hooks/useSearchParam';
import type { Hashtag as HashtagType } from 'mastodon/models/tags';
@ -53,8 +53,7 @@ const renderHashtags = (hashtags: HashtagType[]) =>
const renderStatuses = (statusIds: string[]) =>
hidePeek<string>(statusIds).map((id) => (
// @ts-expect-error inferred props are wrong
<Status key={id} id={id} />
<StatusQuoteManager key={id} id={id} />
));
type SearchType = 'all' | ApiSearchType;
@ -190,8 +189,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
onClickMore={handleSelectStatuses}
>
{results.statuses.slice(0, INITIAL_DISPLAY).map((id) => (
// @ts-expect-error inferred props are wrong
<Status key={id} id={id} />
<StatusQuoteManager key={id} id={id} />
))}
</SearchSection>
)}

10
app/javascript/mastodon/features/status/components/detailed_status.tsx
View File

@ -25,8 +25,8 @@ import { Icon } from 'mastodon/components/icon';
import { IconLogo } from 'mastodon/components/logo';
import MediaGallery from 'mastodon/components/media_gallery';
import { PictureInPicturePlaceholder } from 'mastodon/components/picture_in_picture_placeholder';
import { Quote } from 'mastodon/components/quote';
import StatusContent from 'mastodon/components/status_content';
import { QuotedStatus } from 'mastodon/components/status_quoted';
import { VisibilityIcon } from 'mastodon/components/visibility_icon';
import { Audio } from 'mastodon/features/audio';
import scheduleIdleTask from 'mastodon/features/ui/util/schedule_idle_task';
@ -366,14 +366,18 @@ export const DetailedStatus: React.FC<{
{expanded && (
<>
{status.get('quote') && <Quote quote={status.get('quote')} />}
<StatusContent
status={status}
onTranslate={handleTranslate}
{...(statusContentProps as any)}
/>
{status.get('quote') && (
<div className='status__quote'>
<QuotedStatus quote={status.get('quote')} />
</div>
)}
{media}
{hashtagBar}
</>

6
app/javascript/mastodon/features/status/index.jsx
View File

@ -6,8 +6,6 @@ import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { withRouter } from 'react-router-dom';
import { createSelector } from '@reduxjs/toolkit';
import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
@ -62,7 +60,7 @@ import {
} from '../../actions/statuses';
import ColumnHeader from '../../components/column_header';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
import StatusContainer from '../../containers/status_container';
import { StatusQuoteManager } from '../../components/status_quoted';
import { deleteModal } from '../../initial_state';
import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
import { getAncestorsIds, getDescendantsIds } from 'mastodon/selectors/contexts';
@ -477,7 +475,7 @@ class Status extends ImmutablePureComponent {
const { params: { statusId } } = this.props;
return list.map((id, i) => (
<StatusContainer
<StatusQuoteManager
key={id}
id={id}
onMoveUp={this.handleMoveUp}

96
app/javascript/styles/mastodon/components.scss
View File

@ -1491,34 +1491,34 @@ body > [data-popper-placement] {
}
}
$thread-margin: 46px + 8px;
&--in-thread {
--thread-margin: calc(46px + 8px);
border-bottom: 0;
}
.status__content,
.status__action-bar,
.media-gallery,
.video-player,
.audio-player,
.attachment-list,
.picture-in-picture-placeholder,
.more-from-author,
.status-card,
.hashtag-bar,
.content-warning,
.filter-warning {
margin-inline-start: $thread-margin;
width: calc(100% - $thread-margin);
}
.status__content,
.status__action-bar,
.media-gallery,
.video-player,
.audio-player,
.attachment-list,
.picture-in-picture-placeholder,
.more-from-author,
.status-card,
.hashtag-bar,
.content-warning,
.filter-warning {
margin-inline-start: var(--thread-margin);
width: calc(100% - var(--thread-margin));
}
.more-from-author {
width: calc(100% - $thread-margin + 2px);
}
.more-from-author {
width: calc(100% - var(--thread-margin) + 2px);
}
.status__content__read-more-button {
margin-inline-start: $thread-margin;
.status__content__read-more-button {
margin-inline-start: var(--thread-margin);
}
}
&__action-bar__button-wrapper {
@ -1571,6 +1571,8 @@ body > [data-popper-placement] {
.status__relative-time {
display: block;
font-size: 15px;
line-height: 22px;
height: 40px;
order: 2;
flex: 0 0 auto;
@ -1601,8 +1603,10 @@ body > [data-popper-placement] {
.status__info .status__display-name {
max-width: 100%;
display: flex;
font-size: 15px;
line-height: 22px;
align-items: center;
gap: 8px;
gap: 10px;
overflow: hidden;
.display-name {
@ -1626,7 +1630,7 @@ body > [data-popper-placement] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
gap: 10px;
cursor: pointer;
}
@ -1681,7 +1685,6 @@ body > [data-popper-placement] {
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-inline-start: 30px;
.icon {
width: 16px;
@ -10503,7 +10506,6 @@ noscript {
.account__avatar {
flex: 0 0 auto;
--avatar-border-radius: 4px;
}
}
@ -10937,43 +10939,3 @@ noscript {
.lists-scrollable {
min-height: 50vh;
}
.status__quote {
padding-inline-start: 46px + 8px;
position: relative;
margin-bottom: 16px;
& > div {
background: var(--rich-text-container-color);
padding: 8px;
border-radius: 8px;
color: var(--rich-text-text-color);
}
.notification-group__embedded-status__account bdi,
.notification-group__embedded-status__content,
.notification-group__embedded-status__content a {
color: var(--rich-text-text-color);
}
.notification-group__embedded-status__account .display-name__account {
color: var(--rich-text-text-color);
opacity: 0.7;
}
.notification-group__embedded-status__account {
margin-bottom: 4px;
}
&::before {
display: block;
content: '';
width: 24px;
height: 20px;
mask-image: url('../images/quote.svg');
background-color: var(--rich-text-decorations-color);
position: absolute;
inset-inline-start: 20px;
top: 4px;
}
}