Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-select: Polish further, move closer to previous selection style. #19088

Closed
wants to merge 1 commit into from

Conversation

jasmussen
Copy link
Contributor

The new native selection style is much faster and an important step on the path to various writing-flow improvements. However until we can get closer to those improvements, in the mean time selecting multiple blocks is currently slightly less clear than it was prior to the native selection change.

In #18867 I tried to mitigate this, and it includes some mockups for how to improve the style longer term, with more thoughts being discussed in #18667.

But until that gets hashed out more clearly, perhaps we should rewind the visual style slightly, to be closer to what was, while still keeping the technical benefits of the native selection PR. This PR keeps those changes, but tweaks the visual style.

What it does is remove the left border style, and re-paints a cross-block background. But this time with a color that is closer to the default selection color on Windows and MacOS. Specifically, both those defaults are eye-dropped and averaged to create a new color that looks decently at home on both.

averaged default colors

select-color

Note that Windows 10 by default also changes the font-color to be white on the blue background. But the hue of the color is close to both, so the color shares DNA.

It is possible users can customize this select color, meaning the color of the selection marker inside text will diverge from that of multi-block selections. But this is unfortunately not something we can address. But the averaged color feels like a pretty good interim step towards a selection model that is perhaps closer to that of Figma, painting borders around each block instead of re-coloring the background.

The new native selection style is much faster and an important step on the path to various writing-flow improvements. However until we can get closer to those improvements, in the mean time selecting multiple blocks is currently slightly less clear than it was prior to the native selection change.

In #18867 I tried to mitigate this, and it includes some mockups for how to improve the style longer term, with more thoughts being discussed in #18667.

But until that gets hashed out more clearly, perhaps we should rewind the visual style slightly, to be closer to what was, while still keeping the technical benefits of the native selection PR. This PR keeps those changes, but tweaks the visual style.

What it does is remove the left border style, and re-paints a cross-block background. But this time with a color that is closer to the default selection color on Windows and MacOS. Specifically, both those defaults are eye-dropped and averaged to create a new color that looks at home on both.

It is possible users can customize this select color, meaning the color of the selection marker inside text will diverge from that of multi-block selections. But this is unfortunately not something we can address. But the averaged color feels like a pretty good interim step towards a selection model that is perhaps closer to that of Figma, painting borders around each block instead of re-coloring the background.
@jasmussen jasmussen added the [Type] Enhancement A suggestion for improvement. label Dec 12, 2019
@jasmussen jasmussen requested review from mtias and ellatrix December 12, 2019 08:40
@jasmussen jasmussen self-assigned this Dec 12, 2019
@jasmussen
Copy link
Contributor Author

I will also be creating a separate PR that gets us closer to this style:

That way we can test both and see which is the most appropriate to move forward with.

jasmussen added a commit that referenced this pull request Dec 12, 2019
This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.
@karmatosed
Copy link
Member

In testing this it feels pretty aligned to what google docs does:

image

image

However, I will also comment on the other issue, there is a point of how this scales to complicated layouts.

image

As you can see above when you add images to this it somewhat has a denser visual display. If we are thinking about scaling this into full site editing perhaps looking at #19094 makes sense. I say this having felt my first instinct was for this PR over that one, it's in using it and thinking about scaling I tend to come down on the other being solution.

@jasmussen
Copy link
Contributor Author

Thank you for the review.

One benefit the other PR has over this is that it is color agnostic. This PR tries to emulate the native color by finding an average between windows and mac but it's not perfect for either, and especially falls apart when the user uses a different selection color costumized by the operating system.

The other provides a different selection indicator entirely, so out doesn't suffer from that issue.

karmatosed pushed a commit that referenced this pull request Dec 13, 2019
This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.
@jasmussen
Copy link
Contributor Author

Closing in favor of what we merged, in #19094.

@jasmussen jasmussen closed this Dec 16, 2019
@aristath aristath deleted the polish/multi-select branch November 10, 2020 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants