diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index 4d47de189..43a12f500 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -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'; @@ -56,7 +57,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: '' }), ) ); @@ -92,7 +93,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)); @@ -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() { const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props; const verified = isVerified(account); @@ -299,9 +314,22 @@ class EditProfile extends ImmutablePureComponent { value={field.get('value')} onChange={this.handleFieldChange(i, 'value')} /> + { + this.state.fields.size > 4 && + } )) } + { + this.state.fields.size < maxFields && ( +
+
+ + +
+
+ ) + } diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 836dc844c..1c0a2cc22 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -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); }