me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix regressions from change in account row design in web UI (#24343)

Browse source
This commit is contained in:
Eugen Rochko 2023-04-01 09:27:23 +02:00 committed by GitHub
parent 15f9f8962e
commit 4e63f1e64b
5 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/helpers/home_helper.rb
View file

@ -8,7 +8,7 @@ module HomeHelper
end
def account_link_to(account, button = '', path: nil)
content_tag(:div, class: 'account') do
content_tag(:div, class: 'account account--minimal') do
content_tag(:div, class: 'account__wrapper') do
section = if account.nil?
content_tag(:div, class: 'account__display-name') do

30
app/javascript/mastodon/components/account.jsx
View file

@ -1,4 +1,4 @@
import React, { Fragment } from 'react';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Avatar from './avatar';
@ -13,6 +13,7 @@ import { Link } from 'react-router-dom';
import { counterRenderer } from 'mastodon/components/common_counter';
import ShortNumber from 'mastodon/components/short_number';
import Icon from 'mastodon/components/icon';
import classNames from 'classnames';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -57,6 +58,7 @@ class Account extends ImmutablePureComponent {
onMuteNotifications: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
hidden: PropTypes.bool,
minimal: PropTypes.bool,
actionIcon: PropTypes.string,
actionTitle: PropTypes.string,
defaultAction: PropTypes.string,
@ -92,14 +94,14 @@ class Account extends ImmutablePureComponent {
};
render () {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
if (!account) {
return (
<div className='account'>
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<div className='account__display-name'>
<div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
<div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
<div>
<DisplayName />
@ -113,10 +115,10 @@ class Account extends ImmutablePureComponent {
if (hidden) {
return (
<Fragment>
<>
{account.get('display_name')}
{account.get('username')}
</Fragment>
</>
);
}
@ -144,10 +146,10 @@ class Account extends ImmutablePureComponent {
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />;
}
buttons = (
<Fragment>
<>
<IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
{hidingNotificationsButton}
</Fragment>
</>
);
} else if (defaultAction === 'mute') {
buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
@ -173,7 +175,7 @@ class Account extends ImmutablePureComponent {
}
return (
<div className='account'>
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'>
@ -182,13 +184,15 @@ class Account extends ImmutablePureComponent {
<div>
<DisplayName account={account} />
<ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
{!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
</div>
</Link>
<div className='account__relationship'>
{buttons}
</div>
{!minimal && (
<div className='account__relationship'>
{buttons}
</div>
)}
</div>
</div>
);

2
app/javascript/mastodon/components/server_banner.jsx
View file

@ -59,7 +59,7 @@ class ServerBanner extends React.PureComponent {
<div className='server-banner__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
</div>
<div className='server-banner__meta__column'>

2
app/javascript/mastodon/features/about/index.jsx
View file

@ -123,7 +123,7 @@ class About extends React.PureComponent {
<div className='about__meta__column'>
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
</div>
<hr className='about__meta__divider' />

21
app/javascript/styles/mastodon/components.scss
View file

@ -1427,15 +1427,6 @@ body > [data-popper-placement] {
padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&.compact {
padding: 0;
border-bottom: 0;
.account__avatar-wrapper {
margin-inline-start: 0;
}
}
.account__display-name {
flex: 1 1 auto;
display: flex;
@ -1455,6 +1446,18 @@ body > [data-popper-placement] {
}
}
&--minimal {
.account__display-name {
.display-name {
margin-bottom: 0;
}
.display-name strong {
display: block;
}
}
}
&__note {
white-space: nowrap;
overflow: hidden;