Add console toggle to side-tray #540

New Issue

2021-09-29T19:11:54+02:00

hrgdavor commented

2021-09-29 19:11:54 +02:00

(Migrated from github.com)

The IDE console isn't always needed, so it would be nice to be able to hide it.

We want to add a visibility toggle to the side tray

full designs here

The components that make up the options int he side tray are defined in app/web/src/components/IdeSideBar/sidebarConfig.tsx in the settingsConfig array.
Changing to toggle will need to dispatch an action to show or hide the console.
Here is an example that will hide the console

thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}})

The thunkDispatch and state can be accessed using the useIdeContext() (search for useIdeContext to see examples in the repo).

The actions update state, handled in app/web/src/helpers/hooks/useIdeState.ts, pay attention to layout property on the state object as that's what controls the panels in the IDE. W're using react-mosaic-component so their docs will likely be useful.

Follow the instructions in CONTRIBUTING.md to get setup, and of course ask for help here or in the dev-help discord channel.

If you'd like to contribute the CadHub but this issue is taken or you'd prefer something else, have a look at #535 to see if there's something else you would like

The IDE console isn't always needed, so it would be nice to be able to hide it. ![image](https://user-images.githubusercontent.com/29681384/136712638-77c30efa-77fc-4af9-b6b8-e7ab4106851b.png) We want to add a visibility toggle to the side tray ![image](https://user-images.githubusercontent.com/29681384/136712660-3f75c1b0-c6fe-49a4-aaf0-e747f69347c3.png) [full designs here](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=2091%3A4535) The components that make up the options int he side tray are defined in `app/web/src/components/IdeSideBar/sidebarConfig.tsx` in the `settingsConfig` array. Changing to toggle will need to dispatch an action to show or hide the console. Here is an example that will hide the console ```javascript thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}}) ``` The thunkDispatch and state can be accessed using the `useIdeContext()` (search for `useIdeContext` to see examples in the repo). The actions update state, handled in `app/web/src/helpers/hooks/useIdeState.ts`, pay attention to `layout` property on the state object as that's what controls the panels in the IDE. W're using `react-mosaic-component` so [their docs](https://github.com/nomcopter/react-mosaic) will likely be useful. ---- Follow the instructions in [CONTRIBUTING.md](https://github.com/Irev-Dev/cadhub/blob/main/CONTRIBUTING.md) to get setup, and of course ask for help here or in the [dev-help discord channel](https://discord.gg/Vgmky37UtD). If you'd like to contribute the CadHub but this issue is taken or you'd prefer something else, have a look at #535 to see if there's something else you would like

Irev-Dev commented

2021-09-29 21:15:51 +02:00

(Migrated from github.com)

@franknoirot, @hrgdavor,

How about we add a toggle into the side tray?

@franknoirot, @hrgdavor, How about we add a toggle into the [side tray](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1561%3A4532)?

👍 1

hrgdavor commented

2021-09-29 21:17:56 +02:00

(Migrated from github.com)

I would try, have not done a PR for some time :)

franknoirot commented

2021-09-30 04:17:17 +02:00

(Migrated from github.com)

@hrgdavor @Irev-Dev how does this look? https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=2091%3A4535

@hrgdavor if you'd like to work on this I feel like you can get it working with a normal checkbox and I can make a Toggle component like this one to swap out later.

@hrgdavor @Irev-Dev how does this look? https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=2091%3A4535 @hrgdavor if you'd like to work on this I feel like you can get it working with a normal checkbox and I can make a `Toggle` component like this one to swap out later.

hrgdavor commented

2021-09-30 07:45:15 +02:00

(Migrated from github.com)

Deal

Irev-Dev commented

2021-09-30 10:21:23 +02:00

(Migrated from github.com)

Some context:
We're using a library for the IDE panels react-mosaic-component , it's used in app/web/src/components/IdeContainer/IdeContainer.tsx and the layout is controlled by the layout property in the app state in app/web/src/helpers/hooks/useIdeState.ts.
I don't think it will be much more than dispatching the event "setLayout" with the new layout (i.e. with or without the console).
And than dispatching "resetLayout" to put it back.
I might be wrong though.

Some context: We're using a library for the IDE panels `react-mosaic-component` , it's used in `app/web/src/components/IdeContainer/IdeContainer.tsx` and the layout is controlled by the `layout` property in the app state in `app/web/src/helpers/hooks/useIdeState.ts`. I don't think it will be much more than dispatching the event `"setLayout"` with the new layout (i.e. with or without the console). And than dispatching `"resetLayout"` to put it back. I might be wrong though.

Irev-Dev commented

2021-10-10 23:04:46 +02:00

(Migrated from github.com)

I've overhauled the description to be much more detailed.

Irev-Dev commented

2021-10-12 12:34:52 +02:00

(Migrated from github.com)

Resolved by #545

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: h3n3/cadhub#540