From 84dd45fb4fd4a0bc3e5ba28b362d1220332ab738 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Tue, 4 Dec 2018 07:47:12 -0500
Subject: [PATCH] wip
---
src/components/stage-header/stage-header.css | 6 +++
src/components/stage-header/stage-header.jsx | 45 ++++++++++++++------
src/containers/stage-header.jsx | 2 +
src/reducers/gui.js | 14 ++++++
src/reducers/mode.js | 1 +
5 files changed, 55 insertions(+), 13 deletions(-)
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index e0695fb61..f5be66ac2 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -26,6 +26,12 @@
padding-bottom: $space;
}
+.embed-scratch-logo img {
+ height: 1.6rem;
+ vertical-align: middle;
+ opacity: .6;
+}
+
.stage-size-row {
display: flex;
}
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 43414179b..c72995a7e 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -16,6 +16,7 @@ import largeStageIcon from './icon--large-stage.svg';
import smallStageIcon from './icon--small-stage.svg';
import unFullScreenIcon from './icon--unfullscreen.svg';
+import scratchLogo from '../menu-bar/scratch-logo.svg';
import styles from './stage-header.css';
const messages = defineMessages({
@@ -48,6 +49,7 @@ const messages = defineMessages({
const StageHeaderComponent = function (props) {
const {
+ isEmbedded,
isFullScreen,
isPlayerOnly,
onKeyPress,
@@ -63,6 +65,34 @@ const StageHeaderComponent = function (props) {
if (isFullScreen) {
const stageDimensions = getStageDimensions(null, true);
+ const stageButton = isEmbedded ? (
+ <div className={styles.embedScratchLogo}>
+ <a
+ href="https://scratch.mit.edu"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ <img
+ alt="Scratch"
+ src={scratchLogo}
+ />
+ </a>
+ </div>
+ ) : (
+ <Button
+ className={styles.stageButton}
+ onClick={onSetStageUnFull}
+ onKeyPress={onKeyPress}
+ >
+ <img
+ alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
+ className={styles.stageButtonIcon}
+ draggable={false}
+ src={unFullScreenIcon}
+ title={props.intl.formatMessage(messages.fullscreenControl)}
+ />
+ </Button>
+ );
header = (
<Box className={styles.stageHeaderWrapperOverlay}>
<Box
@@ -70,19 +100,7 @@ const StageHeaderComponent = function (props) {
style={{width: stageDimensions.width}}
>
<Controls vm={vm} />
- <Button
- className={styles.stageButton}
- onClick={onSetStageUnFull}
- onKeyPress={onKeyPress}
- >
- <img
- alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
- className={styles.stageButtonIcon}
- draggable={false}
- src={unFullScreenIcon}
- title={props.intl.formatMessage(messages.fullscreenControl)}
- />
- </Button>
+ {stageButton}
</Box>
</Box>
);
@@ -164,6 +182,7 @@ const mapStateToProps = state => ({
StageHeaderComponent.propTypes = {
intl: intlShape,
+ isEmbedded: PropTypes.bool.isRequired,
isFullScreen: PropTypes.bool.isRequired,
isPlayerOnly: PropTypes.bool.isRequired,
onKeyPress: PropTypes.func.isRequired,
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 11ffab433..baf27689b 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -43,6 +43,7 @@ class StageHeader extends React.Component {
}
StageHeader.propTypes = {
+ isEmbedded: PropTypes.bool,
isFullScreen: PropTypes.bool,
isPlayerOnly: PropTypes.bool,
onSetStageUnFull: PropTypes.func.isRequired,
@@ -52,6 +53,7 @@ StageHeader.propTypes = {
const mapStateToProps = state => ({
stageSizeMode: state.scratchGui.stageSize.stageSize,
+ isEmbedded: state.scratchGui.mode.isEmbedded,
isFullScreen: state.scratchGui.mode.isFullScreen,
isPlayerOnly: state.scratchGui.mode.isPlayerOnly
});
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 41b5fbce0..18bfe4ab0 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -83,6 +83,19 @@ const initFullScreen = function (currentState) {
);
};
+const initEmbedded = function (currentState) {
+ return Object.assign(
+ {},
+ currentState,
+ {mode: {
+ isEmbedded: true,
+ isFullScreen: true,
+ isPlayerOnly: true,
+ hasEverEnteredEditor: false
+ }}
+ );
+};
+
const initTutorialCard = function (currentState, deckId) {
return Object.assign(
{},
@@ -145,6 +158,7 @@ export {
guiReducer as default,
guiInitialState,
guiMiddleware,
+ initEmbedded,
initFullScreen,
initPlayer,
initPreviewInfo,
diff --git a/src/reducers/mode.js b/src/reducers/mode.js
index 739ae163d..bf3c72d38 100644
--- a/src/reducers/mode.js
+++ b/src/reducers/mode.js
@@ -2,6 +2,7 @@ const SET_FULL_SCREEN = 'scratch-gui/mode/SET_FULL_SCREEN';
const SET_PLAYER = 'scratch-gui/mode/SET_PLAYER';
const initialState = {
+ isEmbedded: false,
isFullScreen: false,
isPlayerOnly: false,
hasEverEnteredEditor: true
--
GitLab