diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css index b57aa4c3a..47b173ff0 100644 --- a/src/components/loader/loader.css +++ b/src/components/loader/loader.css @@ -2,11 +2,13 @@ @import "../../css/z-index.css"; .background { + /* tw: fixes to make the loading screen appear properly when scrolled, in wrong size element, etc. */ + position: sticky; position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; z-index: $z-index-loader; display: flex; justify-content: center; diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 17735e869..7e5a5f493 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -567,19 +567,30 @@ class MenuBar extends React.Component { /> )} - {(toggleCloudVariables, {cloud}) => ( - - {cloud ? ( - + {(toggleCloudVariables, {cloud, canUseCloudVariables}) => ( + + {canUseCloudVariables ? ( + cloud ? ( + + ) : ( + + ) ) : ( )} diff --git a/src/components/tw-home/about/about.jsx b/src/components/tw-home/about/about.jsx index 61b01cd53..325154b62 100644 --- a/src/components/tw-home/about/about.jsx +++ b/src/components/tw-home/about/about.jsx @@ -5,7 +5,7 @@ const About = () => { return (

({ username: state.scratchGui.tw.username, - cloud: state.scratchGui.tw.cloud + cloud: state.scratchGui.tw.cloud, + canUseCloudVariables: !state.scratchGui.mode.hasEverEnteredEditor }); const mapDispatchToProps = dispatch => ({ diff --git a/src/lib/cloud-manager-hoc.jsx b/src/lib/cloud-manager-hoc.jsx index 43a0c1089..f160e87b3 100644 --- a/src/lib/cloud-manager-hoc.jsx +++ b/src/lib/cloud-manager-hoc.jsx @@ -145,9 +145,7 @@ const cloudManagerHOC = function (WrappedComponent) { projectId: state.scratchGui.projectState.projectId, hasCloudPermission: state.scratchGui.tw ? state.scratchGui.tw.cloud : false, username: state.scratchGui.tw ? state.scratchGui.tw.username : '', - // once the new player becomes the default, switch to this - // canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave) - canModifyCloudData: true + canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave) }; }; diff --git a/src/playground/editor.css b/src/playground/editor.css deleted file mode 100644 index edb710e70..000000000 --- a/src/playground/editor.css +++ /dev/null @@ -1,15 +0,0 @@ -html, -body, -.app { - /* probably unecessary, transitional until layout is refactored */ - width: 100%; - height: 100%; - margin: 0; - - /* Setting min height/width makes the UI scroll below those sizes */ - min-width: 1024px; - min-height: 640px; /* Min height to fit sprite/backdrop button */ -} - -/* @todo: move globally? Safe / side FX, for blocks particularly? */ -* { box-sizing: border-box; } diff --git a/src/playground/gui.css b/src/playground/gui.css index 9f20313d0..8abadbb80 100644 --- a/src/playground/gui.css +++ b/src/playground/gui.css @@ -3,8 +3,10 @@ p { } .stage-only { - width: 480px; - margin: 24px auto 0; + position: absolute; + top: 0; + left: 0; + width: 100%; } .editor { @@ -19,7 +21,17 @@ p { box-sizing: border-box; } +.center { + width: 100%; + height: 100%; +} + +.stage-only .center { + width: 480px; + margin: auto; +} + /* make sure this isn't "see-inside-button" or anything because that might cause the dev tools to wrongly reinject */ .see-inside { - float: right; + text-align: right; } diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx index a4aac9035..7e08d9245 100644 --- a/src/playground/render-gui.jsx +++ b/src/playground/render-gui.jsx @@ -21,37 +21,43 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') { import styles from './gui.css'; +import MenuBar from '../components/menu-bar/menu-bar.jsx'; import ProjectInput from '../components/tw-project-input/project-input.jsx'; import About from '../components/tw-home/about/about.jsx'; import Title from '../components/tw-home/title/title.jsx'; import SeeInside from './tw-see-inside/see-inside.jsx'; const Player = ({isPlayerOnly, projectId}) => ( - +

{isPlayerOnly ? ( - + + ) : null} +
+ {isPlayerOnly ? ( - <About /> - </Box> - ) : null} - <GUI - onClickLogo={onClickLogo} - cloudHost={'cirrus.garbomuffin.com'} - canSave={false} - canEditTitle - enableCommunity - isPlayerOnly={isPlayerOnly} - projectId={projectId} - /> - {isPlayerOnly ? ( - <Box> - <ProjectInput /> - <div className={styles.seeInside}> - <SeeInside /> + ) : null} + <GUI + onClickLogo={onClickLogo} + cloudHost={'cirrus.garbomuffin.com'} + canSave={false} + canEditTitle + enableCommunity + isPlayerOnly={isPlayerOnly} + projectId={projectId} + /> + {isPlayerOnly ? ( + <div className="about"> + <ProjectInput /> + <div className={styles.seeInside}> + <SeeInside /> + </div> + <About /> </div> - </Box> - ) : null} - </Box> + ) : null} + </div> + </div> ); Player.propTypes = {