Ability to customise workspace about deco-ide HOT 5 OPEN

Definitely going to do this in the future, but probably not short-term. If you're interested in figuring out how to add this now, I can point you in the right direction. It'd be a medium-sized amount of work.

Some things are a little bit resizable - e.g. you can shrink the components section to 100px. Just adding a little more customizability, like hide/show for components section would be simple.

from deco-ide.

@dabbott Definitely! If you could kickstart me in the right direction, I can give this a shot over the weekend :)

from deco-ide.

@IljaDaderko sweet! Ok, here's how it works currently:

The entire layout is defined here in Workspace: https://github.com/decosoftware/deco-ide/blob/master/web/src/scripts/containers/Workspace.jsx

Currently the different regions are hardcoded. Each region is wrapped in a <Pane />, which can resize either horizontally or vertically. Resizing dispatches actions, e.g. setLeftSidebarWidth, setLeftSidebarBottomSectionHeight, which are in turn saved (confusingly) into both our redux store and localstorage (since your layout should persist across app launches). The styles are returned from the method getStyles.

Separate from sizes, there are actions for hiding/showing the left and right sidebar, setLeftSidebarVisibility, setRightSidebarContent. This happens in WorkspaceToolbar: https://github.com/decosoftware/deco-ide/blob/master/web/src/scripts/containers/WorkspaceToolbar.jsx

Probably the right answer looks more like this:

We have a simple format for the window layout which just specifies positions of boxes using flexbox. Each box has an id which specifies what kind of content to show via a hardcoded map { id => <Component /> }. It's stored into localstorage only, and read out upon usage. This can happen from a utils class, e.g. https://github.com/decosoftware/deco-ide/blob/master/web/src/scripts/utils/RecentProjectUtils.js

I made a little pen of what I have in mind: http://codepen.io/dabbott/pen/GqRpxQ?editors=0010

For inspiration, this project does the whole layout thing pretty well: https://github.com/STRML/react-grid-layout. One option would be to just wrap their <ReactGridLayout /> in a simplified <WorkspaceLayout /> abstraction layer. My guess is it wouldn't work that well though. Their system is grid based, so it might not be flexible enough (I like being able to resize 1px at a time, instead of thinking about rows and columns.

Other approaches are welcome too. I haven't thought too thoroughly about this.

from deco-ide.

@dabbott Alright, sounds doable! Will probably need to stretch this over a couple of weekends, but will give it a shot!

from deco-ide.

@IljaDaderko were you ever able to give this a shot?

from deco-ide.