From 1baec2cb0479e948cf9085a9b0665f13cafc5871 Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Thu, 18 Mar 2021 13:36:20 -0400 Subject: [PATCH 1/6] C2LC-292: Implement handlers and logics to resize the scene in App --- src/App.js | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 26f63aa2..18eba636 100644 --- a/src/App.js +++ b/src/App.js @@ -50,7 +50,8 @@ type AppContext = { type AppSettings = { language: string, addNodeExpandedMode: boolean, - theme: ThemeName + theme: ThemeName, + sceneMode: 'expanded' }; type AppProps = { @@ -103,7 +104,8 @@ export class App extends React.Component { settings: { language: 'en', addNodeExpandedMode: true, - theme: 'default' + theme: 'default', + sceneMode: 'default' }, dashConnectionStatus: 'notConnected', showDashConnectionError: false, @@ -551,6 +553,30 @@ export class App extends React.Component { this.setStateSettings({ theme }); } + 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 ( @@ -613,6 +639,8 @@ export class App extends React.Component { dimensions={this.state.sceneDimensions} characterState={this.state.characterState} theme={this.state.settings.theme} + onClickExpandScene={this.handleExpandScene} + onClickCollapseScene={this.handleCollapseScene} />
@@ -779,6 +807,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); From d28d5f0f7eea7c5d39a36582c3102cc786ed8648 Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Thu, 18 Mar 2021 13:36:46 -0400 Subject: [PATCH 2/6] C2LC-292: Work in progress --- src/App.scss | 104 +++++++++++++++++++++++++++++++++++++++++++++++++ src/Scene.js | 4 ++ src/Scene.scss | 17 ++++++++ 3 files changed, 125 insertions(+) diff --git a/src/App.scss b/src/App.scss index aa4e7a24..24e34106 100644 --- a/src/App.scss +++ b/src/App.scss @@ -212,3 +212,107 @@ body { overflow: scroll; } } + +.Scene-expanded .App__container { + grid-template-columns: 1fr auto 1fr; + grid-template-rows: min-content auto 90px; +} + +.Scene-expanded .App__header { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; +} + +.Scene-expanded .App__scene-container { + margin: 0 0.5rem; + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; +} + +.Scene-expanded .App__command-palette { + 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: 3; + grid-row-end: 4; +} + +.Scene-expanded .App__playAndShare-container { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 3; + grid-row-end: 4; +} + +.Scene-collapsed .App__container { + grid-template-columns: 1fr min-content auto auto 1fr; + grid-template-rows: 8rem min-content 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: 5; + grid-row-start: 1; + grid-row-end: 2; + display: grid; + grid-template-columns: 1fr 1fr; + min-height: 8rem; + min-width: 100%; +} + +.Scene-collapsed .App__scene-controls { + padding: 1rem 0; + grid-column-start: 2; + grid-column-end: 3; + display: grid; + grid-template-columns: 1fr; +} + +.Scene-collapsed .App__scene-container .Scene-container { + grid-column-start: 1; + grid-column-end: 2; +} +.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 79281314..45d234d1 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -220,6 +220,10 @@ class Scene extends React.Component { +
+ + +
); } diff --git a/src/Scene.scss b/src/Scene.scss index be01a525..6a96cb2d 100644 --- a/src/Scene.scss +++ b/src/Scene.scss @@ -2,6 +2,7 @@ // Grid for Scene-container is set in App.scss .Scene-container { + position: relative; height: 100%; overflow: scroll; } @@ -28,3 +29,19 @@ stroke-width: 0.03; stroke-linecap: round; } + +.Scene__resize-button-container { + position: absolute; + display: flex; + flex-direction: column; + top: 0; + right: 0; +} + +.Scene__resize-button { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + margin-top: 1rem; + margin-right: 1rem; +} From 36a6b5be56683a6e656b6b29dc3e283dd3812c6c Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Mon, 29 Mar 2021 15:50:56 -0400 Subject: [PATCH 3/6] C2LC-292: Add new svg assets for expand and minimize scene buttons --- src/svg/Expand.svg | 3 +++ src/svg/Minimize.svg | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 src/svg/Expand.svg create mode 100644 src/svg/Minimize.svg 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 @@ + + + From 428da5b3b362dc94631104ef05b316fcaa81f49a Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Mon, 29 Mar 2021 15:52:19 -0400 Subject: [PATCH 4/6] C2LC-292: Add Scene expand and minimize buttons --- src/Scene.js | 16 ++++++++++++++-- src/messages.json | 2 ++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index 5a26c2ce..2e0a211e 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'; @@ -270,8 +272,18 @@ class Scene extends React.Component {
- - + +
diff --git a/src/messages.json b/src/messages.json index adbd7def..1cdf01ef 100644 --- a/src/messages.json +++ b/src/messages.json @@ -100,6 +100,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", From 9bc85ee05f517f8929e37f2fa80cd8ddd4c3cbbc Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Mon, 29 Mar 2021 15:52:48 -0400 Subject: [PATCH 5/6] C2LC-292: Update layout to support expanded and minimized scene mode --- src/App.js | 1 + src/App.scss | 67 ++++++++++++++++++++++++++++++------------ src/Scene.scss | 40 +++++++++++++++++++++++++ src/WorldSelector.scss | 10 +++++++ 4 files changed, 100 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 16b92ac8..b5e6451a 100644 --- a/src/App.js +++ b/src/App.js @@ -701,6 +701,7 @@ export class App extends React.Component { role='main' onClick={this.handleRootClick} onKeyDown={this.handleRootKeyDown}> +

diff --git a/src/App.scss b/src/App.scss index efca7ab9..3eccc5a2 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; @@ -95,7 +99,6 @@ body { margin-right: 0.5rem; margin-top: 0.5rem; margin-left: 1rem; - width: 6rem; } .App__command-palette { @@ -232,28 +235,52 @@ body { .Scene-expanded .App__container { grid-template-columns: 1fr auto 1fr; - grid-template-rows: min-content auto 90px; + 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: 2; - grid-row-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; } @@ -261,20 +288,20 @@ body { .Scene-expanded .App__playAndShare-background { grid-column-start: 1; grid-column-end: 4; - grid-row-start: 3; - grid-row-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: 3; - grid-row-end: 4; + grid-row-start: 5; + grid-row-end: 6; } .Scene-collapsed .App__container { - grid-template-columns: 1fr min-content auto auto 1fr; - grid-template-rows: 8rem min-content 1fr 90px; + grid-template-columns: 1fr min-content minmax(auto, 30rem) minmax(auto, 55rem) 1fr; + grid-template-rows: 8rem 2rem 1fr 90px; } .Scene-collapsed .App__header { @@ -293,27 +320,31 @@ body { margin-top: 0.5rem; margin-right: 0.5rem; grid-column-start: 3; - grid-column-end: 5; + grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; display: grid; - grid-template-columns: 1fr 1fr; - min-height: 8rem; - min-width: 100%; + grid-template-columns: auto 1fr; } .Scene-collapsed .App__scene-controls { - padding: 1rem 0; + 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__scene-container .Scene-container { - grid-column-start: 1; - grid-column-end: 2; +.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; diff --git a/src/Scene.scss b/src/Scene.scss index 56a0ef6e..6919243f 100644 --- a/src/Scene.scss +++ b/src/Scene.scss @@ -107,4 +107,44 @@ 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 702d0da4..39a9ddc8 100644 --- a/src/WorldSelector.scss +++ b/src/WorldSelector.scss @@ -47,3 +47,13 @@ padding-left: 0.2rem; } +.Scene-collapsed .WorldSelector { + display: flex; + align-items: center; +} + +.Scene-collapsed .WorldIcon { + margin-left: 2rem; + margin-top: 0; +} + From f2b24771e18a098fdb83be89cd144afa1ea1ee9a Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Mon, 29 Mar 2021 16:02:16 -0400 Subject: [PATCH 6/6] C2LC-292: Fix flow errors --- src/App.js | 4 ++-- src/Scene.js | 4 +++- src/types.js | 2 ++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index b5e6451a..d5c6546a 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ import ProgramSpeedController from './ProgramSpeedController'; import ProgramSerializer from './ProgramSerializer'; import ShareButton from './ShareButton'; import WorldSelector from './WorldSelector'; -import type { AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName } from './types'; +import type { AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName, SceneMode } from './types'; import * as Utils from './Utils'; import './App.scss'; import './Themes.css'; @@ -52,7 +52,7 @@ type AppSettings = { language: string, addNodeExpandedMode: boolean, theme: ThemeName, - sceneMode: 'expanded', + sceneMode: SceneMode, world: WorldName }; diff --git a/src/Scene.js b/src/Scene.js index 2e0a211e..c3ee6f15 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -17,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 { diff --git a/src/types.js b/src/types.js index acbe799b..c9dca14d 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