merged scratch-gui

package.json

@@ -79,6 +79,7 @@
     "mkdirp": "^0.5.1",
     "opal-runtime": "^1.0.11",
     "opal-compiler": "^1.0.11",
+    "papaparse": "4.6.2",
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-simple-vars": "^5.0.1",
@@ -108,12 +109,12 @@
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20181023202904",
     "scratch-blocks": "0.1.0-prerelease.1545162154",
-    "scratch-l10n": "3.1.20181213173343",
-    "scratch-paint": "0.2.0-prerelease.20181218161344",
-    "scratch-render": "0.1.0-prerelease.20181218160410",
+    "scratch-l10n": "3.1.20181220222259",
+    "scratch-paint": "0.2.0-prerelease.20181220194927",
+    "scratch-render": "0.1.0-prerelease.20181220195236",
     "scratch-storage": "1.2.1",
-    "scratch-svg-renderer": "0.2.0-prerelease.20181218153528",
-    "scratch-vm": "0.2.0-prerelease.20181219200003",
+    "scratch-svg-renderer": "0.2.0-prerelease.20181220183040",
+    "scratch-vm": "0.2.0-prerelease.20181221030743",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/components/gui/gui.jsx

@@ -24,14 +24,15 @@ import BackdropLibrary from '../../containers/backdrop-library.jsx';
 import Watermark from '../../containers/watermark.jsx';
 
 import Backpack from '../../containers/backpack.jsx';
+import PreviewModal from '../../containers/preview-modal.jsx';
 import ImportModal from '../../containers/import-modal.jsx';
 import WebGlModal from '../../containers/webgl-modal.jsx';
 import TipsLibrary from '../../containers/tips-library.jsx';
 import Cards from '../../containers/cards.jsx';
 import Alerts from '../../containers/alerts.jsx';
 import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
-
+import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
@@ -103,13 +104,19 @@ const GUIComponent = props => {
         onExtensionButtonClick,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
+        onRequestCloseTelemetryModal,
         onSeeCommunity,
         onShare,
+        onTelemetryModalCancel,
+        onTelemetryModalOptIn,
+        onTelemetryModalOptOut,
+        previewInfoVisible,
         showComingSoon,
         soundsTabVisible,
         rubyTabVisible,
         stageSizeMode,
         targetIsStage,
+        telemetryModalVisible,
         tipsLibraryVisible,
         vm,
         ...componentProps
@@ -151,6 +158,17 @@ const GUIComponent = props => {
                 dir={isRtl ? 'rtl' : 'ltr'}
                 {...componentProps}
             >
+                {previewInfoVisible ? (
+                    <PreviewModal />
+                ) : null}
+                {telemetryModalVisible ? (
+                    <TelemetryModal
+                        onCancel={onTelemetryModalCancel}
+                        onOptIn={onTelemetryModalOptIn}
+                        onOptOut={onTelemetryModalOptOut}
+                        onRequestClose={onRequestCloseTelemetryModal}
+                    />
+                ) : null}
                 {loading ? (
                     <Loader />
                 ) : null}
@@ -400,17 +418,23 @@ GUIComponent.propTypes = {
     onOpenRegistration: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
     onRequestCloseCostumeLibrary: PropTypes.func,
+    onRequestCloseTelemetryModal: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
     onTabSelect: PropTypes.func,
+    onTelemetryModalCancel: PropTypes.func,
+    onTelemetryModalOptIn: PropTypes.func,
+    onTelemetryModalOptOut: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
     onUpdateProjectTitle: PropTypes.func,
+    previewInfoVisible: PropTypes.bool,
     renderLogin: PropTypes.func,
     rubyTabVisible: PropTypes.bool,
     showComingSoon: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,
     stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
     targetIsStage: PropTypes.bool,
+    telemetryModalVisible: PropTypes.bool,
     tipsLibraryVisible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };

src/components/menu-bar/login-dropdown.jsx

@@ -35,6 +35,11 @@ const LoginDropdownMessages = defineMessages({ // eslint-disable-line no-unused-
         defaultMessage: 'Need Help?',
         description: 'Button text for user to indicate that they need help',
         id: 'login.needHelp'
+    },
+    validationRequired: {
+        defaultMessage: 'This field is required',
+        description: 'Message to tell user they must enter text in a form field',
+        id: 'form.validationRequired'
     }
 });
 

src/components/monitor/monitor.jsx

@@ -54,35 +54,52 @@ const MonitorComponent = props => (
                 })}
             </Box>
         </Draggable>
-        {props.mode === 'list' ? null : ReactDOM.createPortal((
+        {ReactDOM.createPortal((
             // Use a portal to render the context menu outside the flow to avoid
             // positioning conflicts between the monitors `transform: scale` and
             // the context menus `position: fixed`. For more details, see
             // http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
             <ContextMenu id={`monitor-${props.label}`}>
-                <MenuItem onClick={props.onSetModeToDefault}>
-                    <FormattedMessage
-                        defaultMessage="normal readout"
-                        description="Menu item to switch to the default monitor"
-                        id="gui.monitor.contextMenu.default"
-                    />
-                </MenuItem>
-                <MenuItem onClick={props.onSetModeToLarge}>
-                    <FormattedMessage
-                        defaultMessage="large readout"
-                        description="Menu item to switch to the large monitor"
-                        id="gui.monitor.contextMenu.large"
-                    />
-                </MenuItem>
-                {props.onSetModeToSlider ? (
+                {props.onSetModeToDefault &&
+                    <MenuItem onClick={props.onSetModeToDefault}>
+                        <FormattedMessage
+                            defaultMessage="normal readout"
+                            description="Menu item to switch to the default monitor"
+                            id="gui.monitor.contextMenu.default"
+                        />
+                    </MenuItem>}
+                {props.onSetModeToLarge &&
+                    <MenuItem onClick={props.onSetModeToLarge}>
+                        <FormattedMessage
+                            defaultMessage="large readout"
+                            description="Menu item to switch to the large monitor"
+                            id="gui.monitor.contextMenu.large"
+                        />
+                    </MenuItem>}
+                {props.onSetModeToSlider &&
                     <MenuItem onClick={props.onSetModeToSlider}>
                         <FormattedMessage
                             defaultMessage="slider"
                             description="Menu item to switch to the slider monitor"
                             id="gui.monitor.contextMenu.slider"
                         />
-                    </MenuItem>
-                ) : null}
+                    </MenuItem>}
+                {props.onImport &&
+                    <MenuItem onClick={props.onImport}>
+                        <FormattedMessage
+                            defaultMessage="import"
+                            description="Menu item to import into list monitors"
+                            id="gui.monitor.contextMenu.import"
+                        />
+                    </MenuItem>}
+                {props.onExport &&
+                    <MenuItem onClick={props.onExport}>
+                        <FormattedMessage
+                            defaultMessage="export"
+                            description="Menu item to export from list monitors"
+                            id="gui.monitor.contextMenu.export"
+                        />
+                    </MenuItem>}
             </ContextMenu>
         ), document.body)}
     </ContextMenuTrigger>
@@ -100,9 +117,11 @@ MonitorComponent.propTypes = {
     label: PropTypes.string.isRequired,
     mode: PropTypes.oneOf(monitorModes),
     onDragEnd: PropTypes.func.isRequired,
+    onExport: PropTypes.func,
+    onImport: PropTypes.func,
     onNextMode: PropTypes.func.isRequired,
-    onSetModeToDefault: PropTypes.func.isRequired,
-    onSetModeToLarge: PropTypes.func.isRequired,
+    onSetModeToDefault: PropTypes.func,
+    onSetModeToLarge: PropTypes.func,
     onSetModeToSlider: PropTypes.func
 };
 

src/components/telemetry-modal/telemetry-modal.css

@@ -0,0 +1,82 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+@import "../../css/typography.css";
+@import "../../css/z-index.css";
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-modal;
+    background-color: $ui-modal-overlay;
+}
+
+.modal-content {
+    margin: 100px auto;
+    outline: none;
+    border: .25rem solid $ui-white-transparent;
+    padding: 0;
+    border-radius: $space;
+    user-select: none;
+    width: 640px;
+
+    color: $text-primary;
+    overflow: hidden;
+}
+
+.illustration {
+    width: 100%;
+    height: 123px;
+    background-color: $motion-primary;
+    background-image: url('./telemetry-modal-header.png');
+    background-size: cover;
+}
+
+.body {
+    background: $ui-white;
+    padding: 1.5rem 2.25rem;
+    text-align: left;
+}
+
+.privacy-policy-link {
+    color: $motion-primary;
+    text-decoration: none;
+}
+
+/* Confirmation buttons at the bottom of the modal */
+.button-row {
+    margin: 1.5rem 0;
+    font-weight: bolder;
+    text-align: right;
+    display: flex;
+    justify-content: center;
+}
+
+.button-row button {
+    border: 1px solid $motion-primary;
+    border-radius: 0.25rem;
+    padding: 0.5rem 1.5rem;
+    background: white;
+    font-weight: bold;
+    font-size: .875rem;
+    cursor: pointer;
+}
+
+.button-row button.opt-in {
+    background: $motion-primary;
+    color: white;
+}
+
+.button-row button.opt-out {
+    color: $motion-primary;
+}
+
+[dir="ltr"] .button-row button + button {
+    margin-left: 0.5rem;
+}
+
+[dir="rtl"] .button-row button + button {
+    margin-right: 0.5rem;
+}