合并官方最新版本 2020-08-30

open-scratch · Aug 30, 2020 · 535e3cf · 535e3cf
1 parent 9939a02
commit 535e3cf
Show file tree

Hide file tree

Showing 137 changed files with 13,451 additions and 1,041 deletions.
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
@@ -15,6 +15,7 @@
     padding-right: 1rem;
     margin-bottom: 7px;
     min-height: 1.5rem;
+    pointer-events: all;
 }
 
 .alert.warn {

diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
@@ -34,7 +34,17 @@
 }
 
 .editor-wrapper {
-    flex-basis: 600px;
+    /*
+        This is carefully balanced--  the minimum width at which the GUI will be displayed is 1024px.
+        At that size, the stage pane is 408px wide, with $space of padding to each side.
+        However, we must also add the border width to the stage pane. All-in-all, the stage pane's final width is
+        408px + ($space + $stage-standard-border-width * 2) (one border & padding per left/right side).
+
+        @todo This is in place to prevent "doubling up" of horizontal scrollbars in narrow windows, but there are likely
+        much better ways to solve that (e.g. undo #2124, remove this flex-basis entirely). However, they run their own
+        risks of breaking things, so let's just leave this as-is for the time being.
+    */
+    flex-basis: calc(1024px - 408px - (($space + $stage-standard-border-width) * 2));
     flex-grow: 1;
     flex-shrink: 0;
     position: relative;
@@ -197,21 +207,9 @@
     /* pad entire wrapper to the left and right; allow children to fill width */
     padding-left: $space;
     padding-right: $space;
-}
-
-.stage-and-target-wrapper.large {
-    /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(480px + calc($space * 2));
-}
 
-.stage-and-target-wrapper.large-constrained {
-    /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(408px + calc($space * 2));
-}
-
-.stage-and-target-wrapper.small {
-    /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */
-    max-width: calc(240px + calc($space * 2));
+    /* this will only ever be as wide as the stage */
+    flex-basis: 0;
 }
 
 .target-wrapper {
@@ -309,6 +307,7 @@ $fade-out-distance: 15px;
     z-index: $z-index-alerts;
     position: absolute;
     margin-top: 53px;
+    pointer-events: none;
 }
 
 /*

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
@@ -89,6 +89,7 @@ const GUIComponent = props => {
         loading,
         logo,
         renderLogin,
+        onClickAbout,
         onClickAccountNav,
         onCloseAccountNav,
         onLogOut,
@@ -105,6 +106,7 @@ const GUIComponent = props => {
         onRequestCloseTelemetryModal,
         onSeeCommunity,
         onShare,
+        onShowPrivacyPolicy,
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
@@ -162,6 +164,7 @@ const GUIComponent = props => {
                         onOptIn={onTelemetryModalOptIn}
                         onOptOut={onTelemetryModalOptOut}
                         onRequestClose={onRequestCloseTelemetryModal}
+                        onShowPrivacyPolicy={onShowPrivacyPolicy}
                     />
                 ) : null}
                 {loading ? (
@@ -218,6 +221,7 @@ const GUIComponent = props => {
                     logo={logo}
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
+                    onClickAbout={onClickAbout}
                     onClickAccountNav={onClickAccountNav}
                     onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
@@ -332,6 +336,7 @@ const GUIComponent = props => {
 
                         <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
                             <StageWrapper
+                                isFullScreen={isFullScreen}
                                 isRendererSupported={isRendererSupported}
                                 isRtl={isRtl}
                                 stageSize={stageSize}
@@ -388,6 +393,7 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
+    onClickAbout: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
@@ -399,6 +405,7 @@ GUIComponent.propTypes = {
     onRequestCloseTelemetryModal: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
+    onShowPrivacyPolicy: PropTypes.func,
     onTabSelect: PropTypes.func,
     onTelemetryModalCancel: PropTypes.func,
     onTelemetryModalOptIn: PropTypes.func,

diff --git a/src/components/menu-bar/icon--about.svg b/src/components/menu-bar/icon--about.svg
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
@@ -218,3 +218,9 @@
 .mystuff > a {
   background-image: url("/images/mystuff.png");
 }
+
+.about-icon {
+    height: 1.25rem;
+    margin: 0.5rem;
+    vertical-align: middle;
+}
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
@@ -70,6 +70,7 @@ import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
+import aboutIcon from './icon--about.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
@@ -142,6 +143,19 @@ MenuItemTooltip.propTypes = {
     isRtl: PropTypes.bool
 };
 
+const AboutButton = props => (
+    <Button
+        className={classNames(styles.menuBarItem, styles.hoverable)}
+        iconClassName={styles.aboutIcon}
+        iconSrc={aboutIcon}
+        onClick={props.onClick}
+    />
+);
+
+AboutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+};
+
 class MenuBar extends React.Component {
     constructor (props) {
         super(props);
@@ -158,7 +172,6 @@ class MenuBar extends React.Component {
             'getSaveToComputerHandler',
             'restoreOptionMessage'
         ]);
-        window.scratchConfig = window.scratchConfig || {}
     }
     componentDidMount () {
         document.addEventListener('keydown', this.handleKeyPress);
@@ -167,11 +180,6 @@ class MenuBar extends React.Component {
         document.removeEventListener('keydown', this.handleKeyPress);
     }
     handleClickNew () {
-        if(window.scratchConfig && window.scratchConfig.menuBar.newButton){
-            if(!window.scratchConfig.menuBar.newButton.handleBefore()){
-                return
-            }
-        }
         // if the project is dirty, and user owns the project, we will autosave.
         // but if they are not logged in and can't save, user should consider
         // downloading or logging in first.
@@ -233,12 +241,12 @@ class MenuBar extends React.Component {
         }
     }
     getSaveToComputerHandler (downloadProjectCallback) {
-        if(window.scratchConfig && window.scratchConfig.menuBar.saveFileButton){
-            if(!window.scratchConfig.menuBar.saveFileButton.handleBefore()){
-                return
-            }
-        }
         return () => {
+            if(window.scratchConfig && window.scratchConfig.menuBar.saveFileButton){
+                if(!window.scratchConfig.menuBar.saveFileButton.handleBefore()){
+                    return
+                }
+            }
             this.props.onRequestCloseFile();
             downloadProjectCallback();
             if (this.props.onProjectTelemetryEvent) {
@@ -379,20 +387,14 @@ class MenuBar extends React.Component {
                                     place={this.props.isRtl ? 'left' : 'right'}
                                     onRequestClose={this.props.onRequestCloseFile}
                                 >
-                                    {
-                                        (window.scratchConfig && window.scratchConfig.menuBar && window.scratchConfig.menuBar.newButton && 
-                                            window.scratchConfig.menuBar.newButton.show) && (
-                                            <MenuSection>
-                                                <MenuItem
-                                                    isRtl={this.props.isRtl}
-                                                    onClick={this.handleClickNew}
-                                                >
-                                                    {newProjectMessage}
-                                                </MenuItem>
-                                            </MenuSection>
-                                        )
-                                    }
-
+                                    <MenuSection>
+                                        <MenuItem
+                                            isRtl={this.props.isRtl}
+                                            onClick={this.handleClickNew}
+                                        >
+                                            {newProjectMessage}
+                                        </MenuItem>
+                                    </MenuSection>
                                     {(this.props.canSave || this.props.canCreateCopy || this.props.canRemix) && (
                                         <MenuSection>
                                             {this.props.canSave && (
@@ -413,9 +415,8 @@ class MenuBar extends React.Component {
                                         </MenuSection>
                                     )}
                                     <MenuSection>
-                                        {
-                                            (window.scratchConfig && window.scratchConfig.menuBar && window.scratchConfig.menuBar.loadFileButton && 
-                                                window.scratchConfig.menuBar.loadFileButton.show) && (
+                                        {(window.scratchConfig && window.scratchConfig.menuBar && window.scratchConfig.menuBar.loadFileButton && 
+                                        window.scratchConfig.menuBar.loadFileButton.show) && (
                                             <SBFileUploader
                                                 canSave={this.props.canSave}
                                                 userOwnsProject={this.props.userOwnsProject}
@@ -768,6 +769,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    onClickAbout: PropTypes.func,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,

diff --git a/src/components/stage-wrapper/stage-wrapper.css b/src/components/stage-wrapper/stage-wrapper.css
@@ -1,5 +1,6 @@
 @import "../../css/units.css";
 @import "../../css/colors.css";
+@import "../../css/z-index.css";
 
 .stage-wrapper * {
     box-sizing: border-box;
@@ -9,3 +10,21 @@
     /* Hides negative space between edge of rounded corners + container, when selected */
     user-select: none;
 }
+
+.stage-wrapper.full-screen {
+    position: fixed;
+    top: $stage-menu-height;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-stage-wrapper-overlay;
+    background-color: $ui-white;
+    /* spacing between stage and control bar (on the top), or between
+    stage and window edges (on left/right/bottom) */
+    padding: $stage-full-screen-stage-padding;
+
+    /* this centers the stage */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
diff --git a/src/components/stage-wrapper/stage-wrapper.jsx b/src/components/stage-wrapper/stage-wrapper.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import VM from 'scratch-vm';
 
 import Box from '../box/box.jsx';
@@ -22,7 +23,10 @@ const StageWrapperComponent = function (props) {
 
     return (
         <Box
-            className={styles.stageWrapper}
+            className={classNames(
+                styles.stageWrapper,
+                {[styles.fullScreen]: isFullScreen}
+            )}
             dir={isRtl ? 'rtl' : 'ltr'}
         >
             <Box className={styles.stageMenuWrapper}>