Merge branch 'custom-fields-count' into 'develop'

Only show 4 profile metadata items by default

See merge request soapbox-pub/soapbox-fe!562
actually-fix-tabs-bar
Alex Gleason 2021-06-30 16:10:59 +00:00
commit f692d3a987
2 zmienionych plików z 36 dodań i 3 usunięć

Wyświetl plik

@ -21,6 +21,7 @@ import {
} from 'immutable';
import { patchMe } from 'soapbox/actions/me';
import { updateNotificationSettings } from 'soapbox/actions/accounts';
import Icon from 'soapbox/components/icon';
import { unescape } from 'lodash';
import { isVerified } from 'soapbox/utils/accounts';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
@ -57,7 +58,7 @@ const mapStateToProps = state => {
// Forces fields to be maxFields size, filling empty values
const normalizeFields = (fields, maxFields) => (
ImmutableList(fields).setSize(maxFields).map(field =>
ImmutableList(fields).setSize(Math.max(fields.size, maxFields)).map(field =>
field ? field : ImmutableMap({ name: '', value: '' }),
)
);
@ -93,7 +94,7 @@ class EditProfile extends ImmutablePureComponent {
const initialState = account.withMutations(map => {
map.merge(map.get('source'));
map.delete('source');
map.set('fields', normalizeFields(map.get('fields'), props.maxFields));
map.set('fields', normalizeFields(map.get('fields'), Math.min(props.maxFields, 4)));
map.set('stranger_notifications', strangerNotifications);
map.set('accepts_email_list', acceptsEmailList);
map.set('hide_network', hidesNetwork(account));
@ -197,6 +198,20 @@ class EditProfile extends ImmutablePureComponent {
});
}
handleAddField = () => {
this.setState({
fields: this.state.fields.push(ImmutableMap({ name: '', value: '' })),
});
}
handleDeleteField = i => {
return () => {
this.setState({
fields: normalizeFields(this.state.fields.delete(i), Math.min(this.props.maxFields, 4)),
});
};
}
render() {
const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props;
const verified = isVerified(account);
@ -300,9 +315,22 @@ class EditProfile extends ImmutablePureComponent {
value={field.get('value')}
onChange={this.handleFieldChange(i, 'value')}
/>
{
this.state.fields.size > 4 && <Icon id='times-circle' onClick={this.handleDeleteField(i)} />
}
</div>
))
}
{
this.state.fields.size < maxFields && (
<div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddField}>
<Icon id='plus-circle' />
<FormattedMessage id='edit_profile.meta_fields.add' defaultMessage='Add new item' />
</div>
</div>
)
}
</div>
</div>
</FieldsGroup>

Wyświetl plik

@ -730,9 +730,14 @@ code {
.input .row > .fa-times-circle {
position: absolute;
right: 7px;
right: 15px;
cursor: pointer;
color: $error-red;
transform: translateY(-9px);
}
.input .row > .input.with_label + .fa-times-circle {
right: 7px;
transform: translateY(9px);
}