resize project panel & canvas zone extended (93%)

[oliviermgx]

No description provided.

[lexoyo]

Bug report

there is a little bug:

1. open silex
2. open the layers panel
3. click the "expand" arrow button => it expands the width of the panel
4. open the pages panel
5. click the "expand" arrow button again

what I expect: the panel should go back to the original width

what it does: nothing the 1st time, I have to click again to go back to the original width

Implementation details

2 things are bothering me

1/ 2 plugins for the same feature

The 2 "panes", the "project" pane on the left and the "views" pane on the right (which should be named "element" or "selection" instead of "views" btw) have the same "expand" feature and should be implemented the same way.

There should be only 1 plugin instead of both resize-project-panel and resize-panel

2/ Toggle not set

The code uses a grapesjs command cmdResizePanel with run and stop wich use setProperty to set the css variable --viewsPanelWidth.

I believe this could be a litlle simpler: use a command with just a function (this does a "stateless command", see grapesjs docs about commands). Without a state, it will not be a problem to have different buttons to call the same command - e.g the button in the layers panel and the button in the pages panel.

In the function you can use javascript classList.toggle to toggle a class on the panel. This class will have a css rule to set the width of the panel. This way you don't need to use setProperty and you don't need to use stop to reset the css variable. This will make the code easier to read and debug. Also this means you will have 2 variables, one for each size.

With this implementation we give up the button state (expanded or not) but I think it's not a big deal. Also we can add a CSS class to the container of the panel to style the button (e.g. arrow pointing left or right).