Improve drag & drop / canvas UI

[apedroferreira]

UI redesign for canvas and drag-and-drop.

• Color / outline / drop area changes (all blue now)
• Fix grid position while resizing (it was wrong)
• Show element outline on hover only
• Show all element outlines while dragging (but more discrete)
• Snap only to whole columns while resizing

I had a brief attempt at "showing all potential cursor positions when dragging a component" but it would be quite a lot of work, and after trying to see how it would look I don't think it would look good with the current system - there would be too many cursor positions very close to each other and it would probably look pretty confusing...

Screen.Recording.2023-02-03.at.18.57.13.mov

Preview: https://toolpad-pr-1553.onrender.com/

---

Design

• Figma Process

[Janpot]

Does it look ok in dark mode?

[apedroferreira]

It needed a bit more contrast for dark mode. Does this work? Seems like an improvement, at least in dark mode.

Before:

After:

[prakhargupta1]

That is a nice exploration! The introduced change (blue boundaries) is blending really well. But it makes me think about the essence of showing them in the first place. It makes them critical as these guide in visualizing the layout of all components together so maybe we should keep it and anyway preview is just a click away, so it should not be a dealbreaker.

About choosing bright red as the color for the highlighted component, it is a somewhat unconventional. Wondering if there could be a different tone of red/pink that we should explore.
cc @gerdadesign

[gerdadesign]

Red is traditionally used to indicate errors, so I do understand wanting a different color there. I do like @apedroferreira's use of the blue to tie in nicely with the theme.
I also have the same question as @prakhargupta1 about whether always showing the outline is necessary? Perhaps making them appear on hover only could help with feeling less cluttered? One potential trade-off is not immediately seeing nested layout items like Container > Paper > Text, but they would still appear on hover. This mockup is using blue-light / 500.

Light mode

Dark mode

[Janpot]

@gerdadesign There is another related construct in the canvas, the cursor that appears in between elements when dragging a component. I feel like it makes sense to make it part of this design to make all these construction elements tie together well visually

[apedroferreira]

There is another related construct in the canvas, the cursor that appears in between elements when dragging a component

Yeah, right now there is also a bright green color when dragging & dropping or resizing, initially I made it that color just so that it was easy to see and work with, but it doesn't blend in very well with the overall theme...
Would be great if we could set the whole expected design for all these interactions!

I also have the same question as @prakhargupta1 about whether always showing the outline is necessary?

I'm fine with trying out only showing the borders on hover if most people are in favor. Not sure if it will be an improvement or not, but sounds like worth trying.
Also, in this PR I made those borders 2px wide, but maybe that's too bold and keeping them at 1px width is more subtle and visible enough?

[Janpot]

By "on hover" what is meant exactly?

• hover over the element shows its outline
• hover over the canvas shows all outlines
• dragging a component over an element shows the outline
• dragging over the canvas shows all outlines

I'm in favour for the last option

[apedroferreira]

By "on hover" what is meant exactly?

• hover over the element shows its outline
• hover over the canvas shows all outlines
• dragging a component over an element shows the outline
• dragging over the canvas shows all outlines

I'm in favour for the last option

I think @gerdadesign meant the first option, but to me it doesn't sound bad to try 1 and 4 together.

[prakhargupta1]

1 and 4 together seems good to me too.
Also, if we change the color of outline, I assume we'll also change the color of the grid lines that we show in the background during resizing?

[apedroferreira]

1 and 4 together seems good to me too. Also, if we change the color of outline, I assume we'll also change the color of the grid lines that we show in the background during resizing?

Yeah, those are kinda red so maybe we should change them too.

[gerdadesign]

Yes, I intended "on hover" to mean "hover over the element shows its outline". If you think it's also valuable to show all outlines while dragging a new element over, I'm down to see how that interaction would play out! @apedroferreira I also went with a 2px border vs 1px. Especially when dashed, it didn't feel visible enough to me. I'm open to changing my mind when seeing this in implementation vs a mockup, though.

Here's a few screenshots with a little more detail:

Current

existing experience for comparison

reds and green

---

Proposal

Default canvas view

no borders

While hovering over an element

border: 2px dashed #007FFF (blue-light / 500); Dash = 3px, Gap = 8px;

While resizing an element

border: 2px solid #007FFF (blue-light / 500); background: blue-light / 500, 10%; columns are 4% black

Dragging a component over from the library

2px solid #007FFF (blue-light / 500)

[apedroferreira]

@gerdadesign These look great, thanks!

I'll give them a try and also try to implement the suggested options 1 and 4 to see how it feels.

[Janpot]

Actually there's also instead of 4: show all potential cursor positions when dragging a component. I think this makes more sense.

[apedroferreira]

Actually there's also instead of 4: show all potential cursor positions when dragging a component. I think this makes more sense. I think that slightly makes more sense than 4.

Might be more difficult to implement but sounds more intuitive, I'll try that too as a preferred alternative to "dragging over the canvas shows all outlines".

[bytasv]

Finally the screaming red is gone 😅

However, I've found something not working as expected with overlay 👇

CleanShot.2023-02-06.at.14.40.11.mp4

[apedroferreira]

Finally the screaming red is gone 😅

However, I've found something not working as expected with overlay 👇

CleanShot.2023-02-06.at.14.40.11.mp4

Were you trying to move an element here but it was selecting another element instead?
If so it's a bit unrelated but I'll still try to include the fix in this PR, should probably be simple enough?

Edit because don't want to add another comment: you're right, it is related after all because this PR introduced it, so will fix here!

[bytasv]

Were you trying to move an element here but it was selecting another element instead?
If so it's a bit unrelated but I'll still try to include the fix in this PR, should probably be simple enough?

As seen in recording, I:

1. Selected top right button element
2. Tried to drag it to new place - but seems the overlay of another element took precedence 🤔

If you can find a way to fix this great, but in the mean time I'm retracting rejection if this isn't related to your changes and giving approval as the changes look good anyways 👍

[prakhargupta1]

It looks much better than bright red!

Since there is a predominant blue on the canvas, I think both of the side panels should have the same color as we have now (something for the next cycle)

Let's also take sign off from @gerdadesign

[gerdadesign]

This is looking really nice, @apedroferreira! 👏

[apedroferreira]

i experimented a bit with trying to show the drop area triangles but it feels a bit weird sometimes so probably gonna leave it out - I'll leave it in the commit history here anyway.

Screen.Recording.2023-02-06.at.19.44.48.mov

[prakhargupta1]

I can see how drop triangle shadows impact DX, definitely something we can explore later.

[Janpot]

Small suggestion on code style. lgtm otherwise 👍