While I’m not especially fond of the Pinegrow UI, there is one feature that I really like, which I think would make a great addition to Bootstrap Studio. When you select an element (aka “Component”) in Pinegrow’s Tree panel (the equivalent of BSS’s Overview panel) a small context menu appears which allows you to use your mouse to do the following to your selection…
In BSS, you can right-click the mouse and choose most of these from the context menu, but the specifically useful ones that are missing in BSS but present in Pinegrow are Move Up, Move Down, Indent One Level and Outdent One Level.
In BSS, you do this by grabbing the Component and dragging it with this mouse, but this can sometime get a little dicey when you want to move the Component very far up or down (or in/out.)
Being able to just click on a single button in a menu that appears automatically when you select a Component in the Overview would speed up development. The above picture is the Pinegrow UI showing the menu I’m describing, and I’ve hovered my mouse over two of the selections to illustrate exactly what I’m talking about.
Thank you for the suggestion! I can imagine how move up, down and out would work, but the indent is a bit unclear. Does it move the element as a child inside a previous/next sibling?
On my screen that panel space is quite valuable to see my dom. Keyboard shortcuts can be very direct, like perhaps ctrl-up, ctrl-down, ctrl-left, ctrl-right could be used.
Using shortcuts
To move an element, highlight it in the overview panel and press Ctrl+X. Then highlight the place in the overview panel where you want to move the element and press Ctrl+V—done.
If you want to duplicate an element, use Ctrl+C instead of Ctrl+X.
Using the context menu
To move an element, highlight it in the overview panel, right-click, and select Cut. Then highlight the place where you want to move the element, right-click, and choose Paste Inside, Paste Before, or Paste After.
If you want to duplicate an element, select Copy instead of Cut.
You can use the arrow keys on your keyboard to navigate the panel, but using the mouse is much quicker.
I know it can be done with keyboard shortcuts and context menu commands, but those methods involve multiple keystrokes or button clicks. Clicking a single icon to rapidly move components up/down or in/out (parent/child) seems like it would be a lot quicker and easier.
