From 2ec3a0b20267e744e5bf71ed645d424e135d1b0b Mon Sep 17 00:00:00 2001 From: Frank Johnson Date: Sun, 12 Sep 2021 17:13:30 -0400 Subject: [PATCH] Sorted out using
element, got ancestor clicks closing out to their level --- .../src/components/EditorMenu/EditorMenu.tsx | 11 +- .../components/IdeContainer/IdeContainer.tsx | 33 ++- .../src/components/IdeHeader/IdeHeader.tsx | 44 ++-- .../src/components/IdeSideBar/IdeSideBar.tsx | 86 ++++--- .../components/IdeSideBar/sidebarConfig.tsx | 222 +++++++++++------- .../src/components/IdeWrapper/IdeWrapper.tsx | 18 +- .../components/PanelToolbar/PanelToolbar.tsx | 12 +- app/web/src/components/Svg/Svg.tsx | 36 ++- app/web/src/helpers/hooks/useIdeState.ts | 16 ++ 9 files changed, 313 insertions(+), 165 deletions(-) diff --git a/app/web/src/components/EditorMenu/EditorMenu.tsx b/app/web/src/components/EditorMenu/EditorMenu.tsx index ffe2ef0..9ef9456 100644 --- a/app/web/src/components/EditorMenu/EditorMenu.tsx +++ b/app/web/src/components/EditorMenu/EditorMenu.tsx @@ -34,9 +34,16 @@ const EditorMenu = () => { ))} diff --git a/app/web/src/components/IdeContainer/IdeContainer.tsx b/app/web/src/components/IdeContainer/IdeContainer.tsx index 817528e..0286838 100644 --- a/app/web/src/components/IdeContainer/IdeContainer.tsx +++ b/app/web/src/components/IdeContainer/IdeContainer.tsx @@ -42,19 +42,40 @@ const ELEMENT_MAP = { } const TOOLBAR_MAP = { - Editor: ( + Editor: () => (
), - Viewer: ( + Viewer: (thunkDispatch) => (
- + + thunkDispatch((dispatch) => + dispatch({ + type: 'settingsButtonClicked', + payload: ['Settings', 'viewer'], + }) + ) + } + />
), - Console: ( + Console: (thunkDispatch) => (
- + + thunkDispatch((dispatch) => + dispatch({ + type: 'settingsButtonClicked', + payload: ['Settings', 'console'], + }) + ) + } + />
), } @@ -74,7 +95,7 @@ const IdeContainer = () => { return ( TOOLBAR_MAP[id]} + renderToolbar={() => TOOLBAR_MAP[id](thunkDispatch)} className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`} > {id === 'Viewer' ? ( diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx index cee2c50..f2199c5 100644 --- a/app/web/src/components/IdeHeader/IdeHeader.tsx +++ b/app/web/src/components/IdeHeader/IdeHeader.tsx @@ -71,28 +71,30 @@ const IdeHeader = ({ - {_projectId && <> - - + + + + {_projectOwner} + + + - - {_projectOwner} - - - - } + + )}
{canEdit && !projectTitle && ( diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx index 666b37c..0a071f7 100644 --- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx +++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx @@ -1,22 +1,30 @@ import { useState } from 'react' import Svg from 'src/components/Svg/Svg' -import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './sidebarConfig' +import { + sidebarTopConfig, + sidebarBottomConfig, + sidebarCombinedConfig, +} from './sidebarConfig' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' -function TabToggle({ item, className = "", active, onChange, onClick }) { +function TabToggle({ item, className = '', active, onChange, onClick }) { return ( - + ) } @@ -24,44 +32,52 @@ const IdeSideBar = () => { const { state, thunkDispatch } = useIdeContext() function onTabClick(name) { - return function() { - thunkDispatch({type: 'settingsButtonClicked', payload: [name]}) + return function () { + thunkDispatch({ type: 'settingsButtonClicked', payload: [name] }) } } - const selectedTab = React.useMemo(() => sidebarCombinedConfig.find(item => item.name === state.sideTray[0]), [state.sideTray]) + const selectedTab = React.useMemo( + () => sidebarCombinedConfig.find((item) => item.name === state.sideTray[0]), + [state.sideTray] + ) return ( -
+
- { sidebarTopConfig.map((topItem, i) => ( + {sidebarTopConfig.map((topItem, i) => ( onTabClick(topItem.name) } - onClick={ onTabClick(topItem.name) } - key={ 'tab-' + i } + active={state.sideTray[0] === topItem.name} + onChange={() => onTabClick(topItem.name)} + onClick={onTabClick(topItem.name)} + key={'tab-' + i} /> ))}
- { sidebarBottomConfig.map((bottomItem, i) => ( + {sidebarBottomConfig.map((bottomItem, i) => ( onTabClick(bottomItem.name) } - onClick={ onTabClick(bottomItem.name) } - key={ 'tab-' + (sidebarTopConfig.length+i) } - /> + item={bottomItem} + active={state.sideTray[0] === bottomItem.name} + onChange={() => onTabClick(bottomItem.name)} + onClick={onTabClick(bottomItem.name)} + key={'tab-' + (sidebarTopConfig.length + i)} + /> ))}
- { selectedTab?.panel && ( -
-

{ selectedTab.name }

- { selectedTab.panel } + {selectedTab?.panel && ( +
+

+ {selectedTab.name} +

+ {selectedTab.panel}
- ) } + )}
) } diff --git a/app/web/src/components/IdeSideBar/sidebarConfig.tsx b/app/web/src/components/IdeSideBar/sidebarConfig.tsx index 9015091..1ac449b 100644 --- a/app/web/src/components/IdeSideBar/sidebarConfig.tsx +++ b/app/web/src/components/IdeSideBar/sidebarConfig.tsx @@ -3,100 +3,154 @@ import { SvgNames } from 'src/components/Svg/Svg' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' interface SidebarConfigType { - name: string, - icon: SvgNames, - disabled: boolean, - panel: ReactNode | null, + name: string + icon: SvgNames + disabled: boolean + panel: ReactNode | null } -export const sidebarTopConfig : SidebarConfigType[] = [ - { - name: 'Files', - icon: 'files', - disabled: false, - panel:
-

Coming Soon

-
-

- We're working on multi-file support in tandem with the GitHub integration. -

-
, - }, - { - name: 'GitHub', - icon: 'github', - disabled: false, - panel:
-

Coming Soon

-
-

- This integration will allow you to sync a project with a GitHub repo and push changes back to it as a commit! -

-
, - }, - { - name: 'Visibility', - icon: 'eye', - disabled: true, - panel: null, - }, +export const sidebarTopConfig: SidebarConfigType[] = [ + { + name: 'Files', + icon: 'files', + disabled: false, + panel: ( +
+

+ Coming Soon +

+
+

+ We're working on multi-file support in tandem with the GitHub + integration. +

+
+ ), + }, + { + name: 'GitHub', + icon: 'github', + disabled: false, + panel: ( +
+

+ Coming Soon +

+
+

+ This integration will allow you to sync a project with a GitHub repo + and push changes back to it as a commit! +

+
+ ), + }, + { + name: 'Visibility', + icon: 'eye', + disabled: true, + panel: null, + }, ] +const DiscordLink = () => ( + + Discord + +) + const settingsConfig = [ - { - title: "Editor", - name: "editor", - open: false, - content:

This text will go in a details element!

, - }, - { - title: "Viewer", - name: "viewer", - open: false, - content:

This text will go in a details element!

- }, - { - title: "Console", - name: "console", - open: false, - content:

This text will go in a details element!

- }, + { + title: 'Editor', + name: 'editor', + open: false, + content: ( +
+

+ Coming Soon +

+
+

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

+
+ ), + }, + { + title: 'Viewer', + name: 'viewer', + open: false, + content: ( +
+

+ Coming Soon +

+
+

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

+
+ ), + }, + { + title: 'Console', + name: 'console', + open: false, + content: ( +
+

+ Coming Soon +

+
+

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

+
+ ), + }, ] -export const sidebarBottomConfig : SidebarConfigType[] = [ - { - name: 'Settings', - icon: 'gear', - disabled: false, - panel: , - }, +export const sidebarBottomConfig: SidebarConfigType[] = [ + { + name: 'Settings', + icon: 'gear', + disabled: false, + panel: , + }, ] export const sidebarCombinedConfig = [ - ...sidebarTopConfig, - ...sidebarBottomConfig, + ...sidebarTopConfig, + ...sidebarBottomConfig, ] -function SettingsMenu({parentName}: {parentName: string}) { - const { state, thunkDispatch } = useIdeContext() - return ( -
- { settingsConfig.map(item => ( -
  • - - { state.sideTray.slice(-1)[0] === item.name && item.content } -
    • - //
    - // thunkDispatch((dispatch) => dispatch({type: 'settingsButtonClicked', payload:[parentName, item.name]}))} - // >{ item.title }hi there - // { state.sideTray.slice(-1)[0] === item.name && item.content } - // {state.sideTray.slice(-1)[0]} - //
    - ))} -
    - ) +function SettingsMenu({ parentName }: { parentName: string }) { + const { state, thunkDispatch } = useIdeContext() + return ( +
    + {settingsConfig.map((item) => ( +
    { + e.preventDefault() + thunkDispatch((dispatch) => + dispatch({ + type: 'settingsButtonClicked', + payload: [parentName, item.name], + }) + ) + }} + > + + {item.title} + + {item.content} +
    + ))} +
    + ) } diff --git a/app/web/src/components/IdeWrapper/IdeWrapper.tsx b/app/web/src/components/IdeWrapper/IdeWrapper.tsx index 1ab9ddf..7b52242 100644 --- a/app/web/src/components/IdeWrapper/IdeWrapper.tsx +++ b/app/web/src/components/IdeWrapper/IdeWrapper.tsx @@ -32,17 +32,17 @@ const IdeWrapper = ({ cadPackage }: Props) => { return (
    - +
    +
    + +
    +
    + +
    -
    - -
    -
    ) diff --git a/app/web/src/components/PanelToolbar/PanelToolbar.tsx b/app/web/src/components/PanelToolbar/PanelToolbar.tsx index c8f8826..67c67a0 100644 --- a/app/web/src/components/PanelToolbar/PanelToolbar.tsx +++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx @@ -1,4 +1,4 @@ -import { useContext } from 'react' +import { MouseEventHandler, useContext } from 'react' import { MosaicWindowContext } from 'react-mosaic-component' import Svg from 'src/components/Svg/Svg' import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage' @@ -6,9 +6,11 @@ import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessag const PanelToolbar = ({ panelName, showTopGradient, + onClick, }: { panelName: 'Viewer' | 'Console' showTopGradient?: boolean + onClick?: MouseEventHandler }) => { const { mosaicWindowActions } = useContext(MosaicWindowContext) return ( @@ -19,9 +21,13 @@ const PanelToolbar = ({
    {panelName === 'Viewer' && } diff --git a/app/web/src/components/Svg/Svg.tsx b/app/web/src/components/Svg/Svg.tsx index 4048a5f..7e47e7c 100644 --- a/app/web/src/components/Svg/Svg.tsx +++ b/app/web/src/components/Svg/Svg.tsx @@ -181,8 +181,19 @@ const Svg = ({ ), eye: ( - - + + ), favicon: ( @@ -286,8 +297,18 @@ const Svg = ({ ), files: ( - - + + ), flag: ( @@ -373,7 +394,12 @@ const Svg = ({ ), github: ( - + ), lightbulb: ( diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index 3e23c3c..09e9cc2 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -244,11 +244,27 @@ const reducer = (state: State, { type, payload }): State => { state.sideTray.length && state.sideTray.length === payload.length && state.sideTray.every((original, index) => original === payload[index]) + + const payloadInOriginal = + payload.length && state.sideTray.indexOf(payload[0]) + const isAncestorClick = + state.sideTray.length && + state.sideTray.length > payload.length && + payloadInOriginal >= 0 && + payload.every( + (incoming, i) => incoming === state.sideTray[i + payloadInOriginal] + ) + if (isReClick) { return { ...state, sideTray: state.sideTray.slice(0, -1), } + } else if (isAncestorClick) { + return { + ...state, + sideTray: state.sideTray.slice(0, payload.length * -1 - 1), + } } return { ...state,