Why so many options in the gear editor menu?

ux
1

On desktop where there is plenty of room in the main menu bar, why are so many options hidden behind the gear menu option? Weren’t Preformatted text, Bulluted List and Numbered List in the main menu bar previously?

image
image938×417 33.2 KB

4 Likes
2

I’m assuming this must be from Meta judging by the screenshot. :slight_smile:

On my laptop (Windows/Firefox) this is my format bar:

image
image767×166 6.13 KB

Is there something about the device you’re using that may explain the difference?

3

I’m also seeing the same as @JammyDodger, even when I squish the browser window:
image

4

Hello,

Is this a touchscreen device?

4 Likes
5

It is a touchscreen laptop, yes. I hope this can be changed back, with another solution found just for iPad / tablets, because the experience on my 13" laptop (not particularly large) is a lot worse off from this change.

6

I’m having the same issue.

Until/when/if there is a UI to provide more options for the layout of the composer / editor buttons, @awesomerobot provided some CSS examples to rearrange them, and it does work.

Thank you Kris !!!

Kris also suggests that it might be best to add this as a theme component, so it’s separate from your current theme.

How to do that:

  1. go to admin>customize>themes then click new
  2. name it something like “Tiles button order”, select “component” from the dropdown, click create
  3. Then you can click Edit CSS/HTML, copy & paste the CSS above to common > css

Now the component is created and you need to add it to your current theme

  1. go back to the previous page, then switch from the components tab to the themes tab
  2. select your currently active theme (it’ll have a green check mark)
  3. within the theme settings here there’s a Theme Components section, find your new component from the dropdown and then click “add”
  4. :tada: Now when you return to your forum homepage and refresh, it should be active.

From Tiles Image Gallery - #66 by awesomerobot
and Tiles Image Gallery - #68 by awesomerobot

7

I also see fewer options on my iPhone 8. Not sure if it’s related to this change, but there’s clearly plenty of additional room on the main menu bar.

image
image750×1283 98.6 KB

8

We’ve been avoiding observing the width of the toolbar and its contents and adjusting based on space available because it would be a somewhat complicated change that would likely introduce some fragility.

So the challenge is that we need to make all icons fit without overflowing the composer in a way that works for most devices (some narrower touchscreen devices couldn’t access the cog menu at all previous to this change). Unfortunately this means that more icons end up in the cog menu than needed in some cases.

We’ve loosely discussed adding some site settings that allow an admin to decide what gets hidden within the cog dropdown, so this may become configurable in the future.

13 Likes
9

Really big +1 for this.

5 Likes
10

A user setting would be better. :slight_smile:

Primarily because I’m not an admin haha. As it is, I mostly use the menu for spoiler text and hidden details. Being able to show them on the main menu would be nice. But it seems very user specific, so there’s only so far a site setting will help.

2 Likes
11

Our site has a lot of code-snippets, scripts and log output posted by our users. Moving the pre-formatted code button to the cog-menu when one has a touch screen, from our point of view, was not the best idea. Is the there some way (short of patching javascript), to move this button back to the button-bar or swap it with another button we don’t feel to be as important??

2 Likes
12

Hello,

Like this you can add a new preformatted text button to touch devices.

Add the following to a new component Common/Header section.

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
</script>

Add this to Common/CSS section. This will hide the preformatted text button from popup menu.

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

Screenshot_20221204_145422
Screenshot_20221204_1454221080×1389 164 KB

2 Likes
13

@Don - many, many thanks. Works like a charm.

1 Like
14

This would be very helpful. I’ve noticed that most users on my site have no idea that there any options under the wheel/cog menu.

1 Like
15

And I’ve noticed the big majority of users aren.t using toolbar at all. Including here in Meta.

So the Big Question ™ is not ehat we have or have not under cog menu, but should we put everything under the cog and give more cleaner writing experience :smirk:

1 Like