From 7be28e2a76166566030fdbc788feaa57024543f7 Mon Sep 17 00:00:00 2001 From: Davor Hrg Date: Mon, 4 Oct 2021 23:37:18 +0200 Subject: [PATCH 1/6] Update menuConfig.tsx --- app/web/src/components/EditorMenu/menuConfig.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/web/src/components/EditorMenu/menuConfig.tsx b/app/web/src/components/EditorMenu/menuConfig.tsx index 9b252a3..8a6a933 100644 --- a/app/web/src/components/EditorMenu/menuConfig.tsx +++ b/app/web/src/components/EditorMenu/menuConfig.tsx @@ -68,6 +68,16 @@ const viewMenuConfig: EditorMenuConfig = { label: 'View', disabled: false, items: [ + { + label: 'Hide console', + shortcut: 'ctrl+shift+c', + shortcutLabel: 'Ctrl Shift C', + Component: (props) => { + const { config, thunkDispatch } = props + config.callback = () => thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}}) + return + }, + }, { label: 'Reset layout', shortcut: 'ctrl+shift+r', -- 2.39.5 From 04f5413b113f62f0ffb6fa66076a8c104addfb23 Mon Sep 17 00:00:00 2001 From: Davor Hrg Date: Sun, 10 Oct 2021 23:45:03 +0200 Subject: [PATCH 2/6] Revert "Update menuConfig.tsx" This reverts commit 7be28e2a76166566030fdbc788feaa57024543f7. --- app/web/src/components/EditorMenu/menuConfig.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/app/web/src/components/EditorMenu/menuConfig.tsx b/app/web/src/components/EditorMenu/menuConfig.tsx index 8a6a933..9b252a3 100644 --- a/app/web/src/components/EditorMenu/menuConfig.tsx +++ b/app/web/src/components/EditorMenu/menuConfig.tsx @@ -68,16 +68,6 @@ const viewMenuConfig: EditorMenuConfig = { label: 'View', disabled: false, items: [ - { - label: 'Hide console', - shortcut: 'ctrl+shift+c', - shortcutLabel: 'Ctrl Shift C', - Component: (props) => { - const { config, thunkDispatch } = props - config.callback = () => thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}}) - return - }, - }, { label: 'Reset layout', shortcut: 'ctrl+shift+r', -- 2.39.5 From c6e46d14755c483182e78ff8de8919a37230a63f Mon Sep 17 00:00:00 2001 From: Davor Hrg Date: Mon, 11 Oct 2021 00:08:06 +0200 Subject: [PATCH 3/6] second attempt --- .../components/IdeSideBar/sidebarConfig.tsx | 31 ++++++++++++------- app/web/src/helpers/hooks/useIdeState.ts | 2 ++ 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/app/web/src/components/IdeSideBar/sidebarConfig.tsx b/app/web/src/components/IdeSideBar/sidebarConfig.tsx index 11925e5..5659a38 100644 --- a/app/web/src/components/IdeSideBar/sidebarConfig.tsx +++ b/app/web/src/components/IdeSideBar/sidebarConfig.tsx @@ -105,18 +105,25 @@ const settingsConfig: settingsConfig[] = [ { title: 'Console', name: 'console', - Content: () => ( -
-

- Coming Soon -

-
-

- We're building configuration settings for the Viewer pane now. Join us - on if you want to lend a hand! -

-
- ), + Content: () => { + const { state, thunkDispatch } = useIdeContext() + return ( +
+
  • +
    Visible
    + { + state.consoleVisible = !state.consoleVisible + if (state.consoleVisible) + thunkDispatch({ type: 'resetLayout'}) + else + thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}}) + }} + checked={state.consoleVisible}/> +
    • +
    + ) + }, }, ] diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index aaa880f..8e2a79e 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -57,6 +57,7 @@ export interface State { isLoading: boolean threeInstance: RootState sideTray: string[] // could probably be an array of a union type + consoleVisible: boolean } const code = '' @@ -93,6 +94,7 @@ export const initialState: State = { isLoading: false, threeInstance: null, sideTray: [], + consoleVisible: true, } const reducer = (state: State, { type, payload }): State => { -- 2.39.5 From 0fda7ebbbbb9b230040479fb85781019ef66570f Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Mon, 11 Oct 2021 22:23:23 +1100 Subject: [PATCH 4/6] Update mosaic tree to remove and add the console. --- .../components/IdeContainer/IdeContainer.tsx | 2 +- .../components/IdeSideBar/sidebarConfig.tsx | 90 ++++++++++++++++--- app/web/src/helpers/hooks/useIdeState.ts | 4 +- 3 files changed, 80 insertions(+), 16 deletions(-) diff --git a/app/web/src/components/IdeContainer/IdeContainer.tsx b/app/web/src/components/IdeContainer/IdeContainer.tsx index 0286838..ab96998 100644 --- a/app/web/src/components/IdeContainer/IdeContainer.tsx +++ b/app/web/src/components/IdeContainer/IdeContainer.tsx @@ -110,7 +110,7 @@ const IdeContainer = () => { }} value={state.layout} onChange={(newLayout) => - thunkDispatch({ type: 'setLayout', payload: { message: newLayout } }) + thunkDispatch({ type: 'setLayout', payload: newLayout }) } onRelease={handleViewerSizeUpdate} /> diff --git a/app/web/src/components/IdeSideBar/sidebarConfig.tsx b/app/web/src/components/IdeSideBar/sidebarConfig.tsx index 5659a38..eaee359 100644 --- a/app/web/src/components/IdeSideBar/sidebarConfig.tsx +++ b/app/web/src/components/IdeSideBar/sidebarConfig.tsx @@ -1,7 +1,8 @@ -import React, { ReactNode } from 'react' +import { ReactNode } from 'react' import { SvgNames } from 'src/components/Svg/Svg' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' - +import { createRemoveUpdate, updateTree } from 'react-mosaic-component' +import type { MosaicPath } from 'react-mosaic-component' interface SidebarConfigType { name: string icon: SvgNames @@ -9,6 +10,39 @@ interface SidebarConfigType { panel: ReactNode | null } +interface MosaicTree { + first: string | MosaicTree + second: string | MosaicTree +} + +const getPathById = ( + tree: MosaicTree, + id: string, + path: MosaicPath = [] +): MosaicPath => { + if (tree.first === id || tree.second === id) { + return [...path, tree.first === id ? 'first' : 'second'] + } + if (typeof tree.first !== 'string' && typeof tree.second !== 'string') { + throw new Error('id not found') + } + try { + if (typeof tree.first !== 'string') { + return getPathById(tree.first, id, [...path, 'first']) + } + } catch (error) { + throw new Error('id not found') + } + try { + if (typeof tree.second !== 'string') { + return getPathById(tree.second, id, [...path, 'second']) + } + } catch (error) { + throw new Error('id not found') + } + throw new Error('id not found') +} + export const sidebarTopConfig: SidebarConfigType[] = [ { name: 'Files', @@ -106,20 +140,52 @@ const settingsConfig: settingsConfig[] = [ title: 'Console', name: 'console', Content: () => { - const { state, thunkDispatch } = useIdeContext() + const { state, thunkDispatch } = useIdeContext() + const consolePath = React.useMemo(() => { + try { + const path = getPathById(state.layout, 'Console') + return path + } catch (error) { + return null + } + }, [state.layout]) return (
    -
  • +
  • Visible
    - { - state.consoleVisible = !state.consoleVisible - if (state.consoleVisible) - thunkDispatch({ type: 'resetLayout'}) - else - thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}}) - }} - checked={state.consoleVisible}/> + if (consolePath) { + const newTree = updateTree(state.layout, [ + createRemoveUpdate(state.layout, consolePath), + ]) + thunkDispatch({ type: 'setLayout', payload: newTree }) + } else { + // Split 'Viewer' panel to add console back in + const viewerPath = getPathById(state.layout, 'Viewer') + const newTree = { ...state.layout } + let temp = newTree + viewerPath.forEach((name) => { + if (newTree[name] === 'Viewer') { + newTree[name] = { + direction: 'column', + first: 'Viewer', + second: 'Console', + splitPercentage: 70, + } + return + } + temp = { ...newTree[name] } + }) + thunkDispatch({ type: 'setLayout', payload: newTree }) + } + }} + checked={!!consolePath} + />
    • ) diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index 8e2a79e..679f184 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -57,7 +57,6 @@ export interface State { isLoading: boolean threeInstance: RootState sideTray: string[] // could probably be an array of a union type - consoleVisible: boolean } const code = '' @@ -94,7 +93,6 @@ export const initialState: State = { isLoading: false, threeInstance: null, sideTray: [], - consoleVisible: true, } const reducer = (state: State, { type, payload }): State => { @@ -170,7 +168,7 @@ const reducer = (state: State, { type, payload }): State => { case 'setLayout': return { ...state, - layout: payload.message, + layout: payload, } case 'updateCamera': return { -- 2.39.5 From ea2671baa181aadbb20ce9d127f96ab0a6b4a457 Mon Sep 17 00:00:00 2001 From: Frank Johnson Date: Mon, 11 Oct 2021 22:39:16 -0400 Subject: [PATCH 5/6] Added Toggle UI component --- app/web/config/tailwind.config.js | 3 + .../components/IdeSideBar/sidebarConfig.tsx | 73 ++++++++++--------- app/web/src/components/Toggle/Toggle.tsx | 33 +++++++++ 3 files changed, 75 insertions(+), 34 deletions(-) create mode 100644 app/web/src/components/Toggle/Toggle.tsx diff --git a/app/web/config/tailwind.config.js b/app/web/config/tailwind.config.js index 90382d8..f9123b6 100644 --- a/app/web/config/tailwind.config.js +++ b/app/web/config/tailwind.config.js @@ -98,6 +98,9 @@ module.exports = { minHeight: { md: '28rem', }, + outline: { + gray: ['2px solid #3B3E4B', '8px'], + }, skew: { '-20': '-20deg', }, diff --git a/app/web/src/components/IdeSideBar/sidebarConfig.tsx b/app/web/src/components/IdeSideBar/sidebarConfig.tsx index eaee359..1f20584 100644 --- a/app/web/src/components/IdeSideBar/sidebarConfig.tsx +++ b/app/web/src/components/IdeSideBar/sidebarConfig.tsx @@ -3,6 +3,8 @@ import { SvgNames } from 'src/components/Svg/Svg' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' import { createRemoveUpdate, updateTree } from 'react-mosaic-component' import type { MosaicPath } from 'react-mosaic-component' +import Toggle from 'src/components/Toggle' + interface SidebarConfigType { name: string icon: SvgNames @@ -151,41 +153,44 @@ const settingsConfig: settingsConfig[] = [ }, [state.layout]) return (
    -
  • -
    Visible
    - { - if (consolePath) { - const newTree = updateTree(state.layout, [ - createRemoveUpdate(state.layout, consolePath), - ]) - thunkDispatch({ type: 'setLayout', payload: newTree }) - } else { - // Split 'Viewer' panel to add console back in - const viewerPath = getPathById(state.layout, 'Viewer') - const newTree = { ...state.layout } - let temp = newTree - viewerPath.forEach((name) => { - if (newTree[name] === 'Viewer') { - newTree[name] = { - direction: 'column', - first: 'Viewer', - second: 'Console', - splitPercentage: 70, +
  • +
    • ) diff --git a/app/web/src/components/Toggle/Toggle.tsx b/app/web/src/components/Toggle/Toggle.tsx new file mode 100644 index 0000000..02dd65c --- /dev/null +++ b/app/web/src/components/Toggle/Toggle.tsx @@ -0,0 +1,33 @@ +const Toggle = ({ offLabel = 'off', onLabel = 'on', checked, onChange }) => { + return ( +
    + {offLabel} +
    +
    +
    + {onLabel} + +
    + ) +} + +export default Toggle -- 2.39.5 From b88a7b226286ea39dc593fc511e6eb65cbbfcc1f Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 12 Oct 2021 20:38:16 +1100 Subject: [PATCH 6/6] Remove console noise from Toggle component --- app/web/src/components/Toggle/Toggle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/web/src/components/Toggle/Toggle.tsx b/app/web/src/components/Toggle/Toggle.tsx index 02dd65c..5c6a446 100644 --- a/app/web/src/components/Toggle/Toggle.tsx +++ b/app/web/src/components/Toggle/Toggle.tsx @@ -1,7 +1,7 @@ const Toggle = ({ offLabel = 'off', onLabel = 'on', checked, onChange }) => { return (
    - {offLabel} + {offLabel}
    { }} >
    - {onLabel} + {onLabel}