🎨 cleaner data on approval requests

This commit is contained in:
Baptiste Lemoine 2020-02-03 11:29:32 +01:00
parent 3194577ee2
commit 895295e16e
4 changed files with 92 additions and 24 deletions

View File

@ -83,12 +83,12 @@ export default class DisplayName extends React.PureComponent {
acct = `${acct}@${localDomain}`; acct = `${acct}@${localDomain}`;
} }
displayName = <bdi ><strong displayName = (<bdi ><strong
className='display-name__html' className='display-name__html'
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
/> />
</bdi >; </bdi >);
suffix = <span className='display-name__account'>@{acct}</span >; suffix = <span className='display-name__account'>@{acct}</span >;
} }

View File

@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from '../../../components/permalink'; import Permalink from '../../../components/permalink';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name'; import DisplayName from '../../../components/display_name';
import IconButton from '../../../components/icon_button';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { shortNumberFormat } from 'mastodon/utils/numbers'; import { shortNumberFormat } from 'mastodon/utils/numbers';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { NavLink } from 'react-router-dom';
const messages = defineMessages({ const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@ -36,18 +36,56 @@ class AccountAuthorize extends ImmutablePureComponent {
to={`/accounts/${account.get('id')}`} to={`/accounts/${account.get('id')}`}
className='detailed-status__display-name' className='detailed-status__display-name'
> >
<div className='account-authorize__avatar'><Avatar <div className='account-authorize__avatar'>
<Avatar
account={account} account={account}
size={48} size={100}
/></div > />
</div >
<DisplayName account={account} /> <DisplayName account={account} />
</Permalink >
{/*count posts*/} {/*count posts*/}
<strong >{shortNumberFormat(account.get('statuses_count'))}</strong > <span className='account-authorize--more-data'>
<FormattedMessage <NavLink
isActive={this.isStatusesPageActive}
activeClassName='active'
to={`/accounts/${account.get('id')}`}
title={intl.formatNumber(account.get('statuses_count'))}
>
<i className='fa fa-comment' />
<strong >{shortNumberFormat(account.get('statuses_count'))}</strong > <FormattedMessage
id='account.posts' id='account.posts'
defaultMessage='Toots' defaultMessage='Toots'
/> />
</Permalink > </NavLink >
<NavLink
exact
activeClassName='active'
to={`/accounts/${account.get('id')}/following`}
title={intl.formatNumber(account.get('following_count'))}
>
<strong >{shortNumberFormat(account.get('following_count'))}</strong > <FormattedMessage
id='account.follows'
defaultMessage='Follows'
/>
</NavLink >
<NavLink
exact
activeClassName='active'
to={`/accounts/${account.get('id')}/followers`}
title={intl.formatNumber(account.get('followers_count'))}
>
<strong >{shortNumberFormat(account.get('followers_count'))}</strong > <FormattedMessage
id='account.followers'
defaultMessage='Followers'
/>
</NavLink >
</span >
<div <div
className='account__header__content' className='account__header__content'
@ -56,19 +94,25 @@ class AccountAuthorize extends ImmutablePureComponent {
</div > </div >
<div className='account--panel'> <div className='account--panel'>
<div className='account--panel__button'> <div
<IconButton className='account--panel__button account--panel__button__allow clickable'
title={intl.formatMessage(messages.authorize)}
icon='check'
onClick={onAuthorize} onClick={onAuthorize}
/> {intl.formatMessage(messages.authorize)} >
<i
className='fa fa-check'
title={intl.formatMessage(messages.authorize)}
></i >
{intl.formatMessage(messages.authorize)}
</div > </div >
<div className='account--panel__button'> <div
<IconButton className='account--panel__button account--panel__button__reject clickable'
title={intl.formatMessage(messages.reject)}
icon='times'
onClick={onReject} onClick={onReject}
/> {intl.formatMessage(messages.reject)} >
<i
className='fa fa-times'
title={intl.formatMessage(messages.reject)}
></i >
{intl.formatMessage(messages.reject)}
</div > </div >
</div > </div >
</div > </div >

View File

@ -192,3 +192,18 @@ button {
} }
} }
.clickable {
cursor: pointer;
&:hover {
color: $ui-highlight-color;
}
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}

View File

@ -1420,10 +1420,19 @@ a .account__avatar {
padding: 14px 10px; padding: 14px 10px;
.detailed-status__display-name { .detailed-status__display-name {
display: block; display: inline-block;
margin-bottom: 15px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
} }
&--more-data {
margin-bottom: 0.5em;
a {
padding: 1em;
color: $highlight-text-color;
}
}
} }
.account-authorize__avatar { .account-authorize__avatar {
@ -2265,7 +2274,7 @@ a.account__display-name {
.columns-area__panels__pane--compositional { .columns-area__panels__pane--compositional {
display: none; display: none;
} }
.hide-on-smaller-screens{ .hide-on-smaller-screens {
display: none; display: none;
} }
} }
@ -2322,7 +2331,7 @@ a.account__display-name {
flex-direction: column; flex-direction: column;
height: calc(100% - 10px); height: calc(100% - 10px);
overflow-y: hidden; overflow-y: hidden;
z-index:1; z-index: 1;
.navigation-bar { .navigation-bar {
padding-top: 20px; padding-top: 20px;