UX suggestions

[wgottschalk]

So I ran the project and followed the tutorial on Medium and I absolutely love the project! A couple of UX requests that I would like to see are:

1. Use right click to display the mouse-toolbar rather than left click. It feels more natural to copy + right click + paste.
2. Make sure the mouse-toolbar is always displayed inside the bounds of the window. Sometimes if I click around the edges of the window the mouse-toolbar buttons are not displayed due to overflow.
3. Drag and drop components
4. Add support of classes and styling them Use case: I tried creating a list of items and I had to end up style each of the lis individually. Also, if I want to make a change, I'd have to change them all individually as well.

I'm sure you're getting a lot of suggestions. These are the couple that I would like to see. Let me know what you think and I'll start working on some PRs

[ipselon]

Hi, @wgottschalk. Thanks for your feedback. Good catch about "Mouse Buttons" name - I'm going to rename Blueprint buttons to Mouse Buttons control in the top toolbar...

Use right click to display the mouse-toolbar rather than left click. It feels more natural to copy + right click + paste.

Good point. But I need to try it by myself, just to be sure that this is more convenient way to pick and paste components... I'll give my feedback soon.

Make sure the mouse-toolbar is always displayed inside the bounds of the window. Sometimes if I click around the edges of the window the mouse-toolbar buttons are not displayed due to overflow.

I guess under "window" you meant a working page. Yes, there is some limitations, mouse buttons placed right on the page at absolute position, so the page may get overflow when they are out of window boundaries. That's why we have top toolbar controls in case we are not able to reach some components by mouse. Let's leave it now as it is until we can figure out the better way to manipulate components

Drag and drop components

I've provided many months investigating different visual tools which drag and drop elements for building a web page. And I ended up with the only solution - drag&drop is useful only when you have absolute positioning of elements on the page. If there are components which are tightly coupled and do not have any placeholders between edges - there is no possibility to place component in the right place immediately. For example, multiple nested divs in each other.

Working with my solution a bit longer gives good results in speed of placing components by putting them in the right place in two clicks.

Although, the drag&drop is very useful when we have a list construction, and that fits perfectly to Structor's treeview. I'm planning to implement D&D in tree view panel, but there is an issue with multiple selection - Structor is able to select multiple components by Ctrl + click, so we need to drag and drop many components at once.

Add support of classes and styling them Use case: I tried creating a list of items and I had to end up style each of the lis individually. Also, if I want to make a change, I'd have to change them all individually as well.

Yes, that is it. Structor lets you to select multiple components by Ctrl + click, but it does not allow to change settings for multiple selection :-( It would be great to figure out how to implement changing style for such selection taking in account that some of items have different styles or props.

It would be awesome if you have a chance to review the code and try to implement this.

• Alex.

[ipselon]

Hi @wgottschalk,

It feels more natural to copy + right click + paste.

Now it works as you have suggested in this issue. Thanks.

[wgottschalk]

@ipselon is there a way to report or delete the posts by chriscow? seems sketchy