Why so many options in the gear editor menu?

[seanblue]

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?

[JammyDodger]

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

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

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

[Tris20 (Tristan)]

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

[Don]

Hello,

Is this a touchscreen device?

UX: improve composer toolbar flexibility

[seanblue]

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.

[denvergeeks]

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 !!!

To rearrange the buttons this CSS can be added to your theme:

.d-editor-button-bar {
  button:nth-of-type(n+7) { // Button which is 8th in order, and gear drop-down
    order: 2;
  }

  button.upload { // Place upload button before above elements
    order: 1;
  } 
}

What this is doing:

By default order is set to 0.

Adding order: 2 to the 8th button and all elements after it means they’ll be placed after anything with a lower order. Since they all share the same order value, they’ll fall back to the sequence of appearance in the HTML.

Adding order: 1 puts the upload button before everything with order: 2 and after everything with the default order: 0. So this puts it to the left of the tile button instead of the right.

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. 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

[seanblue]

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.

[awesomerobot (Kris)]

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.

[Jagster (Jakke Lehtonen)]

@awesomerobot

allow an admin to decide what gets hidden within the cog dropdown, so this may become configurable in the future

Really big +1 for this.

[seanblue]

@awesomerobot

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.

A user setting would be better.

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.

[thess (Ted Hess)]

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??

[Don]

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;
  }
}

---

[thess (Ted Hess)]

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

[rahim123]

@awesomerobot

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.

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.

[Jagster (Jakke Lehtonen)]

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

[sableraph (Raphaël de Courville)]

Following the latest update to Discourse, it seems the solution provided by @Don is no longer functioning, and the code formatting button is also missing from the cog menu. Edit: By removing the custom component, the button reappears in the cog menu. We now need an alternative fix to bring the button back in the header menu on mobile.

As a moderator for a programming learning forum, it’s really important that our users can properly format their code, including on mobile devices. This issue is making things more challenging for us.

[Don]

Hey @sableraph

Thanks, I’ve made a working theme component now for this. GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

[sableraph (Raphaël de Courville)]

Thanks for your reply!

I’m not sure how to install the theme but I managed to patch your original component like so:

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

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

The CSS remains the same.

[thess (Ted Hess)]

This appears to be broken in the latest update of Discourse (v3.3.0-beta2). The button is on the toolbar but selecting it fires an error about ‘formatCode’ is not a function. The button remaining on the cog gear does work OK. What changed?

[Arkshine]

@sableraph

action: "formatCode",

Replace

action: "formatCode",

By

action: () => toolbar.context.send("formatCode")

That should fix the issue