mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-23 19:30:34 -04:00
First draft of the mute modal.
This commit is contained in:
picklesrus
parent
fbfe0003a6
commit
405ee52e50
3 changed files with 230 additions and 0 deletions
src/components/modal/mute
115
src/components/modal/mute/modal.jsx
Normal file
115
src/components/modal/mute/modal.jsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
const bindAll = require('lodash.bindall');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const Modal = require('../base/modal.jsx');
|
||||
const ModalInnerContent = require('../base/modal-inner-content.jsx');
|
||||
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 classNames = require('classnames');
|
||||
require('./modal.scss');
|
||||
|
||||
class MuteModal extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'handleNext',
|
||||
'handlePrevious'
|
||||
]);
|
||||
this.state = {
|
||||
step: 0
|
||||
};
|
||||
}
|
||||
handleNext () {
|
||||
this.setState({
|
||||
step: this.state.step + 1
|
||||
});
|
||||
}
|
||||
handlePrevious () {
|
||||
// This shouldn't get called when we're on the first step, but
|
||||
// the Math.max is here as a safeguard so state doesn't go negative.
|
||||
this.setState({
|
||||
step: Math.max(0, this.state.step - 1)
|
||||
});
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<Modal
|
||||
isOpen
|
||||
useStandardSizes
|
||||
className="modal-mute"
|
||||
showCloseButton={false}
|
||||
onRequestClose={this.props.onRequestClose}
|
||||
>
|
||||
<div className="mute-modal-header modal-header" />
|
||||
<ModalInnerContent className="mute-inner-content">
|
||||
<Progression step={this.state.step}>
|
||||
<MuteStep
|
||||
bottomImg="/images/bottom_placeholder.png"
|
||||
bottomImgClass="bottom-img"
|
||||
header="The Scratch comment filter thinks your comment was unconstructive."
|
||||
>
|
||||
<p>
|
||||
If you think something could be better, you can say something you like about the project,
|
||||
and make a suggestion about how to improve it. For example, you could say:
|
||||
</p>
|
||||
</MuteStep>
|
||||
<MuteStep
|
||||
header="For the next X minutes you won't be able to post comments"
|
||||
sideImg="/images/side_placeholder.png"
|
||||
sideImgClass="side-img"
|
||||
>
|
||||
<p>
|
||||
Once X minutes have passed, you will be able to comment again.
|
||||
</p>
|
||||
<p>
|
||||
If you would like more information, you can read the Scratch community guidelines.
|
||||
</p>
|
||||
</MuteStep>
|
||||
</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">
|
||||
Back
|
||||
</div>
|
||||
</Button>
|
||||
) : null }
|
||||
{this.state.step >= 1 ? (
|
||||
<Button
|
||||
className={classNames('close-button')}
|
||||
onClick={this.props.onRequestClose}
|
||||
>
|
||||
<div className="action-button-text">
|
||||
Close
|
||||
</div>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
className={classNames('next-button')}
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
<div className="action-button-text">
|
||||
Next
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</FlexRow>
|
||||
</ModalInnerContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MuteModal.propTypes = {
|
||||
onRequestClose: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = MuteModal;
|
||||
60
src/components/modal/mute/modal.scss
Normal file
60
src/components/modal/mute/modal.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
.modal-mute {
|
||||
width: 30rem;
|
||||
|
||||
.mute-modal-header {
|
||||
box-shadow: inset 0 -1px 0 0 $ui-mint-green;
|
||||
background-color: $ui-mint-green;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.mute-step {
|
||||
display: flex;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
.mute-content {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.mute-inner-content {
|
||||
padding: 0 32px;
|
||||
}
|
||||
.left-column {
|
||||
padding-right: 32px;
|
||||
}
|
||||
.mute-header {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.mute-bottom-row {
|
||||
padding-top: 32px;
|
||||
}
|
||||
.bottom-img {
|
||||
width: 100%;
|
||||
}
|
||||
.mute-side-image {
|
||||
margin-left: -49px;
|
||||
}
|
||||
.side-img {
|
||||
height: 212px;
|
||||
width: 129px;
|
||||
}
|
||||
.nav-divider {
|
||||
border-top: 1px solid $ui-blue-25percent;
|
||||
}
|
||||
.mute-nav {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.back-button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.next-button, .close-button {
|
||||
margin-left: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
55
src/components/modal/mute/mute-step.jsx
Normal file
55
src/components/modal/mute/mute-step.jsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
|
||||
const FlexRow = require('../../flex-row/flex-row.jsx');
|
||||
require('./modal.scss');
|
||||
|
||||
const MuteStep = ({
|
||||
bottomImg,
|
||||
bottomImgClass,
|
||||
children,
|
||||
header,
|
||||
sideImg,
|
||||
sideImgClass
|
||||
}) => (
|
||||
<div className="mute-step">
|
||||
{sideImg &&
|
||||
<FlexRow className={classNames('left-column')}>
|
||||
<div className={classNames('mute-side-image')}>
|
||||
<img
|
||||
className={sideImgClass}
|
||||
src={sideImg}
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
}
|
||||
<FlexRow className={classNames('mute-right-column')}>
|
||||
<FlexRow className={classNames('mute-header')}>
|
||||
{header}
|
||||
</FlexRow>
|
||||
<FlexRow className={classNames('mute-content')}>
|
||||
{children}
|
||||
</FlexRow>
|
||||
<FlexRow className={classNames('mute-bottom-row')}>
|
||||
{bottomImg &&
|
||||
<img
|
||||
className={bottomImgClass}
|
||||
src={bottomImg}
|
||||
/>
|
||||
}
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
MuteStep.propTypes = {
|
||||
bottomImg: PropTypes.string,
|
||||
bottomImgClass: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
header: PropTypes.string,
|
||||
sideImg: PropTypes.string,
|
||||
sideImgClass: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = MuteStep;
|
||||
Loading…
Add table
Reference in a new issue