Merge pull request #28 from t-kazu/merge/scratch-gui

Scratch 3.0をマージしました

Author: takaokouji

package.json

@@ -41,7 +41,7 @@
     "babel-preset-react": "^6.22.0",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
-    "chromedriver": "2.40.0",
+    "chromedriver": "2.41.0",
     "classnames": "2.2.6",
     "copy-webpack-plugin": "^4.5.1",
     "core-js": "2.5.7",
@@ -71,14 +71,15 @@
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.1.4",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "^3.0.0",
     "postcss-simple-vars": "^4.0.0",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "raw-loader": "^0.5.1",
     "react": "16.2.0",
     "react-ace": "^6.1.1",
-    "react-contextmenu": "2.9.2",
+    "react-contextmenu": "2.9.3",
     "react-dom": "16.2.0",
     "react-draggable": "3.0.5",
     "react-ga": "2.5.3",
@@ -97,16 +98,16 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20180625202813",
-    "scratch-blocks": "0.1.0-prerelease.1532446271",
-    "scratch-l10n": "3.0.20180719145856",
-    "scratch-paint": "0.2.0-prerelease.20180718183615",
-    "scratch-render": "0.1.0-prerelease.20180724152606",
+    "scratch-blocks": "0.1.0-prerelease.1533835159",
+    "scratch-l10n": "3.0.20180803171042",
+    "scratch-paint": "0.2.0-prerelease.20180809185222",
+    "scratch-render": "0.1.0-prerelease.20180808184135",
     "scratch-storage": "0.5.1",
     "scratch-svg-renderer": "0.2.0-prerelease.20180712223402",
-    "scratch-vm": "0.2.0-prerelease.20180724192502",
+    "scratch-vm": "0.2.0-prerelease.20180809193416",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.22.1",
     "svg-to-image": "1.1.3",
     "text-encoding": "0.6.4",
     "to-style": "1.3.3",

src/components/action-menu/action-menu.css

@@ -1,4 +1,5 @@
 @import "../../css/colors.css";
+@import "../../css/z-index.css";
 
 $main-button-size: 2.75rem;
 $more-button-size: 2.25rem;
@@ -44,7 +45,7 @@ button::-moz-focus-inner {
     width: $main-button-size;
     height: $main-button-size;
     box-shadow: 0 0 0 4px $motion-transparent;
-    z-index: 20; /* TODO reorder layout to prevent z-index need */
+    z-index: $z-index-add-button;
     transition: transform, box-shadow 0.5s;
 }
 
@@ -58,6 +59,10 @@ button::-moz-focus-inner {
     height: calc($main-button-size - 1rem);
 }
 
+[dir="rtl"] .main-icon {
+    transform: scaleX(-1);
+}
+
 .more-buttons-outer {
     /*
         Need to use two divs to set different overflow x/y
@@ -71,6 +76,7 @@ button::-moz-focus-inner {
     border-top-right-radius: $more-button-size;
     width: $more-button-size;
     margin-left: calc(($main-button-size - $more-button-size) / 2);
+    margin-right: calc(($main-button-size - $more-button-size) / 2);
 
     position: absolute;
     bottom: calc($main-button-size);
@@ -150,7 +156,7 @@ button::-moz-focus-inner {
     border-radius: .25rem !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-    z-index: 100 !important;
+    z-index: $z-index-tooltip !important;
 }
 
 $arrow-size: 0.5rem;

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

@@ -101,6 +101,7 @@ class ActionMenu extends React.Component {
             img: mainImg,
             title: mainTitle,
             moreButtons,
+            tooltipPlace,
             onClick
         } = this.props;
 
@@ -134,15 +135,15 @@ class ActionMenu extends React.Component {
                     className={styles.tooltip}
                     effect="solid"
                     id={mainTooltipId}
-                    place="left"
+                    place={tooltipPlace || 'left'}
                 />
                 <div className={styles.moreButtonsOuter}>
                     <div className={styles.moreButtons}>
                         {(moreButtons || []).map(({img, title, onClick: handleClick,
                             fileAccept, fileChange, fileInput}, keyId) => {
                             const isComingSoon = !handleClick;
                             const hasFileInput = fileInput;
-                            const tooltipId = title;
+                            const tooltipId = `${mainTooltipId}-${title}`;
                             return (
                                 <div key={`${tooltipId}-${keyId}`}>
                                     <button
@@ -174,7 +175,7 @@ class ActionMenu extends React.Component {
                                         })}
                                         effect="solid"
                                         id={tooltipId}
-                                        place="left"
+                                        place={tooltipPlace || 'left'}
                                     />
                                 </div>
                             );
@@ -198,7 +199,8 @@ ActionMenu.propTypes = {
         fileInput: PropTypes.func // Optional, only for file upload
     })),
     onClick: PropTypes.func.isRequired,
-    title: PropTypes.node.isRequired
+    title: PropTypes.node.isRequired,
+    tooltipPlace: PropTypes.string
 };
 
 export default ActionMenu;

src/components/asset-panel/selector.css

@@ -32,6 +32,7 @@ $fade-out-distance: 100px;
     position: absolute;
     bottom: 0;
     left: 0;
+    right:0;
     background: linear-gradient(rgba(232,237,241, 0),rgba(232,237,241, 1));
     height: $fade-out-distance;
     width: 100%;

src/components/backpack/backpack.jsx

@@ -17,7 +17,7 @@ const dragTypeMap = {
     sprite: DragConstants.BACKPACK_SPRITE
 };
 
-const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, onToggle, onDelete}) => (
+const Backpack = ({containerRef, contents, dragOver, error, expanded, loading, onToggle, onDelete}) => (
     <div className={styles.backpackContainer}>
         <div
             className={styles.backpackHeader}
@@ -45,7 +45,7 @@ const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, on
         {expanded ? (
             <div
                 className={styles.backpackList}
-                ref={dropAreaRef}
+                ref={containerRef}
             >
                 {error ? (
                     <div className={styles.statusMessage}>
@@ -104,14 +104,14 @@ const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, on
 );
 
 Backpack.propTypes = {
+    containerRef: PropTypes.func,
     contents: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string,
         thumbnailUrl: PropTypes.string,
         type: PropTypes.string,
         name: PropTypes.string
     })),
     dragOver: PropTypes.bool,
-    dropAreaRef: PropTypes.func,
     error: PropTypes.bool,
     expanded: PropTypes.bool,
     loading: PropTypes.bool,

src/components/browser-modal/browser-modal.jsx

@@ -60,12 +60,12 @@ const BrowserModal = ({intl, ...props}) => (
                         previewFaqLink: (
                             <a
                                 className={styles.faqLink}
-                                href="//scratch.mit.edu/preview-faq"
+                                href="//scratch.mit.edu/3faq"
                             >
                                 <FormattedMessage
-                                    defaultMessage="Preview FAQ"
-                                    description="link to Scratch 3.0 preview FAQ page"
-                                    id="gui.unsupportedBrowser.previewfaqlink"
+                                    defaultMessage="FAQ"
+                                    description="link to Scratch 3.0 FAQ page"
+                                    id="gui.unsupportedBrowser.previewfaqlinktext"
                                 />
                             </a>
                         )

src/components/button/button.css

@@ -11,10 +11,17 @@
 }
 
 .icon {
-    margin-right: .5rem;
     height: 1.5rem;
 }
 
+[dir="ltr"] .icon {
+    margin-right: .5rem;
+}
+
+[dir="rtl"] .icon {
+    margin-left: .5rem;
+}
+
 .content {
     white-space: nowrap;
 }

src/components/camera-modal/camera-modal.css

@@ -135,6 +135,10 @@ $main-button-size: 2.75rem;
     color: $ui-white;
 }
 
+[dir="rtl"] .retake-button img {
+    transform: scaleX(-1);
+}
+
 @keyframes flash {
     0% { opacity: 1; }
     100% { opacity: 0; }

src/components/camera-modal/camera-modal.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import Box from '../box/box.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import styles from './camera-modal.css';
 import backIcon from './icon--back.svg';
 import cameraIcon from '../action-menu/icon--camera.svg';
@@ -79,7 +79,7 @@ const CameraModal = ({intl, ...props}) => (
             {props.capture ?
                 <Box className={styles.buttonRow}>
                     <button
-                        className={styles.cancelButton}
+                        className={styles.retakeButton}
                         key="retake-button"
                         onClick={props.onBack}
                     >

src/components/coming-soon/coming-soon.css

@@ -16,7 +16,7 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-size: 1rem !important;
     line-height: 1.25rem !important;
-    z-index: $z-index-coming-soon !important;
+    z-index: $z-index-tooltip !important;
 }
 
 .coming-soon:after {