diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index cb1a78a85..28b2066e6 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -239,7 +239,8 @@ hr { .coral-plugin-flags-popup-radio-label { margin:5px; - font-size: 1.16rem; + font-weight: 700; + font-size: .9rem; } .coral-plugin-flags-popup-counter { @@ -253,8 +254,9 @@ hr { margin-top: 10px; } -.coral-plugin-flags-other-text { +.coral-plugin-flags-reason-text { margin-left: 20px; + margin-top: 5px; width: 75%; } diff --git a/client/coral-plugin-flags/FlagBio.js b/client/coral-plugin-flags/FlagBio.js index 90cc11a7a..edc0a5286 100644 --- a/client/coral-plugin-flags/FlagBio.js +++ b/client/coral-plugin-flags/FlagBio.js @@ -18,7 +18,7 @@ const getPopupMenu = [ {val: 'other', text: lang.t('other')} ], button: lang.t('continue'), - sets: 'detail' + sets: 'reason' }; }, () => { diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index 61c87ddcf..097ac9d5b 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -10,10 +10,9 @@ class FlagButton extends Component { state = { showMenu: false, - showOther: false, itemType: '', - detail: '', - otherText: '', + reason: '', + note: '', step: 0, posted: false } @@ -30,7 +29,7 @@ class FlagButton extends Component { onPopupContinue = () => { const {postAction, addItem, updateItem, flag, id, author_id} = this.props; - const {itemType, field, detail, step, otherText, posted} = this.state; + const {itemType, field, reason, step, note, posted} = this.state; // Proceed to the next step or close the menu if we've reached the end if (step + 1 >= this.props.getPopupMenu.length) { @@ -39,11 +38,10 @@ class FlagButton extends Component { this.setState({step: step + 1}); } - // If itemType and detail are both set, post the action - if (itemType && detail && !posted) { + // If itemType and reason are both set, post the action + if (itemType && reason && !posted) { // Set the text from the "other" field if it exists. - const updatedDetail = otherText || detail; let item_id; switch(itemType) { case 'comments': @@ -55,8 +53,11 @@ class FlagButton extends Component { } const action = { action_type: 'flag', - field, - detail: updatedDetail + metadata: { + field, + reason, + note + } }; postAction(item_id, itemType, action) .then((action) => { @@ -70,11 +71,6 @@ class FlagButton extends Component { onPopupOptionClick = (sets) => (e) => { - // If the "other" option is clicked, show the other textbox - if(sets === 'detail' && e.target.value === 'other') { - this.setState({showOther: true}); - } - // If flagging a user, indicate that this is referencing the username rather than the bio if(sets === 'itemType' && e.target.value === 'user') { this.setState({field: 'username'}); @@ -92,8 +88,8 @@ class FlagButton extends Component { this.setState({[sets]: e.target.value}); } - onOtherTextChange = (e) => { - this.setState({otherText: e.target.value}); + onNoteTextChange = (e) => { + this.setState({note: e.target.value}); } handleClickOutside () { @@ -142,16 +138,16 @@ class FlagButton extends Component { ) } { - this.state.showOther &&
- -
+ this.state.reason &&
+
+