Only show 4 profile metadata items by default

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
actually-fix-tabs-bar
marcin mikołajczak 2021-06-30 16:15:44 +02:00
rodzic 58f3107151
commit 149d8a909f
2 zmienionych plików z 36 dodań i 3 usunięć

Wyświetl plik

@ -21,6 +21,7 @@ import {
} from 'immutable'; } from 'immutable';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { updateNotificationSettings } from 'soapbox/actions/accounts'; import { updateNotificationSettings } from 'soapbox/actions/accounts';
import Icon from 'soapbox/components/icon';
import { unescape } from 'lodash'; import { unescape } from 'lodash';
import { isVerified } from 'soapbox/utils/accounts'; import { isVerified } from 'soapbox/utils/accounts';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
@ -56,7 +57,7 @@ const mapStateToProps = state => {
// Forces fields to be maxFields size, filling empty values // Forces fields to be maxFields size, filling empty values
const normalizeFields = (fields, maxFields) => ( 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: '' }), field ? field : ImmutableMap({ name: '', value: '' }),
) )
); );
@ -92,7 +93,7 @@ class EditProfile extends ImmutablePureComponent {
const initialState = account.withMutations(map => { const initialState = account.withMutations(map => {
map.merge(map.get('source')); map.merge(map.get('source'));
map.delete('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('stranger_notifications', strangerNotifications);
map.set('accepts_email_list', acceptsEmailList); map.set('accepts_email_list', acceptsEmailList);
map.set('hide_network', hidesNetwork(account)); map.set('hide_network', hidesNetwork(account));
@ -196,6 +197,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() { render() {
const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props; const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props;
const verified = isVerified(account); const verified = isVerified(account);
@ -299,9 +314,22 @@ class EditProfile extends ImmutablePureComponent {
value={field.get('value')} value={field.get('value')}
onChange={this.handleFieldChange(i, 'value')} onChange={this.handleFieldChange(i, 'value')}
/> />
{
this.state.fields.size > 4 && <Icon id='times-circle' onClick={this.handleDeleteField(i)} />
}
</div> </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>
</div> </div>
</FieldsGroup> </FieldsGroup>

Wyświetl plik

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