Release August 24 to Beta #2980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

rschamp merged 58 commits into master from smoke

Aug 27, 2018

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,21 @@ npm start @@
     ```
     Then go to [http://localhost:8601/](http://localhost:8601/) - the playground outputs the default GUI component
+    ## Developing alongside other Scratch repositories
+    If you wish to develop scratch-gui alongside other scratch repositories that depend on it, you may wish
+    to have the other repositories use your local scratch-gui build instead of fetching the current production
+    version of the scratch-gui that is found by default using `npm install`.
+    To do this:
+. Make sure you have run `npm install` from this repository's top level
+. Make sure you have run `npm install` from the top level of each repository (such as scratch-www) that depends on scratch-gui
+. From this repository's top level, build the `dist` directory by running `BUILD_MODE=dist npm run build`
+. From this repository's top level, establish a link to this repository by running `npm link`
+. From the top level of each repository that depends on scratch-gui, run `npm link scratch-gui`
+. Build or run the repositories that depend on scratch-gui
     ## Testing
     NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.
@@ Expand Down @@

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -96,13 +96,13 @@
  
        "redux-throttle": "0.1.1",

        "rimraf": "^2.6.1",

        "scratch-audio": "0.1.0-prerelease.20180625202813",

        "scratch-blocks": "0.1.0-prerelease.1534513944",

        "scratch-l10n": "3.0.20180817135616",

        "scratch-paint": "0.2.0-prerelease.20180816205442",

        "scratch-render": "0.1.0-prerelease.20180811013828",

        "scratch-storage": "0.5.1",

        "scratch-blocks": "0.1.0-prerelease.1535116879",

        "scratch-l10n": "3.0.20180824134256",

        "scratch-paint": "0.2.0-prerelease.20180823231354",

        "scratch-render": "0.1.0-prerelease.20180824141819",

        "scratch-storage": "1.0.0",

        "scratch-svg-renderer": "0.2.0-prerelease.20180817005452",

        "scratch-vm": "0.2.0-prerelease.20180816213529",

        "scratch-vm": "0.2.0-prerelease.20180824135031",

        "selenium-webdriver": "3.6.0",

        "startaudiocontext": "1.2.1",

        "style-loader": "^0.22.1",

src/components/asset-panel/asset-panel.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,16 +5,32 @@ @@
         display: flex;
         flex-grow: 1;
         border: 1px solid $ui-black-transparent;
-        border-top-right-radius: $space;
         background: white;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-size: 0.85rem;
     }
+    [dir="ltr"] .wrapper {
+        border-top-right-radius: $space;
+        border-bottom-right-radius: $space;
+    }
+    [dir="rtl"] .wrapper {
+        border-top-left-radius: $space;
+        border-bottom-left-radius: $space;
+    }
     .detail-area {
         display: flex;
         flex-grow: 1;
         flex-shrink: 1;
-        border-left: 1px solid $ui-black-transparent;
         overflow-y: auto;
     }
+    [dir="ltr"] .detail-area {
+        border-left: 1px solid $ui-black-transparent;
+    }
+    [dir="rtl"] .detail-area {
+        border-right: 1px solid $ui-black-transparent;
+    }

src/components/backpack/backpack.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ @@
     .backpack-header {
         margin-top: 0.5rem;
         border: 1px solid $ui-black-transparent;
-        border-top-right-radius: $space;
         background: $ui-white;
         padding: 0.25rem;
         text-align: center;
@@ Expand All / @@ -20,6 +19,14 @@ @@
         user-select: none;
     }
+    [dir="ltr"] .backpack-header {
+        border-top-right-radius: $space;
+    }
+    [dir="rtl"] .backpack-header {
+        border-top-left-radius: $space;
+    }
     .backpack-list {
         position: relative;
         display: flex;
@@ Expand Down @@

src/components/blocks/blocks.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,13 @@ @@
         border-bottom-right-radius: $space;
     }
+    [dir="rtl"] .blocks :global(.injectionDiv) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: $space;
+        border-bottom-left-radius: $space;
+    }
     .blocks :global(.blocklyMainBackground) {
         stroke: none;
     }
@@ Expand All / @@ -31,6 +38,11 @@ @@
         -ms-overflow-style: none;
     }
+    [dir="rtl"] .blocks :global(.blocklyToolboxDiv) {
+        border-right: none;
+        border-left: 1px solid $ui-black-transparent;
+    }
     .blocks :global(.blocklyToolboxDiv::-webkit-scrollbar) {
         display: none;
     }
@@ Expand All / @@ -40,6 +52,12 @@ @@
         box-sizing: content-box;
     }
+    [dir="rtl"] .blocks :global(.blocklyFlyout) {
+        border-right: none;
+        border-left: 1px solid $ui-black-transparent;
+    }
     .blocks :global(.blocklyBlockDragSurface) {
         /*
             Fix an issue where the drag surface was preventing hover events for sharing blocks.
@@ Expand Down @@

src/components/gui/gui.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -130,6 +130,10 @@ @@
     [dir="rtl"] .tab img {
         margin-left: 0.125rem;
+    }
+    /* only mirror blocks tab icon */
+    [dir="rtl"] .tab:nth-of-type(1) img {
         transform: scaleX(-1);
     }
@@ Expand Down @@

src/components/import-modal/import-modal.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -156,6 +156,7 @@ ImportModal.propTypes = { @@
         hasValidationError: PropTypes.bool.isRequired,
         inputValue: PropTypes.string.isRequired,
         intl: intlShape.isRequired,
+        isRtl: PropTypes.bool,
         onCancel: PropTypes.func.isRequired,
         onChange: PropTypes.func.isRequired,
         onGoBack: PropTypes.func.isRequired,
@@ Expand Down @@

src/components/language-selector/language-selector.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,19 +5,27 @@ @@
         height:  1.5rem;
     }
-    .disabled {
-        opacity: .5;
-    }
+    /* Position the language select over the language icon, and make it transparent */
     .language-select {
-        margin: .5rem;
-        height: 1.85rem;
-        border: 1px solid $motion-primary;
+        position: absolute;
+        width: $language-selector-width;
+        height: $menu-bar-height;
+        opacity: 0;
         user-select: none;
-        outline: none;
-        background: rgba(255, 255, 255, 0.5);
-        color: $motion-tertiary;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: .875rem;
+    }
+    [dir="ltr"] .language-select {
+        right: 0;
+    }
+    [dir="rtl"] .language-select {
+        left: 0;
+    }
+    .language-select option {
+        opacity: 1;
     }
     .language-select:focus {
@@ Expand Down @@

src/components/language-selector/language-selector.jsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,58 +1,38 @@
  
    import PropTypes from 'prop-types';

    import React from 'react';

    import Box from '../box/box.jsx';

    import locales from 'scratch-l10n';

    import styles from './language-selector.css';

    // supported languages to exclude from the menu, but allow as a URL option

    const ignore = ['he'];

    class LanguageSelector extends React.Component {

        render () {

            const {

                componentRef,

                currentLocale,

                onChange,

                ...componentProps

            } = this.props;

            return (

                <Box

                    {...componentProps}

                >

                    <div

                        className={styles.group}

                        ref={componentRef}

                    >

                        <select

                            className={styles.languageSelect}

                            value={currentLocale}

                            onChange={onChange}

    const LanguageSelector = ({currentLocale, label, onChange}) => (

        <select

            aria-label={label}

            className={styles.languageSelect}

            value={currentLocale}

            onChange={onChange}

        >

            {

                Object.keys(locales)

                    .filter(l => !ignore.includes(l))

                    .map(locale => (

                        <option

                            key={locale}

                            value={locale}

                        >

                            {

                                Object.keys(locales)

                                    .filter(l => !ignore.includes(l))

                                    .map(locale => (

                                        <option

                                            key={locale}

                                            value={locale}

                                        >

                                            {locales[locale].name}

                                        </option>

                                    ))

                            }

                        </select>

                    </div>

                </Box>

            );

        }

    }

                            {locales[locale].name}

                        </option>

                    ))

            }

        </select>

    );

    LanguageSelector.propTypes = {

        componentRef: PropTypes.func,

        currentLocale: PropTypes.string,

        onChange: PropTypes.func,

        open: PropTypes.bool

        label: PropTypes.string,

        onChange: PropTypes.func

    };

    export default LanguageSelector;

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,6 @@ @@
     .coming-soon-text {
         position: absolute;
-        transform: translate(calc(2 * $space), calc(2 * $space));
         background-color: $data-primary;
         border-radius: 1rem;
         box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25);
@@ Expand All / @@ -108,3 +107,11 @@ @@
         font-weight: bold;
         color: $ui-white;
     }
+    [dir="ltr"] .coming-soon-text {
+        transform: translate(calc(2 * $space), calc(2 * $space));
+    }
+    [dir="rtl"] .coming-soon-text {
+        transform: translate(calc(-2 * $space), calc(2 * $space));
+    }

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -48,8 +48,13 @@ @@
         height:  1.5rem;
     }
+    .language-caret {
+        margin-bottom: .625rem;
+    }
     .language-menu {
         display: inline-flex;
+        width: $language-selector-width;
     }
     .menu {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release August 24 to Beta #2980

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!