From 7aa1ba6c42fc77cbd471f89f03342f7114e718b4 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 1 Feb 2019 17:03:43 -0500 Subject: [PATCH 1/7] use slider toggle for turning comments on and off --- src/components/forms/toggle-slider.jsx | 24 +++++++++++++ src/components/forms/toggle-slider.scss | 48 +++++++++++++++++++++++++ src/views/preview/l10n.json | 3 +- src/views/preview/presentation.jsx | 20 ++++++----- 4 files changed, 85 insertions(+), 10 deletions(-) create mode 100644 src/components/forms/toggle-slider.jsx create mode 100644 src/components/forms/toggle-slider.scss diff --git a/src/components/forms/toggle-slider.jsx b/src/components/forms/toggle-slider.jsx new file mode 100644 index 000000000..c2bafb72b --- /dev/null +++ b/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 => ( + +); + +ToggleSlider.propTypes = { + checked: PropTypes.bool, + className: PropTypes.string, + onChange: PropTypes.func +}; + +module.exports = ToggleSlider; diff --git a/src/components/forms/toggle-slider.scss b/src/components/forms/toggle-slider.scss new file mode 100644 index 000000000..2704b8141 --- /dev/null +++ b/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); +} diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index 155e77797..ffe5659c4 100644 --- a/src/views/preview/l10n.json +++ b/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.", diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index bad39785a..92f20cc42 100644 --- a/src/views/preview/presentation.jsx +++ b/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 = ({

{canToggleComments ? (
- + {projectInfo.comments_allowed ? ( + + ) : ( + + )} +
) : null} From 56d2a90bf253db69a029805d48bbd188e292e1a6 Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Fri, 1 Feb 2019 14:23:27 +0100 Subject: [PATCH 2/7] =?UTF-8?q?Wrap=20=E2=80=98need=20help=E2=80=99=20link?= =?UTF-8?q?=20when=20translation=20is=20too=20long?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactored the submit row of the login component to use Flex Row instead of `float: right` for the `need help` link. The bulk of the changes are white space, so remember to ignore whitespace for review. --- src/components/login/login.jsx | 56 +++++++++++++++++---------------- src/components/login/login.scss | 11 ++++--- 2 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx index 116d3fd9a..bd8449c3b 100644 --- a/src/components/login/login.jsx +++ b/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,34 +60,35 @@ class Login extends React.Component { name="password" type="password" /> - {this.state.waiting ? [ - + ] : [ + + ]} + - - - ] : [ - - ]} - - - + + + {error} diff --git a/src/components/login/login.scss b/src/components/login/login.scss index f6c809e88..7ddd4a317 100644 --- a/src/components/login/login.scss +++ b/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, From 292461b59116248642abbb42c6e1c4ac8cfbd11c Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Wed, 6 Feb 2019 16:22:18 +0000 Subject: [PATCH 3/7] chore(package): update dependencies --- package.json | 134 +++++++++++++++++++++++++-------------------------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 80c2405c0..214b6bf7a 100644 --- a/package.json +++ b/package.json @@ -24,96 +24,96 @@ }, "homepage": "https://github.com/llk/scratch-www#readme", "dependencies": { - "@sentry/browser": "4.4.2", - "bunyan": "1.7.1", + "@sentry/browser": "4.5.3", + "bunyan": "1.8.12", "clipboard-copy": "2.0.1", - "compression": "1.6.1", - "express": "4.16.1", - "express-http-proxy": "1.1.0", - "lodash.defaults": "4.0.1", - "newrelic": "1.25.4", + "compression": "1.7.3", + "express": "4.16.4", + "express-http-proxy": "1.5.1", + "lodash.defaults": "4.2.0", + "newrelic": "5.2.1", "react-helmet": "5.2.0", "scratch-docker": "^1.0.2", "scratch-parser": "^4.2.0", - "scratch-storage": "^0.5.1" + "scratch-storage": "^1.2.2" }, "devDependencies": { - "ajv": "6.4.0", - "async": "1.5.2", - "autoprefixer": "6.3.6", + "ajv": "6.8.1", + "async": "2.6.1", + "autoprefixer": "9.4.7", "babel-cli": "6.26.0", - "babel-core": "6.23.1", - "babel-eslint": "8.0.2", - "babel-loader": "7.1.0", + "babel-core": "6.26.3", + "babel-eslint": "10.0.1", + "babel-loader": "8.0.5", "babel-plugin-transform-object-rest-spread": "6.26.0", - "babel-preset-es2015": "6.22.0", - "babel-preset-react": "6.22.0", - "bowser": "1.9.4", + "babel-preset-es2015": "6.24.1", + "babel-preset-react": "6.24.1", + "bowser": "2.1.0", "cheerio": "1.0.0-rc.2", - "classnames": "2.2.5", - "cookie": "0.2.2", - "copy-webpack-plugin": "0.2.0", - "create-react-class": "15.6.2", - "css-loader": "0.23.1", - "eslint": "4.7.1", + "classnames": "2.2.6", + "cookie": "0.3.1", + "copy-webpack-plugin": "4.6.0", + "create-react-class": "15.6.3", + "css-loader": "2.1.0", + "eslint": "5.13.0", "eslint-config-scratch": "5.0.0", "eslint-plugin-cypress": "^2.0.1", - "eslint-plugin-json": "1.2.0", - "eslint-plugin-react": "7.4.0", - "exenv": "1.2.0", - "fastly": "1.2.1", - "file-loader": "0.8.4", - "formsy-react": "1.1.4", + "eslint-plugin-json": "1.3.2", + "eslint-plugin-react": "7.12.4", + "exenv": "1.2.2", + "fastly": "2.2.1", + "file-loader": "3.0.1", + "formsy-react": "1.1.5", "formsy-react-components": "1.0.0", "git-bundle-sha": "0.0.2", - "glob": "5.0.15", - "google-libphonenumber": "1.0.21", - "html-webpack-plugin": "2.22.0", - "iso-3166-2": "0.4.0", - "json-loader": "0.5.2", + "glob": "7.1.3", + "google-libphonenumber": "3.2.2", + "html-webpack-plugin": "3.2.0", + "iso-3166-2": "1.0.0", + "json-loader": "0.5.7", "json2po-stream": "1.0.3", "keymirror": "0.1.1", "lodash.bindall": "4.4.0", - "lodash.clone": "3.0.3", - "lodash.defaultsdeep": "3.10.0", - "lodash.isarray": "3.0.4", - "lodash.merge": "3.3.2", + "lodash.clone": "4.5.0", + "lodash.defaultsdeep": "4.6.0", + "lodash.isarray": "4.0.0", + "lodash.merge": "4.6.1", "lodash.mergewith": "4.6.1", - "lodash.omit": "3.1.0", - "lodash.range": "3.0.1", + "lodash.omit": "4.5.0", + "lodash.range": "3.2.0", "lodash.uniqby": "4.7.0", - "minilog": "2.0.8", - "node-dir": "0.1.16", - "node-sass": "4.6.1", - "pako": "0.2.8", + "minilog": "3.1.0", + "node-dir": "0.1.17", + "node-sass": "4.11.0", + "pako": "1.0.8", "po2icu": "0.0.2", - "postcss-loader": "2.0.10", - "prop-types": "15.6.0", - "react": "16.2.0", - "react-dom": "16.2.0", - "react-intl": "2.4.0", - "react-modal": "3.1.11", + "postcss-loader": "3.0.0", + "prop-types": "15.6.2", + "react": "16.8.0", + "react-dom": "16.8.0", + "react-intl": "2.8.0", + "react-modal": "3.8.1", "react-onclickoutside": "6.7.1", - "react-redux": "5.0.7", - "react-responsive": "3.0.0", - "react-slick": "0.16.0", + "react-redux": "6.0.0", + "react-responsive": "6.1.1", + "react-slick": "0.23.2", "react-string-replace": "0.4.1", - "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.20190131130145", + "react-telephone-input": "4.73.4", + "redux": "4.0.1", + "redux-thunk": "2.3.0", + "sass-loader": "7.1.0", + "scratch-gui": "0.1.0-prerelease.20190206155306", "scratch-l10n": "latest", "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master", - "slick-carousel": "1.6.0", - "source-map-support": "0.3.2", - "style-loader": "0.12.3", - "tap": "7.1.2", - "url-loader": "0.5.6", - "watch": "0.16.0", - "webpack": "2.7.0", - "webpack-dev-middleware": "2.0.4", - "xhr": "2.2.0" + "slick-carousel": "1.8.1", + "source-map-support": "0.5.10", + "style-loader": "0.23.1", + "tap": "12.5.1", + "url-loader": "1.1.2", + "watch": "1.0.2", + "webpack": "4.29.2", + "webpack-dev-middleware": "3.5.1", + "xhr": "2.5.0" }, "nyc": { "include": [ From 6d7adc9081eb9fcf6ce50ed23ac9758d7e946050 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 6 Feb 2019 14:39:37 -0500 Subject: [PATCH 4/7] Revert all updates except gui --- package.json | 132 +++++++++++++++++++++++++-------------------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 214b6bf7a..13c8a8232 100644 --- a/package.json +++ b/package.json @@ -24,96 +24,96 @@ }, "homepage": "https://github.com/llk/scratch-www#readme", "dependencies": { - "@sentry/browser": "4.5.3", - "bunyan": "1.8.12", + "@sentry/browser": "4.4.2", + "bunyan": "1.7.1", "clipboard-copy": "2.0.1", - "compression": "1.7.3", - "express": "4.16.4", - "express-http-proxy": "1.5.1", - "lodash.defaults": "4.2.0", - "newrelic": "5.2.1", + "compression": "1.6.1", + "express": "4.16.1", + "express-http-proxy": "1.1.0", + "lodash.defaults": "4.0.1", + "newrelic": "1.25.4", "react-helmet": "5.2.0", "scratch-docker": "^1.0.2", "scratch-parser": "^4.2.0", - "scratch-storage": "^1.2.2" + "scratch-storage": "^0.5.1" }, "devDependencies": { - "ajv": "6.8.1", - "async": "2.6.1", - "autoprefixer": "9.4.7", + "ajv": "6.4.0", + "async": "1.5.2", + "autoprefixer": "6.3.6", "babel-cli": "6.26.0", - "babel-core": "6.26.3", - "babel-eslint": "10.0.1", - "babel-loader": "8.0.5", + "babel-core": "6.23.1", + "babel-eslint": "8.0.2", + "babel-loader": "7.1.0", "babel-plugin-transform-object-rest-spread": "6.26.0", - "babel-preset-es2015": "6.24.1", - "babel-preset-react": "6.24.1", - "bowser": "2.1.0", + "babel-preset-es2015": "6.22.0", + "babel-preset-react": "6.22.0", + "bowser": "1.9.4", "cheerio": "1.0.0-rc.2", - "classnames": "2.2.6", - "cookie": "0.3.1", - "copy-webpack-plugin": "4.6.0", - "create-react-class": "15.6.3", - "css-loader": "2.1.0", - "eslint": "5.13.0", + "classnames": "2.2.5", + "cookie": "0.2.2", + "copy-webpack-plugin": "0.2.0", + "create-react-class": "15.6.2", + "css-loader": "0.23.1", + "eslint": "4.7.1", "eslint-config-scratch": "5.0.0", "eslint-plugin-cypress": "^2.0.1", - "eslint-plugin-json": "1.3.2", - "eslint-plugin-react": "7.12.4", - "exenv": "1.2.2", - "fastly": "2.2.1", - "file-loader": "3.0.1", - "formsy-react": "1.1.5", + "eslint-plugin-json": "1.2.0", + "eslint-plugin-react": "7.4.0", + "exenv": "1.2.0", + "fastly": "1.2.1", + "file-loader": "0.8.4", + "formsy-react": "1.1.4", "formsy-react-components": "1.0.0", "git-bundle-sha": "0.0.2", - "glob": "7.1.3", - "google-libphonenumber": "3.2.2", - "html-webpack-plugin": "3.2.0", - "iso-3166-2": "1.0.0", - "json-loader": "0.5.7", + "glob": "5.0.15", + "google-libphonenumber": "1.0.21", + "html-webpack-plugin": "2.22.0", + "iso-3166-2": "0.4.0", + "json-loader": "0.5.2", "json2po-stream": "1.0.3", "keymirror": "0.1.1", "lodash.bindall": "4.4.0", - "lodash.clone": "4.5.0", - "lodash.defaultsdeep": "4.6.0", - "lodash.isarray": "4.0.0", - "lodash.merge": "4.6.1", + "lodash.clone": "3.0.3", + "lodash.defaultsdeep": "3.10.0", + "lodash.isarray": "3.0.4", + "lodash.merge": "3.3.2", "lodash.mergewith": "4.6.1", - "lodash.omit": "4.5.0", - "lodash.range": "3.2.0", + "lodash.omit": "3.1.0", + "lodash.range": "3.0.1", "lodash.uniqby": "4.7.0", - "minilog": "3.1.0", - "node-dir": "0.1.17", - "node-sass": "4.11.0", - "pako": "1.0.8", + "minilog": "2.0.8", + "node-dir": "0.1.16", + "node-sass": "4.6.1", + "pako": "0.2.8", "po2icu": "0.0.2", - "postcss-loader": "3.0.0", - "prop-types": "15.6.2", - "react": "16.8.0", - "react-dom": "16.8.0", - "react-intl": "2.8.0", - "react-modal": "3.8.1", + "postcss-loader": "2.0.10", + "prop-types": "15.6.0", + "react": "16.2.0", + "react-dom": "16.2.0", + "react-intl": "2.4.0", + "react-modal": "3.1.11", "react-onclickoutside": "6.7.1", - "react-redux": "6.0.0", - "react-responsive": "6.1.1", - "react-slick": "0.23.2", + "react-redux": "5.0.7", + "react-responsive": "3.0.0", + "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "react-telephone-input": "4.73.4", - "redux": "4.0.1", - "redux-thunk": "2.3.0", - "sass-loader": "7.1.0", "scratch-gui": "0.1.0-prerelease.20190206155306", + "react-telephone-input": "4.3.4", + "redux": "3.5.2", + "redux-thunk": "2.0.1", + "sass-loader": "6.0.6", "scratch-l10n": "latest", "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master", - "slick-carousel": "1.8.1", - "source-map-support": "0.5.10", - "style-loader": "0.23.1", - "tap": "12.5.1", - "url-loader": "1.1.2", - "watch": "1.0.2", - "webpack": "4.29.2", - "webpack-dev-middleware": "3.5.1", - "xhr": "2.5.0" + "slick-carousel": "1.6.0", + "source-map-support": "0.3.2", + "style-loader": "0.12.3", + "tap": "7.1.2", + "url-loader": "0.5.6", + "watch": "0.16.0", + "webpack": "2.7.0", + "webpack-dev-middleware": "2.0.4", + "xhr": "2.2.0" }, "nyc": { "include": [ From 7a85771440c734f089b5bf12e035c25cc7c20841 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 7 Feb 2019 14:12:20 +0000 Subject: [PATCH 5/7] chore(package): update scratch-gui to version 0.1.0-prerelease.20190207141026 Closes #2752 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 13c8a8232..dc1c7f47d 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "react-responsive": "3.0.0", "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "scratch-gui": "0.1.0-prerelease.20190206155306", + "scratch-gui": "0.1.0-prerelease.20190207141026", "react-telephone-input": "4.3.4", "redux": "3.5.2", "redux-thunk": "2.0.1", From 134bf4ed1f35d2ab08890d1edc1152d20982d1a3 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 7 Feb 2019 14:57:33 -0500 Subject: [PATCH 6/7] Bump GUI to bring in VM and file export fixes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc1c7f47d..440f57684 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "react-responsive": "3.0.0", "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "scratch-gui": "0.1.0-prerelease.20190207141026", + "scratch-gui": "0.1.0-prerelease.20190207194935", "react-telephone-input": "4.3.4", "redux": "3.5.2", "redux-thunk": "2.0.1", From 942771f8251952046b07488e72e13413d77f2a08 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 7 Feb 2019 16:57:12 -0500 Subject: [PATCH 7/7] Update GUI to remove touching color fixes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 440f57684..7943d7eea 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "react-responsive": "3.0.0", "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "scratch-gui": "0.1.0-prerelease.20190207194935", + "scratch-gui": "0.1.0-prerelease.20190207214203", "react-telephone-input": "4.3.4", "redux": "3.5.2", "redux-thunk": "2.0.1",