-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Conversation
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.
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.
In testing this it feels pretty aligned to what google docs does: However, I will also comment on the other issue, there is a point of how this scales to complicated layouts. 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. |
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. |
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.
Closing in favor of what we merged, in #19094. |
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.
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.