mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Merge pull request #2741 from benjiwheeler/comments-toggle
use slider toggle for turning comments on and off
This commit is contained in:
commit
6cb78a260b
4 changed files with 85 additions and 10 deletions
24
src/components/forms/toggle-slider.jsx
Normal file
24
src/components/forms/toggle-slider.jsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
const classNames = require('classnames');
|
||||||
|
const PropTypes = require('prop-types');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
require('./toggle-slider.scss');
|
||||||
|
|
||||||
|
const ToggleSlider = props => (
|
||||||
|
<label className={classNames('toggle-switch', props.className)} >
|
||||||
|
<input
|
||||||
|
checked={props.checked}
|
||||||
|
type="checkbox"
|
||||||
|
onChange={props.onChange}
|
||||||
|
/>
|
||||||
|
<span className="slider" />
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
|
||||||
|
ToggleSlider.propTypes = {
|
||||||
|
checked: PropTypes.bool,
|
||||||
|
className: PropTypes.string,
|
||||||
|
onChange: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = ToggleSlider;
|
48
src/components/forms/toggle-slider.scss
Normal file
48
src/components/forms/toggle-slider.scss
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
@import "../../colors";
|
||||||
|
|
||||||
|
.toggle-switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 38px;
|
||||||
|
height: 24px;
|
||||||
|
top: -.125rem;
|
||||||
|
margin-left: .625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch .slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: $ui-dark-gray;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch .slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: $ui-white;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch input:checked + .slider {
|
||||||
|
background-color: $ui-aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch input:checked + .slider:before {
|
||||||
|
transform: translateX(14px);
|
||||||
|
}
|
|
@ -10,7 +10,8 @@
|
||||||
"project.videoSensingChip": "Video Sensing",
|
"project.videoSensingChip": "Video Sensing",
|
||||||
"project.needsConnection": "Needs Connection",
|
"project.needsConnection": "Needs Connection",
|
||||||
"project.comments.header": "Comments",
|
"project.comments.header": "Comments",
|
||||||
"project.comments.turnOff": "Turn off commenting",
|
"project.comments.toggleOff": "Commenting off",
|
||||||
|
"project.comments.toggleOn": "Commenting on",
|
||||||
"project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
|
"project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
|
||||||
"project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
|
"project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
|
||||||
"project.share.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
|
"project.share.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
|
||||||
|
|
|
@ -25,6 +25,7 @@ const Stats = require('./stats.jsx');
|
||||||
const StudioList = require('./studio-list.jsx');
|
const StudioList = require('./studio-list.jsx');
|
||||||
const Subactions = require('./subactions.jsx');
|
const Subactions = require('./subactions.jsx');
|
||||||
const InplaceInput = require('../../components/forms/inplace-input.jsx');
|
const InplaceInput = require('../../components/forms/inplace-input.jsx');
|
||||||
|
const ToggleSlider = require('../../components/forms/toggle-slider.jsx');
|
||||||
const TopLevelComment = require('./comment/top-level-comment.jsx');
|
const TopLevelComment = require('./comment/top-level-comment.jsx');
|
||||||
const ComposeComment = require('./comment/compose-comment.jsx');
|
const ComposeComment = require('./comment/compose-comment.jsx');
|
||||||
const ExtensionChip = require('./extension-chip.jsx');
|
const ExtensionChip = require('./extension-chip.jsx');
|
||||||
|
@ -547,15 +548,16 @@ const PreviewPresentation = ({
|
||||||
<h4><FormattedMessage id="project.comments.header" /></h4>
|
<h4><FormattedMessage id="project.comments.header" /></h4>
|
||||||
{canToggleComments ? (
|
{canToggleComments ? (
|
||||||
<div>
|
<div>
|
||||||
<label>
|
{projectInfo.comments_allowed ? (
|
||||||
<input
|
<FormattedMessage id="project.comments.toggleOn" />
|
||||||
checked={!projectInfo.comments_allowed}
|
) : (
|
||||||
className="comments-allowed-input"
|
<FormattedMessage id="project.comments.toggleOff" />
|
||||||
type="checkbox"
|
)}
|
||||||
onChange={onToggleComments}
|
<ToggleSlider
|
||||||
/>
|
checked={projectInfo.comments_allowed}
|
||||||
<FormattedMessage id="project.comments.turnOff" />
|
className="comments-allowed-input"
|
||||||
</label>
|
onChange={onToggleComments}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
|
|
Loading…
Reference in a new issue