diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-10-25 19:02:21 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-25 19:02:21 +0200 |
commit | 0ca29eaa3f762219cacce46059acfa71393533ad (patch) | |
tree | eaabb4725ba1f8755b2b2b7ac17690f40a1a08df /app/javascript/mastodon | |
parent | fcca781aae609067bc9e43ad4a466ef6d2074bbb (diff) |
Change layout of posts in web UI (#19423)
Diffstat (limited to 'app/javascript/mastodon')
12 files changed, 47 insertions, 77 deletions
diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 36429e647..92d14da8b 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent { <div className='account'> <div className='account__wrapper'> <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}> - <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> + <div className='account__avatar-wrapper'><Avatar account={account} size={46} /></div> {mute_expires_at} <DisplayName account={account} /> </Permalink> diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 381088be7..3106a3ecd 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent { account = status.get('account'); status = status.get('reblog'); + } 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']) }; + + prepend = ( + <div className='status__prepend'> + <div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div> + <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} /> + </div> + ); } if (pictureInPicture.get('inUse')) { @@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent { } if (account === undefined || account === null) { - statusAvatar = <Avatar account={status.get('account')} size={48} />; + statusAvatar = <Avatar account={status.get('account')} size={46} />; } else { statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />; } @@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent { {prepend} <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}> - <div className='status__expand' onClick={this.handleClick} role='presentation' /> - <div className='status__info'> <a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span> @@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent { status={status} onClick={this.handleClick} expanded={!status.get('hidden')} - showThread={showThread} onExpandedToggle={this.handleExpandedToggle} onTranslate={this.handleTranslate} collapsable diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 9e8cadce2..17150524e 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent { render () { const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props; + const { signedIn } = this.context.identity; - const anonymousAccess = !me; + const anonymousAccess = !signedIn; const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility')); const mutingConversation = status.get('muted'); @@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent { } const shareButton = ('share' in navigator) && publicStatus && ( - <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} /> + <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} /> ); const filterButton = this.props.onFilter && ( - <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} /> + <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} /> ); return ( <div className='status__action-bar'> - <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount /> - <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} /> - <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} /> + <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount /> + <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} /> + <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} /> + <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /> {shareButton} {filterButton} - <div className='status__action-bar-dropdown'> + <div className='status__action-bar__dropdown'> <DropdownMenuContainer scrollKey={scrollKey} disabled={anonymousAccess} diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 5e66c6fb3..3e3ba7d0f 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, expanded: PropTypes.bool, - showThread: PropTypes.bool, onExpandedToggle: PropTypes.func, onTranslate: PropTypes.func, onClick: PropTypes.func, @@ -214,7 +213,6 @@ class StatusContent extends React.PureComponent { const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const renderReadMore = this.props.onClick && status.get('collapsed'); - const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language'); const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') }; @@ -226,12 +224,6 @@ class StatusContent extends React.PureComponent { 'status__content--collapsed': renderReadMore, }); - const showThreadButton = renderViewThread && ( - <button className='status__content__read-more-button' onClick={this.props.onClick}> - <FormattedMessage id='status.show_thread' defaultMessage='Show thread' /> - </button> - ); - const readMoreButton = renderReadMore && ( <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'> <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth /> @@ -275,7 +267,6 @@ class StatusContent extends React.PureComponent { {!hidden && poll} {!hidden && translateButton} - {showThreadButton} </div> ); } else if (this.props.onClick) { @@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent { {poll} {translateButton} - {showThreadButton} </div> {readMoreButton} @@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent { {poll} {translateButton} - {showThreadButton} </div> ); } diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js index 51be9a609..8194c063a 100644 --- a/app/javascript/mastodon/features/account/components/featured_tags.js +++ b/app/javascript/mastodon/features/account/components/featured_tags.js @@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent { name={featuredTag.get('name')} href={featuredTag.get('url')} to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`} - uses={featuredTag.get('statuses_count')} + uses={featuredTag.get('statuses_count') * 1} withGraph={false} description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)} /> diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 954cb0ee7..e39f0158e 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent { {!(suspended || hidden) && ( <div className='account__header__extra'> <div className='account__header__bio'> - {fields.size > 0 && ( - <div className='account__header__fields'> - {fields.map((pair, i) => ( - <dl key={i}> - <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' /> - - <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}> - {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> - </dd> - </dl> - ))} - </div> - )} - {(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />} {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />} - <div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div> + <div className='account__header__fields'> + <dl> + <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt> + <dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd> + </dl> + + {fields.map((pair, i) => ( + <dl key={i}> + <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' /> + + <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}> + {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> + </dd> + </dl> + ))} + </div> </div> <div className='account__header__extra__links'> diff --git a/app/javascript/mastodon/features/compose/components/action_bar.js b/app/javascript/mastodon/features/compose/components/action_bar.js index 4ff0b7b94..ceed928bf 100644 --- a/app/javascript/mastodon/features/compose/components/action_bar.js +++ b/app/javascript/mastodon/features/compose/components/action_bar.js @@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent { return ( <div className='compose__action-bar'> <div className='compose__action-bar-dropdown'> - <DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' /> + <DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' /> </div> </div> ); diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js index e6ba7d8b7..372765ca4 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.js +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js @@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent { <div className='navigation-bar'> <Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}> <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span> - <Avatar account={this.props.account} size={48} /> + <Avatar account={this.props.account} size={46} /> </Permalink> <div className='navigation-bar__profile'> diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 2e240c414..a0a6a7894 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent { <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div> <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div> <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div> - {shareButton} <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div> + {shareButton} + <div className='detailed-status__action-bar-dropdown'> <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} /> </div> diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 320a847f7..1a2aab819 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent { <div style={outerStyle}> <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}> <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'> - <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div> + <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div> <DisplayName account={status.get('account')} localDomain={this.props.domain} /> </a> diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index 875b2b75d..67be69d43 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -2,10 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import StatusContent from '../../../components/status_content'; -import Avatar from '../../../components/avatar'; -import RelativeTimestamp from '../../../components/relative_timestamp'; -import DisplayName from '../../../components/display_name'; import IconButton from '../../../components/icon_button'; import classNames from 'classnames'; @@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent { } render () { - const status = this.props.status && ( - <div className='status light'> - <div className='boost-modal__status-header'> - <div className='boost-modal__status-time'> - <a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> - <RelativeTimestamp timestamp={this.props.status.get('created_at')} /> - </a> - </div> - - <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'> - <div className='status__avatar'> - <Avatar account={this.props.status.get('account')} size={48} /> - </div> - - <DisplayName account={this.props.status.get('account')} /> - </a> - </div> - - <StatusContent status={this.props.status} /> - </div> - ); - return ( <div className='modal-root__modal actions-modal'> - {status} - <ul className={classNames({ 'with-status': !!status })}> {this.props.actions.map(this.renderAction)} </ul> diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js index ab87ee427..d7a6d711e 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.js +++ b/app/javascript/mastodon/features/ui/components/boost_modal.js @@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent { <div className='modal-root__modal boost-modal'> <div className='boost-modal__container'> <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}> - <div className='boost-modal__status-header'> - <div className='boost-modal__status-time'> - <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> - <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span> - <RelativeTimestamp timestamp={status.get('created_at')} /></a> - </div> + <div className='status__info'> + <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> + <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span> + <RelativeTimestamp timestamp={status.get('created_at')} /> + </a> <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> <div className='status__avatar'> |