Skip to content

GitLab

S
scratch-www
Commit 037f91e7 authored by seotts's avatar seotts
Browse files
Options

Revert "Revert "Add feedback step using a Formsy textarea"" 

This reverts commit 1bc3aaf0.
parent 4a7b8172
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 37 deletions
src/components/modal/mute/modal.jsx
View file @ 037f91e7
......@@ -10,22 +10,38 @@ const Button = require('../../forms/button.jsx');
const Progression = require('../../progression/progression.jsx');
const FlexRow = require('../../flex-row/flex-row.jsx');
const MuteStep = require('./mute-step.jsx');
const Formsy = require('formsy-react').default;
const InplaceInput = require('../../../components/forms/inplace-input.jsx');
const classNames = require('classnames');
require('./modal.scss');
const steps = {
COMMENT_ISSUE: 0,
MUTE_INFO: 1,
BAN_WARNING: 2,
USER_FEEDBACK: 3,
FEEDBACK_SENT: 4
};
const onUpdate = update => update;
class MuteModal extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleNext',
'handlePrevious'
'handlePrevious',
'handleGoToFeedback',
'handleFeedbackInput',
'handleFeedbackSubmit'
]);
this.numSteps = 2;
if (this.props.showWarning) {
this.numSteps++;
}
this.state = {
step: 0
step: 0,
feedback: ''
};
}
handleNext () {
......@@ -40,7 +56,28 @@ class MuteModal extends React.Component {
step: Math.max(0, this.state.step - 1)
});
}
handleGoToFeedback () {
this.setState({
step: steps.USER_FEEDBACK
});
}
handleFeedbackSubmit () {
console.log(this.state.feedback);
this.setState({
step: steps.FEEDBACK_SENT
});
}
handleFeedbackInput (event) {
this.setState({
feedback: event.target.value,
});
}
render () {
const finalStep = this.showWarning ? steps.BAN_WARNING : steps.MUTE_INFO;
return (
<Modal
isOpen
......@@ -85,46 +122,83 @@ class MuteModal extends React.Component {
)}}
/>
</p>
<p>
<FormattedMessage
id="comments.muted.mistake"
values={{feedbackLink: (
<a onClick={this.handleGoToFeedback}>
<FormattedMessage id="comments.muted.feedbackLinkText" />
</a>
)}}
/>
</p>
</MuteStep>
<MuteStep
bottomImg="/svgs/commenting/warning.svg"
bottomImgClass="bottom-img"
header={this.props.intl.formatMessage({id: 'comments.muted.warningBlocked'})}
>
<p>
<FormattedMessage
id="comments.muted.warningCareful"
values={{CommunityGuidelinesLink: (
<a href="/community_guidelines">
<FormattedMessage id="report.CommunityGuidelinesLinkText" />
</a>
)}}
/>
</p>
</MuteStep>
<MuteStep
header={this.props.intl.formatMessage({id: 'comments.muted.mistakeHeader'})}
>
<p className="feedback-text">
<FormattedMessage id="comments.muted.mistakeInstructions" />
</p>
<Formsy className="full-width-form">
<InplaceInput
className={classNames('compose-feedback',
this.state.feedback.length > 0 ?
'compose-valid' : 'compose-invalid')}
handleUpdate={onUpdate}
name="compose-feedback"
rows="5"
type="textarea"
value={this.state.feedback}
onInput={this.handleFeedbackInput}
/>
</Formsy>
<div className="character-limit">
<FormattedMessage id="comments.muted.characterLimit" />
</div>
</MuteStep>
<MuteStep
header={this.props.intl.formatMessage({id: 'comments.muted.thanksFeedback'})}
sideImg="/svgs/commenting/thank_you_envelope.svg"
sideImgClass="side-img"
>
<p>
<FormattedMessage id="comments.muted.thanksInfo" />
</p>
</MuteStep>
{this.props.showWarning ? (
<MuteStep
bottomImg="/svgs/commenting/warning.svg"
bottomImgClass="bottom-img"
header={this.props.intl.formatMessage({id: 'comments.muted.warningBlocked'})}
>
<p>
<FormattedMessage
id="comments.muted.warningCareful"
values={{CommunityGuidelinesLink: (
<a href="/community_guidelines">
<FormattedMessage id="report.CommunityGuidelinesLinkText" />
</a>
)}}
/>
</p>
</MuteStep>) : null}
</Progression>
<FlexRow className={classNames('nav-divider')} />
<FlexRow className={classNames('mute-nav')}>
{this.state.step > 0 ? (
<Button
className={classNames(
'back-button',
)}
onClick={this.handlePrevious}
>
<div className="action-button-text">
<FormattedMessage id="general.back" />
</div>
</Button>
) : null }
{this.state.step >= this.numSteps - 1 ? (
<FlexRow
className={classNames(
this.state.step === steps.USER_FEEDBACK ? 'feedback-nav' : 'mute-nav'
)}
>
{this.state.step >= finalStep ? (
<Button
className={classNames('close-button')}
onClick={this.props.onRequestClose}
>
<div className="action-button-text">
<FormattedMessage id="general.close" />
{this.state.step === steps.USER_FEEDBACK ? (
<FormattedMessage id="general.cancel" />
) : (
<FormattedMessage id="general.close" />
)}
</div>
</Button>
) : (
......@@ -137,6 +211,30 @@ class MuteModal extends React.Component {
</div>
</Button>
)}
{this.state.step > 0 && this.state.step < steps.USER_FEEDBACK ? (
<Button
className={classNames(
'back-button',
)}
onClick={this.handlePrevious}
>
<div className="action-button-text">
<FormattedMessage id="general.back" />
</div>
</Button>
) : this.state.step === steps.USER_FEEDBACK ? (
<Button
className={classNames(
'send-button',
)}
onClick={this.handleFeedbackSubmit}
>
<div className="action-button-text">
<FormattedMessage id="general.send" />
</div>
</Button>
) : null}
</FlexRow>
</ModalInnerContent>
</Modal>
......
src/components/modal/mute/modal.scss
View file @ 037f91e7
......@@ -46,17 +46,55 @@
border-top: 1px solid $ui-blue-25percent;
}
.mute-nav {
display:flex;
display: flex;
justify-content: space-between;
padding: 20px 0;
flex-direction: row-reverse;
}
.feedback-nav {
width: 100%;
display: flex;
justify-content: center;
flex-direction: row-reverse;
padding: 24px;
button {
// min-width: 100px;
margin: 0 4px;
}
// .action-button-text {
// span {
// text-align: center;
// }
// }
.close-button {
background-color: $ui-dark-gray;
}
}
.back-button {
margin-top: 0;
margin-bottom: 0;
}
.next-button, .close-button {
margin-left: auto;
// margin-left: auto;
margin-top: 0;
margin-bottom: 0;
}
.feedback-text {
text-align: center;
}
.full-width-form {
height: 180px;
width: 100%;
}
.character-limit {
font-size: .75rem;
}
}
src/l10n.json
View file @ 037f91e7
......@@ -7,6 +7,7 @@
"general.birthMonth": "Birth Month",
"general.birthYear": "Birth Year",
"general.donate": "Donate",
"general.cancel": "Cancel",
"general.close": "Close",
"general.collaborators": "Collaborators",
"general.community": "Community",
......@@ -82,6 +83,7 @@
"general.scratchStore": "Scratch Store",
"general.search": "Search",
"general.searchEmpty": "Nothing found",
"general.send": "Send",
"general.signIn": "Sign in",
"general.startOver": "Start over",
"general.statistics": "Statistics",
......@@ -356,7 +358,13 @@
"comments.muted.clickHereLinkText": "click here",
"comments.muted.warningBlocked": "If you continue to post comments like this, it will cause you to be blocked from using Scratch",
"comments.muted.warningCareful": "We don't want that to happen, so please be careful and make sure you have read and understand the {CommunityGuidelinesLink} before you try to post again!",
"comments.muted.mistake": "Think this was a mistake? {feedbackLink}.",
"comments.muted.feedbackLinkText": "Let us know",
"comments.muted.mistakeHeader": "Think this was a mistake?",
"comments.muted.mistakeInstructions": "Sometimes the filter catches things by accident. Your feedback will help prevent this from happening in the future.",
"comments.muted.thanksFeedback": "Thanks for letting us know!",
"comments.muted.thanksInfo": "Your feedback will help us make Scratch better.",
"comments.muted.characterLimit": "500 characters max",
"social.embedLabel": "Embed",
"social.copyEmbedLinkText": "Copy embed",
......
static/svgs/commenting/thank_you_envelope.svg 0 → 100644
View file @ 037f91e7
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 132 200" style="enable-background:new 0 0 132 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{opacity:0.25;fill:#FF8C1A;}
.st2{fill:#FF8C1A;}
.st3{opacity:0.25;fill:#0EB989;}
.st4{fill:#FFC709;}
.st5{fill:none;stroke:#5C6671;stroke-linecap:round;stroke-miterlimit:10;}
.st6{fill:#5C6671;}
.st7{opacity:0.5;fill:#6E7B8A;}
.st8{fill-rule:evenodd;clip-rule:evenodd;fill:#ED5F87;}
.st9{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#0EB989;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#0EBD8C;fill-opacity:0.1;}
.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#575E75;fill-opacity:0.25;}
.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#0EBD8C;fill-opacity:0.25;}
.st14{fill:#FFBF00;}
.st15{fill:#2F9B73;}
.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#CF8B17;}
.st17{fill-rule:evenodd;clip-rule:evenodd;fill:#5C6771;}
.st18{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#0FBD8C;}
.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#FFBF00;}
.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#36A97E;}
.st21{opacity:0.6;fill-rule:evenodd;clip-rule:evenodd;fill:#0FBD8C;}
.st22{fill:#9966FF;}
.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#575E75;}
.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#C2C5C6;}
.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#EEF3F8;}
.st26{fill:#575E75;}
.st27{opacity:0.3;fill:#575E75;}
.st28{fill:#EEF3F8;}
.st29{fill:#B5875C;}
.st30{fill:#CCAA93;}
.st31{fill:#5C6671;stroke:#FFBF00;stroke-width:0.5465;stroke-miterlimit:10;}
.st32{opacity:0.8;fill:#FFFFFF;}
.st33{fill:#DCDDDE;}
.st34{fill:none;stroke:#DCDDDE;stroke-width:2.0722;stroke-miterlimit:10;}
.st35{clip-path:url(#SVGID_2_);}
.st36{opacity:0.6;}
.st37{fill:#3CB98A;}
.st38{fill:#3CB98A;stroke:#2F9B73;stroke-miterlimit:10;}
.st39{fill-rule:evenodd;clip-rule:evenodd;fill:#DCDDDE;}
.st40{clip-path:url(#SVGID_4_);}
</style>
<g id="Layer_2">
</g>
<g id="Layer_1">
<g>
<defs>
<rect id="SVGID_3_" width="132" height="200"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<g class="st35">
<path class="st9" d="M-0.3,191.7c-63-3.3-56-14.6-59.5-91.5c-2.9-64.7,28.6-96,90.2-96c76.8,0,98.5,30.4,96.3,95.3
C124.3,168.5,47.3,194.2-0.3,191.7z"/>
<path class="st8" d="M104,69.8c0.5,6.9-6.5,13.5-8.4,13.8c-2,0.3-10.5-3.9-12.2-10.6c-0.1-0.2-0.1-0.4-0.1-0.7
c-0.5-3.3,1.8-6.4,5.1-6.9c1.7-0.3,3.3,0.2,4.6,1.2c0.9-1.3,2.3-2.2,4-2.5c3.3-0.5,6.5,1.8,7,5.1C104,69.3,104,69.6,104,69.8z"/>
<path class="st32" d="M14.7,35.6c1.8-0.5,3.3-1.9,3.8-3.8l1.1-4.2c0.5-2,3.3-2,3.9,0l1.1,4.2c0.5,1.8,1.9,3.3,3.8,3.8l4.2,1.1
c2,0.5,2,3.3,0,3.9l-4.2,1.1c-1.8,0.5-3.3,1.9-3.8,3.8l-1.1,4.2c-0.5,2-3.3,2-3.9,0l-1.1-4.2c-0.5-1.8-1.9-3.3-3.8-3.8l-4.2-1.1
c-2-0.5-2-3.3,0-3.9L14.7,35.6z"/>
<path class="st32" d="M74.2,142c1.2-0.3,2.1-1.2,2.4-2.4l0.7-2.7c0.3-1.3,2.1-1.3,2.5,0l0.7,2.7c0.3,1.2,1.2,2.1,2.4,2.4l2.7,0.7
c1.3,0.3,1.3,2.1,0,2.5l-2.7,0.7c-1.2,0.3-2.1,1.2-2.4,2.4l-0.7,2.7c-0.3,1.3-2.1,1.3-2.5,0l-0.7-2.7c-0.3-1.2-1.2-2.1-2.4-2.4
l-2.7-0.7c-1.3-0.3-1.3-2.1,0-2.5L74.2,142z"/>
<g>
<path class="st33" d="M-16.1,82.2l81.8-20.5c2.3-0.6,4.6,0.8,5.1,3.1l13.9,55.5c0.6,2.3-0.8,4.6-3.1,5.1l-81.8,20.5
c-2.3,0.6-4.6-0.8-5.1-3.1l-13.9-55.5C-19.8,85-18.4,82.7-16.1,82.2z"/>
<path class="st0" d="M-17.4,77l81.8-20.5c2.3-0.6,4.6,0.8,5.1,3.1l13.9,55.5c0.6,2.3-0.8,4.6-3.1,5.1l-81.8,20.5
c-2.3,0.6-4.6-0.8-5.1-3.1l-13.9-55.5C-21,79.9-19.7,77.6-17.4,77z"/>
<path class="st34" d="M80.4,120.3L32.2,91.8c-1.8-1-4-0.4-5.1,1.3l-28.9,47.7L80.4,120.3z"/>
<path class="st0" d="M64.5,56.6L-17.4,77c-1.1,0.3-2,1-2.6,1.9l50.4,25.9c1.9,0.8,4.2,0.3,5.4-1.4l31.9-46.3
C66.7,56.5,65.6,56.3,64.5,56.6z"/>
<path class="st33" d="M67.7,57.1l-31.8,46.4c-1.3,1.7-3.5,2.3-5.4,1.4L-19.9,79c-0.6,0.9-0.8,2-0.5,3l51.9,28.8
c2.1,0.9,4.5,0.3,5.9-1.5l32.3-49.6C69.3,58.6,68.7,57.7,67.7,57.1z"/>
</g>
</g>
</g>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment