Why so many options in the gear editor menu?

Don · September 20, 2022, 1:44pm

Hello,

Is this a touchscreen device?

github.com/discourse/discourse

UX: improve composer toolbar flexibility

discourse:main ← discourse:editor-toolbar-adju

opened 10:42PM - 07 Sep 22 UTC

awesomerobot

+46 -66

We've been having some problems with toolbar overflow when there are many button…s present, so I did some refactoring in an attempt to avoid the issue and simplify... Relevant topic (there are a couple customer reports as well): https://meta.discourse.org/t/toolbar-of-composer-is-too-wide-at-least-on-ipad/234743/14 Part of the issue is that we use different positioning for the cog dropdown on iOS and desktop, so we can't hide overflow without also hiding/breaking the dropdown menu on iOS. (We use different positioning on iOS because it has trouble with fixed position elements) In this PR I've approached the "too many buttons" issue and the "can't hide overflow" issue in a few different ways: 1. I updated the way we hide menu items from `site.mobileView` to `capabilities.touch` — this means that iPads are now included in the mobile behavior of showing fewer icons. They were previously left out and had some issues due to narrower widths. It's possible some large touch devices get caught up in this, but showing too many icons on iPad (and causing overflow issues) seems more problematic than hiding some options within the cog dropdown. (Alternatively we could check viewport width instead of relying on mobileView.) 2. I moved the preformatted text button to be hidden within the cog menu on mobile. This is most often used for code, and it seems less likely that someone's sharing code on a mobile device. 3. I'm allowing the buttons to wrap. This isn't ideal, but better than breaking the cog menu and might make admins think twice about how many buttons they have here 4. I updated the layout of the button bar from flex to grid. This allows us to use auto-fill/fit, simplify our CSS, and allow for easier equal spacing when wrapping. I also removed the dividers because grid containers want all children to be in an equal-width column. I don't think these were doing much for us other than occupying more space, but if we want to add them back I can use CSS psuedo selectors. Default: ![Screen Shot 2022-09-07 at 6 37 11 PM](https://user-images.githubusercontent.com/1681963/188995720-f442c08b-4534-418e-9191-33a0bf82b576.png) Too many buttons wrap: ![Screen Shot 2022-09-07 at 6 37 32 PM](https://user-images.githubusercontent.com/1681963/188995740-45702ddd-b801-4739-b370-9df360b5559f.png) Mobile default: ![Screen Shot 2022-09-07 at 6 37 49 PM](https://user-images.githubusercontent.com/1681963/188995751-00ff6d5e-c38a-4ce1-b16f-8ac48de1b25d.png) More mobile buttons can fill the space: ![Screen Shot 2022-09-07 at 6 39 27 PM](https://user-images.githubusercontent.com/1681963/188995834-be83880a-86a4-4b66-bf9f-7639da54f645.png) Too many mobile buttons: ![Screen Shot 2022-09-07 at 6 40 02 PM](https://user-images.githubusercontent.com/1681963/188995886-ce5d06bf-2a7b-42f7-9327-7cf0fb0c65d7.png) iPad default: ![Screen Shot 2022-09-07 at 6 38 16 PM](https://user-images.githubusercontent.com/1681963/188995764-f66445a8-ef12-430e-ab0f-db5ad1aedfa4.png)

Topic		Replies	Views
New post editor menu option pushes gear icon off screen on iPhone 8 UX	10	995	October 20, 2021
Help us test the rewritten Composer Feature feedback	145	23080	October 21, 2016
Move some post actions to "extra drawer" Feature rfc , spec	35	5675	September 8, 2014
Help us test a new composer style UX testing	75	8783	December 13, 2017
Easy way to change preformatted text (code) button? Feature	41	15302	June 27, 2016

Why so many options in the gear editor menu?

Related topics