-
-
- 
+ );
+ } else {
+ header = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Save
-
+
+ Save
+
+
);
}
}
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index d3acba94e..593851a41 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import VM from 'scratch-vm';
-import {setZoomed} from '../reducers/zoom';
+import {setStageSize, setFullScreen, STAGE_SIZES} from '../reducers/stage-size';
import {connect} from 'react-redux';
@@ -22,19 +22,20 @@ class StageHeader extends React.Component {
}
StageHeader.propTypes = {
- height: PropTypes.number,
- isZoomed: PropTypes.bool,
- vm: PropTypes.instanceOf(VM).isRequired,
- width: PropTypes.number
+ stageSize: PropTypes.oneOf(Object.keys(STAGE_SIZES)),
+ vm: PropTypes.instanceOf(VM).isRequired
};
const mapStateToProps = state => ({
- isZoomed: state.isZoomed
+ stageSize: state.stageSize.stageSize,
+ isFullScreen: state.stageSize.isFullScreen
});
const mapDispatchToProps = dispatch => ({
- onZoom: () => dispatch(setZoomed(true)),
- onUnzoom: () => dispatch(setZoomed(false))
+ onSetStageLarge: () => dispatch(setStageSize(STAGE_SIZES.large)),
+ onSetStageSmall: () => dispatch(setStageSize(STAGE_SIZES.small)),
+ onSetStageFull: () => dispatch(setFullScreen(true)),
+ onSetStageUnFull: () => dispatch(setFullScreen(false))
});
export default connect(
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 9f76aa7ab..cb2a38963 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -57,7 +57,7 @@ class Stage extends React.Component {
this.props.height !== nextProps.height ||
this.props.isColorPicking !== nextProps.isColorPicking ||
this.state.colorInfo !== nextState.colorInfo ||
- this.props.isZoomed !== nextProps.isZoomed ||
+ this.props.isFullScreen !== nextProps.isFullScreen ||
this.state.question !== nextState.question;
}
componentDidUpdate (prevProps) {
@@ -279,7 +279,7 @@ class Stage extends React.Component {
Stage.propTypes = {
height: PropTypes.number,
isColorPicking: PropTypes.bool,
- isZoomed: PropTypes.bool,
+ isFullScreen: PropTypes.bool.isRequired,
onActivateColorPicker: PropTypes.func,
onDeactivateColorPicker: PropTypes.func,
vm: PropTypes.instanceOf(VM).isRequired,
@@ -288,7 +288,7 @@ Stage.propTypes = {
const mapStateToProps = state => ({
isColorPicking: state.colorPicker.active,
- isZoomed: state.isZoomed
+ isFullScreen: state.stageSize.isFullScreen
});
const mapDispatchToProps = dispatch => ({
diff --git a/src/css/colors.css b/src/css/colors.css
index d524795cd..e270217f9 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -16,4 +16,6 @@ $sound-tertiary: #A63FA6;
$control-primary: #FFAB19;
+$data-primary: #FF8C1A;
+
$form-border: #E9EEF2;
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 83ede0203..d49144b4f 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -8,14 +8,14 @@ import monitorLayoutReducer from './monitor-layout';
import targetReducer from './targets';
import toolboxReducer from './toolbox';
import vmReducer from './vm';
-import zoomReducer from './zoom';
+import stageSizeReducer from './stage-size';
import {ScratchPaintReducer} from 'scratch-paint';
export default combineReducers({
colorPicker: colorPickerReducer,
customProcedures: customProceduresReducer,
intl: intlReducer,
- isZoomed: zoomReducer,
+ stageSize: stageSizeReducer,
modals: modalReducer,
monitors: monitorReducer,
monitorLayout: monitorLayoutReducer,
diff --git a/src/reducers/stage-size.js b/src/reducers/stage-size.js
new file mode 100644
index 000000000..ea2750e34
--- /dev/null
+++ b/src/reducers/stage-size.js
@@ -0,0 +1,55 @@
+const SET_STAGE_SIZE = 'scratch-gui/StageSize/SET_STAGE_SIZE';
+const SET_FULL_SCREEN = 'scratch-gui/StageSize/SET_FULL_SCREEN';
+
+const initialState = {
+ isFullScreen: false,
+ stageSize: 'large'
+};
+
+// stage size constants
+const STAGE_SIZES = {
+ small: 'small',
+ large: 'large'
+};
+
+const reducer = function (state, action) {
+ if (typeof state === 'undefined') state = initialState;
+ switch (action.type) {
+ case SET_STAGE_SIZE:
+ return {
+ isFullScreen: state.isFullScreen,
+ stageSize: action.stageSize
+ };
+ case SET_FULL_SCREEN:
+ return {
+ isFullScreen: action.isFullScreen,
+ stageSize: state.stageSize
+ };
+ default:
+ return state;
+ }
+};
+
+const setStageSize = function (stageSize) {
+ return {
+ type: SET_STAGE_SIZE,
+ stageSize: stageSize
+ };
+};
+
+// `isFullScreen` is a separate value because "stage size" does not
+// actually apply to full screen mode, so they are treated as separate
+// values to be assessed.
+const setFullScreen = function (isFullScreen) {
+ return {
+ type: SET_FULL_SCREEN,
+ isFullScreen: isFullScreen
+ };
+};
+
+export {
+ reducer as default,
+ setStageSize,
+ setFullScreen,
+ STAGE_SIZES
+};
diff --git a/src/reducers/zoom.js b/src/reducers/zoom.js
deleted file mode 100644
index 3cd0f5f7f..000000000
--- a/src/reducers/zoom.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const SET_ZOOMED = 'scratch-gui/Zoomed/SET_ZOOMED';
-const defaultZoomed = false;
-const initialState = defaultZoomed;
-
-const reducer = function (state, action) {
- if (typeof state === 'undefined') state = initialState;
- switch (action.type) {
- case SET_ZOOMED:
- return action.isZoomed;
- default:
- return state;
- }
-};
-const setZoomed = function (isZoomed) {
- return {
- type: SET_ZOOMED,
- isZoomed: isZoomed
- };
-};
-export {
- reducer as default,
- setZoomed
-};
diff --git a/test/integration/test.js b/test/integration/test.js
index 58b488ecd..8668fce2a 100644
--- a/test/integration/test.js
+++ b/test/integration/test.js
@@ -143,7 +143,7 @@ describe('costumes, sounds and variables', () => {
const projectId = '96708228';
await loadUri(`${uri}#${projectId}`);
await new Promise(resolve => setTimeout(resolve, 2000));
- await clickXpath('//img[@title="Zoom Control"]');
+ await clickXpath('//img[@title="Full Screen Control"]');
await clickXpath('//img[@title="Go"]');
await new Promise(resolve => setTimeout(resolve, 2000));
await clickXpath('//img[@title="Stop"]');
@@ -235,7 +235,9 @@ describe('costumes, sounds and variables', () => {
await expect(logs).toEqual([]);
});
- test('Localization', async () => {
+ // Skipped temporarily while the language selector is marked as
+ // "Coming Soon"
+ test.skip('Localization', async () => {
await loadUri(uri);
await clickText('Blocks');
await clickText('Extensions');
-
- 
+