From 3ee4fdbdf365382347b7d4795029e10501c9a8a1 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 12 Oct 2016 16:40:35 -0400
Subject: [PATCH] making 1.4-style gui
---
src/components/blocks.js | 7 +++++++
src/components/green-flag.js | 10 +++++++++-
src/components/gui.js | 11 ++++++++++-
src/components/sprite-selector.js | 26 ++++++++++++++++++--------
src/components/stage.js | 9 +++++++--
src/components/stop-all.js | 10 +++++++++-
6 files changed, 60 insertions(+), 13 deletions(-)
diff --git a/src/components/blocks.js b/src/components/blocks.js
index 39882d584..73c173a96 100644
--- a/src/components/blocks.js
+++ b/src/components/blocks.js
@@ -15,6 +15,13 @@ class Blocks extends React.Component {
<div
className="scratch-blocks"
ref="scratchBlocks"
+ style={{
+ position: 'absolute',
+ top: 0,
+ right: '40%',
+ bottom: 0,
+ left: 0
+ }}
/>
);
}
diff --git a/src/components/green-flag.js b/src/components/green-flag.js
index c7f9e6d14..54566eff3 100644
--- a/src/components/green-flag.js
+++ b/src/components/green-flag.js
@@ -11,7 +11,15 @@ class GreenFlag extends React.Component {
}
render () {
return (
- <div className="scratch-green-flag">
+ <div
+ className="scratch-green-flag"
+ style={{
+ position: 'absolute',
+ top: 380,
+ right: 440,
+ width: 50
+ }}
+ >
<button onClick={this.onClick}>{this.props.title}</button>
</div>
);
diff --git a/src/components/gui.js b/src/components/gui.js
index 4b74a3718..3fc6c3792 100644
--- a/src/components/gui.js
+++ b/src/components/gui.js
@@ -56,7 +56,16 @@ class GUI extends React.Component {
}
render () {
return (
- <div className="scratch-gui">
+ <div
+ className="scratch-gui"
+ style={{
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0
+ }}
+ >
<GreenFlag vm={this.props.vm} />
<StopAll vm={this.props.vm} />
<Stage stageRef={stage => this.stage = stage} />
diff --git a/src/components/sprite-selector.js b/src/components/sprite-selector.js
index 804f458e7..bb09f52b5 100644
--- a/src/components/sprite-selector.js
+++ b/src/components/sprite-selector.js
@@ -22,15 +22,25 @@ class SpriteSelector extends React.Component {
}
render () {
return (
- <select
- multiple
- value={[this.state.targets.editingTarget]}
- onChange={this.onChange}
+ <div
+ style={{
+ position: 'absolute',
+ top: 380,
+ right: 10,
+ }}
>
- {this.state.targets.targetList.map(
- target => <option value={target[0]} key={target[0]}>{target[1]}</option>
- )}
- </select>
+ <select
+ multiple
+ value={[this.state.targets.editingTarget]}
+ onChange={this.onChange}
+
+ >
+ {this.state.targets.targetList.map(
+ target => <option value={target[0]} key={target[0]}>{target[1]}</option>
+ )}
+ </select>
+ </div>
+
);
}
}
diff --git a/src/components/stage.js b/src/components/stage.js
index 2f872371b..deb000c0f 100644
--- a/src/components/stage.js
+++ b/src/components/stage.js
@@ -6,8 +6,13 @@ class Stage extends React.Component {
<canvas
className="scratch-stage"
ref={this.props.stageRef}
- width={this.props.width}
- height={this.props.height}
+ style={{
+ position: 'absolute',
+ top: 10,
+ right: 10,
+ width: this.props.width,
+ height: this.props.height,
+ }}
/>
);
}
diff --git a/src/components/stop-all.js b/src/components/stop-all.js
index 8f9f73f43..f50cd2167 100644
--- a/src/components/stop-all.js
+++ b/src/components/stop-all.js
@@ -11,7 +11,15 @@ class StopAll extends React.Component {
}
render () {
return (
- <div className="scratch-stop-all">
+ <div
+ className="scratch-stop-all"
+ style={{
+ position: 'absolute',
+ top: 380,
+ right: 400,
+ width: 50
+ }}
+ >
<button onClick={this.onClick}>{this.props.title}</button>
</div>
);
--
GitLab