Merge pull request #152 from smalruby/merge/scratch-gui

scratch guiをマージしました

Author: takaokouji

package.json

@@ -8,7 +8,8 @@
     "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "prune": "./prune-gh-pages.sh",
-    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/",
+    "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
+    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
     "start": "webpack-dev-server",
     "test": "npm run test:lint && npm run test:unit && npm run build && npm run test:integration",
     "test:integration": "jest --runInBand test[\\\\/]integration",
@@ -43,7 +44,7 @@
     "babel-loader": "^8.0.4",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
-    "chromedriver": "2.44.0",
+    "chromedriver": "2.44.1",
     "classnames": "2.2.6",
     "computed-style-to-inline-style": "3.0.0",
     "copy-webpack-plugin": "^4.5.1",
@@ -72,6 +73,7 @@
     "lodash.isequal": "4.5.0",
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
+    "lodash.throttle": "4.0.1",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
     "opal-runtime": "^1.0.11",
@@ -104,13 +106,13 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20181023202904",
-    "scratch-blocks": "0.1.0-prerelease.1542722191",
-    "scratch-l10n": "3.0.20181121224721",
-    "scratch-paint": "0.2.0-prerelease.20181128182047",
+    "scratch-blocks": "0.1.0-prerelease.1544217251",
+    "scratch-l10n": "3.1.20181206185857",
+    "scratch-paint": "0.2.0-prerelease.20181203192800",
     "scratch-render": "0.1.0-prerelease.20181127194508",
     "scratch-storage": "1.2.0",
     "scratch-svg-renderer": "0.2.0-prerelease.20181126212715",
-    "scratch-vm": "0.2.0-prerelease.20181129211442",
+    "scratch-vm": "0.2.0-prerelease.20181207201549",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/components/alerts/inline-message.css

@@ -3,7 +3,7 @@
 
 .inline-message {
     color: $ui-white;
-    font-family: "Helvetica Neue";
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     display: flex;
     justify-content: end;
     align-items: center;

src/components/gui/gui.jsx

@@ -83,6 +83,7 @@ const GUIComponent = props => {
         enableCommunity,
         importInfoVisible,
         intl,
+        isCreating,
         isPlayerOnly,
         isRtl,
         isShared,
@@ -135,7 +136,8 @@ const GUIComponent = props => {
         return isPlayerOnly ? (
             <StageWrapper
                 isRendererSupported={isRendererSupported}
-                stageSize={stageSize}
+                isRtl={isRtl}
+                stageSize={STAGE_SIZE_MODES.large}
                 vm={vm}
             >
                 {alertsVisible ? (
@@ -151,6 +153,9 @@ const GUIComponent = props => {
                 {loading ? (
                     <Loader />
                 ) : null}
+                {isCreating ? (
+                    <Loader messageId="gui.loader.creating" />
+                ) : null}
                 {importInfoVisible ? (
                     <ImportModal />
                 ) : null}
@@ -376,6 +381,7 @@ GUIComponent.propTypes = {
     enableCommunity: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
     intl: intlShape.isRequired,
+    isCreating: PropTypes.bool,
     isPlayerOnly: PropTypes.bool,
     isRtl: PropTypes.bool,
     isShared: PropTypes.bool,
@@ -417,7 +423,9 @@ GUIComponent.defaultProps = {
     canShare: false,
     canUseCloud: false,
     enableCommunity: false,
+    isCreating: false,
     isShared: false,
+    loading: false,
     onUpdateProjectTitle: () => {},
     showComingSoon: false,
     stageSizeMode: STAGE_SIZE_MODES.large

src/components/library-item/library-item.css

@@ -30,6 +30,10 @@
     border-color: $motion-primary;
 }
 
+.hidden {
+    display: none;
+}
+
 .disabled {
     opacity: .5;
     cursor: auto;

src/components/library-item/library-item.jsx

@@ -55,7 +55,8 @@ class LibraryItem extends React.PureComponent {
                     {
                         [styles.disabled]: this.props.disabled
                     },
-                    this.props.extensionId ? styles.libraryItemExtension : null
+                    this.props.extensionId ? styles.libraryItemExtension : null,
+                    this.props.hidden ? styles.hidden : null
                 )}
                 onClick={this.handleClick}
             >
@@ -139,7 +140,10 @@ class LibraryItem extends React.PureComponent {
             </div>
         ) : (
             <Box
-                className={styles.libraryItem}
+                className={classNames(
+                    styles.libraryItem,
+                    this.props.hidden ? styles.hidden : null
+                )}
                 role="button"
                 tabIndex="0"
                 onBlur={this.handleBlur}
@@ -174,14 +178,15 @@ LibraryItem.propTypes = {
     disabled: PropTypes.bool,
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
-    iconURL: PropTypes.string.isRequired,
+    hidden: PropTypes.bool,
+    iconURL: PropTypes.string,
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     name: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.node
-    ]).isRequired,
+    ]),
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
     onMouseEnter: PropTypes.func.isRequired,

src/components/library/library.jsx

@@ -98,10 +98,12 @@ class LibraryComponent extends React.Component {
                 (dataItem.tags || [])
                     // Second argument to map sets `this`
                     .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase)
-                    .concat((typeof dataItem.name === 'string' ?
+                    .concat(dataItem.name ?
+                        (typeof dataItem.name === 'string' ?
                         // Use the name if it is a string, else use formatMessage to get the translated name
-                        dataItem.name : this.props.intl.formatMessage(dataItem.name.props)
-                    ).toLowerCase())
+                            dataItem.name : this.props.intl.formatMessage(dataItem.name.props)
+                        ).toLowerCase() :
+                        null)
                     .join('\n') // unlikely to partially match newlines
                     .indexOf(this.state.filterQuery.toLowerCase()) !== -1
             ));
@@ -182,6 +184,7 @@ class LibraryComponent extends React.Component {
                                 disabled={dataItem.disabled}
                                 extensionId={dataItem.extensionId}
                                 featured={dataItem.featured}
+                                hidden={dataItem.hidden}
                                 iconURL={scratchURL}
                                 id={index}
                                 insetIconURL={dataItem.insetIconURL}
@@ -212,7 +215,7 @@ LibraryComponent.propTypes = {
             name: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.node
-            ]).isRequired,
+            ]),
             rawURL: PropTypes.string
         })
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */

src/components/loader/loader.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import styles from './loader.css';
+import PropTypes from 'prop-types';
 
 import topBlock from './top-block.svg';
 import middleBlock from './middle-block.svg';
@@ -97,6 +98,22 @@ const messages = [
         weight: 1
     }
 ];
+const mainMessages = {
+    'gui.loader.headline': (
+        <FormattedMessage
+            defaultMessage="Loading Project"
+            description="Main loading message"
+            id="gui.loader.headline"
+        />
+    ),
+    'gui.loader.creating': (
+        <FormattedMessage
+            defaultMessage="Creating Project"
+            description="Main creating message"
+            id="gui.loader.creating"
+        />
+    )
+};
 
 class LoaderComponent extends React.Component {
     constructor (props) {
@@ -148,11 +165,7 @@ class LoaderComponent extends React.Component {
                         />
                     </div>
                     <div className={styles.title}>
-                        <FormattedMessage
-                            defaultMessage="Loading Project"
-                            description="Main loading message"
-                            id="gui.loader.headline"
-                        />
+                        {mainMessages[this.props.messageId]}
                     </div>
                     <div className={styles.messageContainerOuter}>
                         <div
@@ -175,4 +188,11 @@ class LoaderComponent extends React.Component {
     }
 }
 
+LoaderComponent.propTypes = {
+    messageId: PropTypes.string
+};
+LoaderComponent.defaultProps = {
+    messageId: 'gui.loader.headline'
+};
+
 export default LoaderComponent;

src/components/menu-bar/community-button.jsx

@@ -21,9 +21,9 @@ const CommunityButton = ({
         onClick={onClick}
     >
         <FormattedMessage
-            defaultMessage="See Community"
-            description="Label for see community button"
-            id="gui.menuBar.seeCommunity"
+            defaultMessage="See Project Page"
+            description="Label for see project page button"
+            id="gui.menuBar.seeProjectPage"
         />
     </Button>
 );

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

@@ -13,7 +13,7 @@ import ShareButton from './share-button.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import Divider from '../divider/divider.jsx';
 import LanguageSelector from '../../containers/language-selector.jsx';
-import InlineMessages from '../../containers/inline-messages.jsx';
+import SaveStatus from './save-status.jsx';
 import SBFileUploader from '../../containers/sb-file-uploader.jsx';
 import ProjectWatcher from '../../containers/project-watcher.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
@@ -69,6 +69,13 @@ import smalrubyLogo from './hatti.svg';
 
 import {updateRubyCodeTarget} from '../../reducers/ruby-code';
 
+const messages = defineMessages({
+    confirmNav: {
+        id: 'gui.menuBar.confirmNewWithoutSaving',
+        defaultMessage: 'Replace contents of the current project?',
+        description: 'message for prompting user to confirm that they want to create new project without saving'
+    }
+});
 const ariaMessages = defineMessages({
     language: {
         id: 'gui.menuBar.LanguageSelector',
@@ -157,7 +164,7 @@ class MenuBar extends React.Component {
         // if canSave===true and canCreateNew===true, it's safe to replace current project,
         // since we will auto-save first. Else, confirm first.
         const readyToReplaceProject = (this.props.canSave && this.props.canCreateNew) ||
-            confirm('Replace contents of the current project?'); // eslint-disable-line no-alert
+            confirm(this.props.intl.formatMessage(messages.confirmNav)); // eslint-disable-line no-alert
         this.props.onRequestCloseFile();
         if (readyToReplaceProject) {
             this.props.onClickNew(this.props.canSave && this.props.canCreateNew);
@@ -572,7 +579,9 @@ class MenuBar extends React.Component {
                 logged in, and whether a session is available to log in with */}
                 <div className={styles.accountInfoGroup}>
                     <div className={styles.menuBarItem}>
-                        <InlineMessages />
+                        {this.props.canSave && (
+                            <SaveStatus />
+                        )}
                     </div>
                     {this.props.sessionExists ? (
                         this.props.username ? (

src/components/menu-bar/save-status.css

@@ -0,0 +1,4 @@
+.save-now {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    cursor: pointer;
+}