scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2759 from LLK/develop

Browse source 
Freeze 02 07 2019
This commit is contained in:
Paul Kaplan 2019-02-07 17:01:38 -05:00 committed by GitHub
commit d804115eb9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 121 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

24
src/components/forms/toggle-slider.jsx Normal file
View 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
View 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);
}

56
src/components/login/login.jsx
View file

@ -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 ? [
<Button
className="submit-button white"
disabled="disabled"
key="submitButton"
type="submit"
<FlexRow className="submit-row">
{this.state.waiting ? [
<Button
className="submit-button white"
disabled="disabled"
key="submitButton"
type="submit"
>
<Spinner
className="spinner"
color="blue"
/>
</Button>
] : [
<Button
className="submit-button white"
key="submitButton"
type="submit"
>
<FormattedMessage id="general.signIn" />
</Button>
]}
<a
href="/accounts/password_reset/"
key="passwordResetLink"
>
<Spinner
className="spinner"
color="blue"
/>
</Button>
] : [
<Button
className="submit-button white"
key="submitButton"
type="submit"
>
<FormattedMessage id="general.signIn" />
</Button>
]}
<a
className="right"
href="/accounts/password_reset/"
key="passwordResetLink"
>
<FormattedMessage id="login.needHelp" />
</a>
<FormattedMessage id="login.needHelp" />
</a>
</FlexRow>
{error}
</Form>
</div>

11
src/components/login/login.scss
View file

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

3
src/views/preview/l10n.json
View file

@ -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.",

20
src/views/preview/presentation.jsx
View file

@ -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>
<input
checked={!projectInfo.comments_allowed}
className="comments-allowed-input"
type="checkbox"
onChange={onToggleComments}
/>
<FormattedMessage id="project.comments.turnOff" />
</label>
{projectInfo.comments_allowed ? (
<FormattedMessage id="project.comments.toggleOn" />
) : (
<FormattedMessage id="project.comments.toggleOff" />
)}
<ToggleSlider
checked={projectInfo.comments_allowed}
className="comments-allowed-input"
onChange={onToggleComments}
/>
</div>
) : null}
</FlexRow>