From c3187411c26aa00eb5844e4a7f9889f2cb19867e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 7 Jul 2020 01:24:03 +0200 Subject: [PATCH] Change design of account notes in web UI (#14208) * Change design of account notes in web UI * Fix `for` -> `htmlFor` --- .../mastodon/actions/account_notes.js | 36 +-- .../account/components/account_note.js | 209 ++++++++++++------ .../features/account/components/header.js | 11 +- .../containers/account_note_container.js | 29 +-- .../containers/header_container.js | 5 - .../mastodon/locales/defaultMessages.json | 20 +- app/javascript/mastodon/locales/en.json | 9 +- .../mastodon/reducers/account_notes.js | 44 ---- app/javascript/mastodon/reducers/index.js | 2 - .../styles/mastodon/components.scss | 76 +++---- .../rest/relationship_serializer.rb | 2 +- 11 files changed, 195 insertions(+), 248 deletions(-) delete mode 100644 app/javascript/mastodon/reducers/account_notes.js diff --git a/app/javascript/mastodon/actions/account_notes.js b/app/javascript/mastodon/actions/account_notes.js index 059ed9e803..d174410002 100644 --- a/app/javascript/mastodon/actions/account_notes.js +++ b/app/javascript/mastodon/actions/account_notes.js @@ -4,19 +4,12 @@ export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST'; export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS'; export const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL'; -export const ACCOUNT_NOTE_INIT_EDIT = 'ACCOUNT_NOTE_INIT_EDIT'; -export const ACCOUNT_NOTE_CANCEL = 'ACCOUNT_NOTE_CANCEL'; - -export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT'; - -export function submitAccountNote() { +export function submitAccountNote(id, value) { return (dispatch, getState) => { dispatch(submitAccountNoteRequest()); - const id = getState().getIn(['account_notes', 'edit', 'account_id']); - api(getState).post(`/api/v1/accounts/${id}/note`, { - comment: getState().getIn(['account_notes', 'edit', 'comment']), + comment: value, }).then(response => { dispatch(submitAccountNoteSuccess(response.data)); }).catch(error => dispatch(submitAccountNoteFail(error))); @@ -42,28 +35,3 @@ export function submitAccountNoteFail(error) { error, }; }; - -export function initEditAccountNote(account) { - return (dispatch, getState) => { - const comment = getState().getIn(['relationships', account.get('id'), 'note']); - - dispatch({ - type: ACCOUNT_NOTE_INIT_EDIT, - account, - comment, - }); - }; -}; - -export function cancelAccountNote() { - return { - type: ACCOUNT_NOTE_CANCEL, - }; -}; - -export function changeAccountNoteComment(comment) { - return { - type: ACCOUNT_NOTE_CHANGE_COMMENT, - comment, - }; -}; diff --git a/app/javascript/mastodon/features/account/components/account_note.js b/app/javascript/mastodon/features/account/components/account_note.js index 832a96a6ae..1787ce1abc 100644 --- a/app/javascript/mastodon/features/account/components/account_note.js +++ b/app/javascript/mastodon/features/account/components/account_note.js @@ -3,99 +3,166 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import Icon from 'mastodon/components/icon'; import Textarea from 'react-textarea-autosize'; +import { is } from 'immutable'; const messages = defineMessages({ - placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' }, + placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' }, }); -export default @injectIntl -class Header extends ImmutablePureComponent { +class InlineAlert extends React.PureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, - isEditing: PropTypes.bool, - isSubmitting: PropTypes.bool, - accountNote: PropTypes.string, - onEditAccountNote: PropTypes.func.isRequired, - onCancelAccountNote: PropTypes.func.isRequired, - onSaveAccountNote: PropTypes.func.isRequired, - onChangeAccountNote: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + show: PropTypes.bool, }; - handleChangeAccountNote = (e) => { - this.props.onChangeAccountNote(e.target.value); + state = { + mountMessage: false, }; - componentWillUnmount () { - if (this.props.isEditing) { - this.props.onCancelAccountNote(); - } - } + static TRANSITION_DELAY = 200; - handleKeyDown = e => { - if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { - this.props.onSaveAccountNote(); - } else if (e.keyCode === 27) { - this.props.onCancelAccountNote(); + componentWillReceiveProps (nextProps) { + if (!this.props.show && nextProps.show) { + this.setState({ mountMessage: true }); + } else if (this.props.show && !nextProps.show) { + setTimeout(() => this.setState({ mountMessage: false }), InlineAlert.TRANSITION_DELAY); } } render () { - const { account, accountNote, isEditing, isSubmitting, intl } = this.props; + const { show } = this.props; + const { mountMessage } = this.state; - if (!account || (!accountNote && !isEditing)) { + return ( + + {mountMessage && } + + ); + } + +} + +export default @injectIntl +class AccountNote extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + value: PropTypes.string, + onSave: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + value: null, + saving: false, + saved: false, + }; + + componentWillMount () { + this._reset(); + } + + componentWillReceiveProps (nextProps) { + const accountWillChange = !is(this.props.account, nextProps.account); + const newState = {}; + + if (accountWillChange && this._isDirty()) { + this._save(false); + } + + if (accountWillChange || nextProps.value === this.state.value) { + newState.saving = false; + } + + if (this.props.value !== nextProps.value) { + newState.value = nextProps.value; + } + + this.setState(newState); + } + + componentWillUnmount () { + if (this._isDirty()) { + this._save(false); + } + } + + setTextareaRef = c => { + this.textarea = c; + } + + handleChange = e => { + this.setState({ value: e.target.value, saving: false }); + }; + + handleKeyDown = e => { + if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { + e.preventDefault(); + + this._save(); + + if (this.textarea) { + this.textarea.blur(); + } + } else if (e.keyCode === 27) { + e.preventDefault(); + + this._reset(() => { + if (this.textarea) { + this.textarea.blur(); + } + }); + } + } + + handleBlur = () => { + if (this._isDirty()) { + this._save(); + } + } + + _save (showMessage = true) { + this.setState({ saving: true }, () => this.props.onSave(this.state.value)); + + if (showMessage) { + this.setState({ saved: true }, () => setTimeout(() => this.setState({ saved: false }), 2000)); + } + } + + _reset (callback) { + this.setState({ value: this.props.value }, callback); + } + + _isDirty () { + return !this.state.saving && this.props.value !== null && this.state.value !== null && this.state.value !== this.props.value; + } + + render () { + const { account, intl } = this.props; + const { value, saved } = this.state; + + if (!account) { return null; } - let action_buttons = null; - if (isEditing) { - action_buttons = ( -
- -
- -
- ); - } - - let note_container = null; - if (isEditing) { - note_container = ( -