Skip to content

Commit 9fc6d85

Browse files
kchadhakchadha
authored
Merge branch 'develop' into editor-cloud-disconnect
2 parents 143dd5e + c27a328 commit 9fc6d85

File tree

70 files changed

+918
-360
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+918
-360
lines changed

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,12 @@
102102
"rimraf": "^2.6.1",
103103
"scratch-audio": "0.1.0-prerelease.20181023202904",
104104
"scratch-blocks": "0.1.0-prerelease.1542722191",
105-
"scratch-l10n": "3.0.20181115134359",
106-
"scratch-paint": "0.2.0-prerelease.20181120191526",
107-
"scratch-render": "0.1.0-prerelease.20181126213837",
105+
"scratch-l10n": "3.0.20181121224721",
106+
"scratch-paint": "0.2.0-prerelease.20181128182047",
107+
"scratch-render": "0.1.0-prerelease.20181127194508",
108108
"scratch-storage": "1.2.0",
109109
"scratch-svg-renderer": "0.2.0-prerelease.20181126212715",
110-
"scratch-vm": "0.2.0-prerelease.20181121182825",
110+
"scratch-vm": "0.2.0-prerelease.20181128224414",
111111
"selenium-webdriver": "3.6.0",
112112
"startaudiocontext": "1.2.1",
113113
"style-loader": "^0.23.0",

‎src/components/action-menu/action-menu.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ class ActionMenu extends React.Component {
7878
return event => {
7979
ReactTooltip.hide();
8080
if (fn) fn(event);
81+
// Blur the button so it does not keep focus after being clicked
82+
// This prevents keyboard events from triggering the button
83+
this.buttonRef.blur();
8184
this.setState({forceHide: true, isOpen: false}, () => {
8285
setTimeout(() => this.setState({forceHide: false}));
8386
});

‎src/components/alerts/alert.css‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
display: flex;
88
flex-direction: row;
99
overflow: hidden;
10-
align-items: left;
10+
justify-content: space-between;
1111
border-radius: $space;
1212
padding: $space;
1313
margin-bottom: 7px;
@@ -37,13 +37,17 @@
3737
font-weight: bold;
3838
font-size: .75rem;
3939
line-height: 14px;
40-
width: 100%;
4140
display: flex;
4241
align-items: center;
4342
padding-left: .5rem;
4443
padding-right: .5rem;
4544
}
4645

46+
.alert-buttons {
47+
display: flex;
48+
flex-direction: row;
49+
}
50+
4751
.alert-close-button {
4852
outline-style:none;
4953
}
@@ -55,7 +59,7 @@
5559
align-self: center;
5660
}
5761

58-
.connection-button {
62+
.alert-connection-button {
5963
min-height: 2rem;
6064
padding: 0.55rem 0.9rem;
6165
border-radius: 0.35rem;
@@ -68,6 +72,13 @@
6872
display: flex;
6973
align-items: center;
7074
align-self: center;
71-
margin-right: 13px;
7275
outline-style:none;
7376
}
77+
78+
[dir="ltr"] .alert-connection-button {
79+
margin-right: 13px;
80+
}
81+
82+
[dir="rtl"] .alert-connection-button {
83+
margin-left: 13px;
84+
}

‎src/components/alerts/alert.jsx‎

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ const AlertComponent = ({
2222
iconSpinner,
2323
iconURL,
2424
level,
25+
showDownload,
26+
showSaveNow,
2527
onCloseAlert,
28+
onDownload,
29+
onSaveNow,
2630
onReconnect,
2731
showReconnect
2832
}) => (
@@ -42,7 +46,7 @@ const AlertComponent = ({
4246
<div className={styles.alertMessage}>
4347
{extensionName ? (
4448
<FormattedMessage
45-
defaultMessage="Scratch lost connection to {extensionName}"
49+
defaultMessage="Scratch lost connection to {extensionName}."
4650
description="Message indicating that an extension peripheral has been disconnected"
4751
id="gui.alerts.lostPeripheralConnection"
4852
values={{
@@ -53,30 +57,56 @@ const AlertComponent = ({
5357
/>
5458
) : content}
5559
</div>
56-
{showReconnect && (
57-
<button
58-
className={styles.connectionButton}
59-
onClick={onReconnect}
60-
>
61-
<FormattedMessage
62-
defaultMessage="Reconnect"
63-
description="Button to reconnect the device"
64-
id="gui.connection.reconnect"
65-
/>
66-
</button>
67-
)}
68-
{closeButton && (
69-
<Box
70-
className={styles.alertCloseButtonContainer}
71-
>
72-
<CloseButton
73-
className={classNames(styles.alertCloseButton)}
74-
color={closeButtonColors[level]}
75-
size={CloseButton.SIZE_LARGE}
76-
onClick={onCloseAlert}
77-
/>
78-
</Box>
79-
)}
60+
<div className={styles.alertButtons}>
61+
{showSaveNow && (
62+
<button
63+
className={styles.alertConnectionButton}
64+
onClick={onSaveNow}
65+
>
66+
<FormattedMessage
67+
defaultMessage="Try Again"
68+
description="Button to try saving again"
69+
id="gui.alerts.tryAgain"
70+
/>
71+
</button>
72+
)}
73+
{showDownload && (
74+
<button
75+
className={styles.alertConnectionButton}
76+
onClick={onDownload}
77+
>
78+
<FormattedMessage
79+
defaultMessage="Download"
80+
description="Button to download project locally"
81+
id="gui.alerts.download"
82+
/>
83+
</button>
84+
)}
85+
{showReconnect && (
86+
<button
87+
className={styles.alertConnectionButton}
88+
onClick={onReconnect}
89+
>
90+
<FormattedMessage
91+
defaultMessage="Reconnect"
92+
description="Button to reconnect the device"
93+
id="gui.connection.reconnect"
94+
/>
95+
</button>
96+
)}
97+
{closeButton && (
98+
<Box
99+
className={styles.alertCloseButtonContainer}
100+
>
101+
<CloseButton
102+
className={classNames(styles.alertCloseButton)}
103+
color={closeButtonColors[level]}
104+
size={CloseButton.SIZE_LARGE}
105+
onClick={onCloseAlert}
106+
/>
107+
</Box>
108+
)}
109+
</div>
80110
</Box>
81111
);
82112

@@ -88,8 +118,12 @@ AlertComponent.propTypes = {
88118
iconURL: PropTypes.string,
89119
level: PropTypes.string,
90120
onCloseAlert: PropTypes.func.isRequired,
121+
onDownload: PropTypes.func,
91122
onReconnect: PropTypes.func,
92-
showReconnect: PropTypes.bool
123+
onSaveNow: PropTypes.func,
124+
showDownload: PropTypes.func,
125+
showReconnect: PropTypes.bool,
126+
showSaveNow: PropTypes.bool
93127
};
94128

95129
AlertComponent.defaultProps = {

‎src/components/alerts/alerts.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ const AlertsComponent = ({
2525
key={index}
2626
level={a.level}
2727
message={a.message}
28+
showDownload={a.showDownload}
2829
showReconnect={a.showReconnect}
30+
showSaveNow={a.showSaveNow}
2931
onCloseAlert={onCloseAlert}
3032
/>
3133
))}

‎src/components/connection-modal/auto-scanning-step.jsx‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const AutoScanningStep = props => (
6363
</div>
6464
</Box>
6565
<Box className={styles.bottomArea}>
66-
<Box className={styles.instructions}>
66+
<Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
6767
{props.phase === PHASES.prescan && (
6868
<FormattedMessage
6969
defaultMessage="Have your device nearby, then begin searching."
@@ -80,60 +80,63 @@ const AutoScanningStep = props => (
8080
)}
8181
</Box>
8282
<Dots
83+
className={styles.bottomAreaItem}
8384
counter={0}
8485
total={3}
8586
/>
86-
{props.phase === PHASES.prescan && (
87-
<button
88-
className={styles.connectionButton}
89-
onClick={props.onStartScan}
90-
>
91-
<FormattedMessage
92-
defaultMessage="Start Searching"
93-
description="Button in prompt for starting a search"
94-
id="gui.connection.auto-scanning.start-search"
95-
/>
96-
</button>
97-
)}
98-
{props.phase === PHASES.pressbutton && (
99-
<div className={styles.segmentedButton}>
87+
<Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
88+
{props.phase === PHASES.prescan && (
10089
<button
101-
disabled
10290
className={styles.connectionButton}
91+
onClick={props.onStartScan}
10392
>
10493
<FormattedMessage
105-
defaultMessage="Searching..."
106-
description="Label indicating that search is in progress"
107-
id="gui.connection.connecting-searchbutton"
94+
defaultMessage="Start Searching"
95+
description="Button in prompt for starting a search"
96+
id="gui.connection.auto-scanning.start-search"
10897
/>
10998
</button>
99+
)}
100+
{props.phase === PHASES.pressbutton && (
101+
<div className={styles.segmentedButton}>
102+
<button
103+
disabled
104+
className={styles.connectionButton}
105+
>
106+
<FormattedMessage
107+
defaultMessage="Searching..."
108+
description="Label indicating that search is in progress"
109+
id="gui.connection.connecting-searchbutton"
110+
/>
111+
</button>
112+
<button
113+
className={styles.connectionButton}
114+
onClick={props.onRefresh}
115+
>
116+
<img
117+
className={styles.abortConnectingIcon}
118+
src={closeIcon}
119+
/>
120+
</button>
121+
</div>
122+
)}
123+
{props.phase === PHASES.notfound && (
110124
<button
111125
className={styles.connectionButton}
112126
onClick={props.onRefresh}
113127
>
114128
<img
115-
className={styles.abortConnectingIcon}
116-
src={closeIcon}
129+
className={styles.buttonIconLeft}
130+
src={backIcon}
131+
/>
132+
<FormattedMessage
133+
defaultMessage="Try again"
134+
description="Button in prompt for trying a device search again"
135+
id="gui.connection.auto-scanning.try-again"
117136
/>
118137
</button>
119-
</div>
120-
)}
121-
{props.phase === PHASES.notfound && (
122-
<button
123-
className={styles.connectionButton}
124-
onClick={props.onRefresh}
125-
>
126-
<img
127-
className={styles.buttonIconLeft}
128-
src={backIcon}
129-
/>
130-
<FormattedMessage
131-
defaultMessage="Try again"
132-
description="Button in prompt for trying a device search again"
133-
id="gui.connection.auto-scanning.try-again"
134-
/>
135-
</button>
136-
)}
138+
)}
139+
</Box>
137140
</Box>
138141
</Box>
139142
);

‎src/components/connection-modal/connected-step.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const ConnectedStep = props => (
2525
</Box>
2626
</Box>
2727
<Box className={styles.bottomArea}>
28-
<Box className={styles.instructions}>
28+
<Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
2929
<FormattedMessage
3030
defaultMessage="Connected"
3131
description="Message indicating that a device was connected"
@@ -34,9 +34,10 @@ const ConnectedStep = props => (
3434
</Box>
3535
<Dots
3636
success
37+
className={styles.bottomAreaItem}
3738
total={3}
3839
/>
39-
<div className={styles.cornerButtons}>
40+
<div className={classNames(styles.bottomAreaItem, styles.cornerButtons)}>
4041
<button
4142
className={classNames(styles.redButton, styles.connectionButton)}
4243
onClick={props.onDisconnect}

‎src/components/connection-modal/connecting-step.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {FormattedMessage} from 'react-intl';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4+
import classNames from 'classnames';
45

56
import Box from '../box/box.jsx';
67
import Dots from './dots.jsx';
@@ -27,14 +28,15 @@ const ConnectingStep = props => (
2728
</Box>
2829
</Box>
2930
<Box className={styles.bottomArea}>
30-
<Box className={styles.instructions}>
31+
<Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
3132
{props.connectingMessage}
3233
</Box>
3334
<Dots
35+
className={styles.bottomAreaItem}
3436
counter={1}
3537
total={3}
3638
/>
37-
<div className={styles.segmentedButton}>
39+
<div className={classNames(styles.bottomAreaItem, styles.segmentedButton)}>
3840
<button
3941
disabled
4042
className={styles.connectionButton}

0 commit comments

Comments
 (0)