Merge pull request #2759 from LLK/develop

Freeze 02 07 2019

package.json

@@ -98,11 +98,11 @@
     "react-responsive": "3.0.0",
     "react-slick": "0.16.0",
     "react-string-replace": "0.4.1",
+    "scratch-gui": "0.1.0-prerelease.20190207214203",
     "react-telephone-input": "4.3.4",
     "redux": "3.5.2",
     "redux-thunk": "2.0.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20190204170342",
     "scratch-l10n": "latest",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.6.0",

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/components/login/login.jsx

@@ -7,6 +7,7 @@ const Form = require('../forms/form.jsx');
 const Input = require('../forms/input.jsx');
 const Button = require('../forms/button.jsx');
 const Spinner = require('../spinner/spinner.jsx');
+const FlexRow = require('../flex-row/flex-row.jsx');
 
 require('./login.scss');
 
@@ -59,6 +60,7 @@ class Login extends React.Component {
                         name="password"
                         type="password"
                     />
+                    <FlexRow className="submit-row">
                         {this.state.waiting ? [
                             <Button
                                 className="submit-button white"
@@ -81,12 +83,12 @@ class Login extends React.Component {
                             </Button>
                         ]}
                         <a
-                        className="right"
                             href="/accounts/password_reset/"
                             key="passwordResetLink"
                         >
                             <FormattedMessage id="login.needHelp" />
                         </a>
+                    </FlexRow>
                     {error}
                 </Form>
             </div>

src/components/login/login.scss

@@ -28,22 +28,23 @@
         font-weight: bold;
     }
 
-    .right {
-        float: right;
-    }
-
     .spinner {
         margin: 0 .8rem;
         width: 1rem;
         vertical-align: middle;
     }
     
+    .submit-row {
+        justify-content: space-between;
+        flex-direction: row; // override 'column' layout at small widths
+    }
+
     .submit-button {
         margin-top: 5px;
     }
 
     a {
-        margin-top: 15px;
+        margin: auto 0;
         color: $ui-white;
 
         &:link,

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>