diff --git a/src/App.js b/src/App.js index d966511f..e3cf2ccb 100644 --- a/src/App.js +++ b/src/App.js @@ -28,7 +28,7 @@ import ProgramSpeedController from './ProgramSpeedController'; import ProgramSerializer from './ProgramSerializer'; import ShareButton from './ShareButton'; import ActionsMenu from './ActionsMenu'; -import type { ActionToggleRegister, AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName } from './types'; +import type { ActionToggleRegister, AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName, SceneMode } from './types'; import WorldSelector from './WorldSelector'; import * as Utils from './Utils'; import './App.scss'; @@ -53,6 +53,7 @@ type AppContext = { type AppSettings = { language: string, addNodeExpandedMode: boolean, + sceneMode: SceneMode, theme: ThemeName, world: WorldName }; @@ -381,6 +382,7 @@ export class App extends React.Component { settings: { language: 'en', addNodeExpandedMode: true, + sceneMode: 'default', theme: 'default', world: 'default' }, @@ -716,6 +718,30 @@ export class App extends React.Component { }); } + handleExpandScene = () => { + if (this.state.settings.sceneMode === 'collapsed') { + this.setStateSettings({ + sceneMode: 'default' + }); + } else if (this.state.settings.sceneMode === 'default') { + this.setStateSettings({ + sceneMode: 'expanded' + }); + } + } + + handleCollapseScene = () => { + if (this.state.settings.sceneMode === 'expanded') { + this.setStateSettings({ + sceneMode: 'default' + }); + } else if (this.state.settings.sceneMode === 'default') { + this.setStateSettings({ + sceneMode: 'collapsed' + }); + } + } + render() { return ( @@ -724,6 +750,7 @@ export class App extends React.Component { role='main' onClick={this.handleRootClick} onKeyDown={this.handleRootKeyDown}> +

@@ -784,6 +811,8 @@ export class App extends React.Component {
@@ -990,6 +1019,16 @@ export class App extends React.Component { } } + if (this.state.settings.sceneMode !== prevState.settings.sceneMode) { + if (document.body) { + if (this.state.settings.sceneMode === 'default') { + document.body.className = ''; + } else { + document.body.className = `Scene-${this.state.settings.sceneMode}`; + } + } + } + /* Dash connection removed for version 0.5 if (this.state.dashConnectionStatus !== prevState.dashConnectionStatus) { console.log(this.state.dashConnectionStatus); diff --git a/src/App.scss b/src/App.scss index 278598fe..7819fb44 100644 --- a/src/App.scss +++ b/src/App.scss @@ -15,6 +15,10 @@ body { height: 100vh; } +.App__header-background { + display: none; +} + .App__header { margin: 0.5rem 0.5rem 0 0.5rem; padding: 0 1rem; @@ -230,3 +234,135 @@ body { overflow: scroll; } } + +.Scene-expanded .App__container { + grid-template-columns: 1fr auto 1fr; + grid-template-rows: min-content 1fr auto 1fr 90px; +} + +.Scene-expanded .App__header { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; +} + +.Scene-expanded .App__header-background { + display: block; + background-color: #000; + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; +} + +.Scene-expanded .App__header-row { + flex-direction: row; +} + +.Scene-expanded .App__header-audio-toggle { + margin: auto 0 auto auto; +} + +.Scene-expanded .App__scene-container { + margin: 0 0.5rem; + margin-right: 1rem; + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 3; + grid-row-end: 4; + max-width: 1500px; + max-height: 1000px; +} + +.Scene-expanded .App__command-palette { + display: none; +} + +.Scene-expanded .App__world-selector-container { + display: none; +} + +.Scene-expanded .App__program-block-editor { + display: none; +} + +.Scene-expanded .App__playAndShare-background { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 5; + grid-row-end: 6; +} + +.Scene-expanded .App__playAndShare-container { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 5; + grid-row-end: 6; +} + +.Scene-collapsed .App__container { + grid-template-columns: 1fr min-content minmax(auto, 30rem) minmax(auto, 55rem) 1fr; + grid-template-rows: 8rem 2rem 1fr 90px; +} + +.Scene-collapsed .App__header { + margin: 0.5rem 0.5rem 0 0.5rem; + padding: 0 1rem; + background-color: #000; + color: #FFF; + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 3; +} + +.Scene-collapsed .App__scene-container { + position: relative; + margin-top: 0.5rem; + margin-right: 0.5rem; + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + display: grid; + grid-template-columns: auto 1fr; +} + +.Scene-collapsed .App__scene-controls { + position: initial; + padding: 0; + margin: auto; + margin-left: 1rem; + grid-column-start: 2; + grid-column-end: 3; + display: grid; + grid-template-columns: 1fr; +} + +.Scene-collapsed .App__world-selector-container { + grid-column-start: 4; + grid-column-end: 5; + grid-row-start: 1; + grid-row-end: 3; +} + +.Scene-collapsed .App__command-palette { + background-color: #F1F1F1; + text-align: center; + margin: 0 0.5rem; + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 3; + grid-row-end: 4; + overflow: hidden; +} + +.Scene-collapsed .App__program-block-editor { + margin-right: 0.5rem; + grid-column-start: 3; + grid-column-end: 5; + grid-row-start: 3; + grid-row-end: 4; + height: auto; +} diff --git a/src/Scene.js b/src/Scene.js index 25c052a5..c3ee6f15 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -6,6 +6,8 @@ import Character from './Character'; import SceneDimensions from './SceneDimensions'; import { injectIntl } from 'react-intl'; import type {IntlShape} from 'react-intl'; +import { ReactComponent as ExpandIcon } from './svg/Expand.svg'; +import { ReactComponent as MinimizeIcon } from './svg/Minimize.svg'; import './Scene.scss'; @@ -15,7 +17,9 @@ export type SceneProps = { dimensions: SceneDimensions, characterState: CharacterState, world: WorldName, - intl: IntlShape + intl: IntlShape, + onClickCollapseScene: () => void, + onClickExpandScene: () => void }; class Scene extends React.Component { @@ -269,6 +273,20 @@ class Scene extends React.Component {
+
+ + +

); diff --git a/src/Scene.scss b/src/Scene.scss index cb5e231b..2101ccde 100644 --- a/src/Scene.scss +++ b/src/Scene.scss @@ -92,3 +92,59 @@ stroke-width: 0.03; stroke-linecap: round; } + +.Scene__resize-button-container { + position: absolute; + display: flex; + flex-direction: column; + top: 2rem; + right: 0; +} + +.Scene__resize-button { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + margin-top: 1rem; + margin-right: 1rem; + background-color: $c2lc-primary-button-color; +} + +.Scene__resize-button:focus { + outline: none; + box-shadow: 0 0 0 $c2lc-focus-indicator-width $c2lc-focus-indicator-color; +} + +.Scene__resize-button:hover { + box-shadow: 0 0 0 $c2lc-hover-indicator-width $c2lc-focus-indicator-color; + background-color: #e5e5e5; +} + +.Scene-collapsed .Scene__container { + grid-column-start: 1; + grid-column-end: 2; + height: 11rem; + max-width: 26rem; + grid-template-columns: 10px auto; + grid-template-rows: 20px auto; +} + +.Scene-collapsed .Scene__background { + left: 0.15rem; + top: 0.75rem; + height: 10.5rem; +} + +.Scene-collapsed .Scene > svg { + width: 26rem; +} + +.Scene-collapsed .Scene__column-header > svg { + width: 26rem; + height: 20px; +} + +.Scene-collapsed .Scene__row-header > svg { + width: 10px; + height: 16rem; +} diff --git a/src/WorldSelector.scss b/src/WorldSelector.scss index 939803a0..f56e130a 100644 --- a/src/WorldSelector.scss +++ b/src/WorldSelector.scss @@ -45,3 +45,13 @@ padding-left: 0.2rem; } +.Scene-collapsed .WorldSelector { + display: flex; + align-items: center; +} + +.Scene-collapsed .WorldIcon { + margin-left: 2rem; + margin-top: 0; +} + diff --git a/src/messages.json b/src/messages.json index 951421ed..0a72c3f6 100644 --- a/src/messages.json +++ b/src/messages.json @@ -120,6 +120,8 @@ "AudioFeedbackToggleSwitch.audioFeedback": "Audio feedback", "Scene.inBounds": "Scene, {numColumns} by {numRows} grid with a character at column {xPos}, row {yPos} facing {direction}", "Scene.outOfBounds": "Scene, {numColumns} by {numRows} grid with a character outside of the scene {relativeDirection} the scene, facing {direction}", + "Scene.expand": "Expand the scene", + "Scene.minimize": "Minimize the scene", "StopButton": "Stop", "RefreshButton": "Refresh", "RelativeDirection.0": "above", diff --git a/src/svg/Expand.svg b/src/svg/Expand.svg new file mode 100644 index 00000000..219a5e32 --- /dev/null +++ b/src/svg/Expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/svg/Minimize.svg b/src/svg/Minimize.svg new file mode 100644 index 00000000..e197a6bb --- /dev/null +++ b/src/svg/Minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/types.js b/src/types.js index 02651de8..fd050886 100644 --- a/src/types.js +++ b/src/types.js @@ -16,6 +16,8 @@ export type ThemeName = 'default' | 'forest' | 'space'; export type WorldName = 'default' | 'forest' | 'space'; +export type SceneMode = 'default' | 'expanded' | 'collapsed'; + export type Program = Array; // use running, paused, stopped