Merge pull request #2741 from benjiwheeler/comments-toggle

use slider toggle for turning comments on and off

src/components/forms/toggle-slider.jsx

@@ -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;

src/components/forms/toggle-slider.scss

@@ -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);
+}

src/views/preview/l10n.json

@@ -10,7 +10,8 @@
     "project.videoSensingChip": "Video Sensing",
     "project.needsConnection": "Needs Connection",
     "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.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.",

src/views/preview/presentation.jsx

@@ -25,6 +25,7 @@ const Stats = require('./stats.jsx');
 const StudioList = require('./studio-list.jsx');
 const Subactions = require('./subactions.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 ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
@@ -547,15 +548,16 @@ const PreviewPresentation = ({
                                         <h4><FormattedMessage id="project.comments.header" /></h4>
                                         {canToggleComments ? (
                                             <div>
-                                                <label>
+                                                {projectInfo.comments_allowed ? (
-                                                    <input
+                                                    <FormattedMessage id="project.comments.toggleOn" />
-                                                        checked={!projectInfo.comments_allowed}
+                                                ) : (
+                                                    <FormattedMessage id="project.comments.toggleOff" />
+                                                )}
+                                                <ToggleSlider
+                                                    checked={projectInfo.comments_allowed}
                                                     className="comments-allowed-input"
-                                                        type="checkbox"
                                                     onChange={onToggleComments}
                                                 />
-                                                    <FormattedMessage id="project.comments.turnOff" />
-                                                </label>
                                             </div>
                                         ) : null}
                                     </FlexRow>