Composer menu: on narrow pages, items disappear off the right side including all important OPTIONS item

On narrow windows, the items on the right side of the composer menu disappear and there is no indicator that they even exist until you make the window wide again. On mobile this means rotating the phone, which then (on my clunky samsung galaxy note 2) makes it impossible to edit because the keyboard and composer header takes up the whole screen.

The most important item on this menu for me is the options item, so I can get to the whisper function. Maybe an easy answer would be to move it left, say next to the upload item?

A more involved answer would be to provide an indicator that there are hidden items off to the right and some sort of horizontal scrolling or pulldown to reveal the hidden items. It could look like the options popup.

I do have the formatting toolbar plugin installed, which pushes the options item all the way to the right so it’s the first to get cut off on narrower windows. @Steven maybe you could contemplate having your formatting items display to the right of the options item? Or have your formatting items display in a popup like the options?

Screenshots - this post on meta with narrowish window, no options item:

new post on my site with formatting toolbar, much wider but still no options item:

I can’t place them to the right of the “gear” icon. They can all be placed between emoji and gear. What icon is most important to you ?

The best way would be to hide some specific icons, I explained the process here : Formatting toolbar

Or you could fork the plugin on github and customize it a little, I can explain the process if you’re interested

But I don’t know if changing the plugin for everyone is the best solution here, I don’t have a lot of feedbacks, but it seems that the choices I made were appreciated. If there is a recurring request to delete some icons or reorganize it, I’ll do it.

1 Like

I like what Google Sheets does. A “more” button that can be clicked and shows all hidden buttons. I think this would be nice to have in core, because even without extra formatting buttons narrow screens can have lost buttons. Could this be #pr-welcome @sam?

Full width:

Not enough width:


image

2 Likes

Right now it seems like the gear icon serves as a “more” function in a way? Maybe a “more” option instead of it (or in addition to it?)

4 Likes

This is specific to whatever crazy plugin you are using that is adding a dozen icons to the toolbar.

1 Like

Is it? This happens on narrow screens to. Here’s Meta composer in a <860px wide window. The gear is hidden. I’ve run into this personally when I use Meta in a smaller window alongside other windows, I have to expand the window size to get to the gear, then shrink it back into whatever size I had it previously.

1 Like

That is comically narrow and you can trivially fix by hiding the editor preview. Try it.

1 Like

Here’s a little before and after @jomaxro . Just click that “hide preview” at the bottom right… and :boom: problem solved.

2 Likes

This has been interesting - thanks for the replies. I really like @awesomerobot’s suggestion to have a “more” option instead of a gear icon. Neat.

@steven sorry to hear the placement of your plugin icons can’t be changed. I’m not interested in forking your plugin just for my site. I am interested in making suggestions that lead to improvements for everyone using this software.

@codinghorror I understand your point about hiding/showing preview and it helps, at least on desktop. But it doesn’t help those people who don’t know that there are icons there that are hidden. Also doesn’t help me on mobile with that “crazy plugin” I am using. :crazy_face:

You dug your own hole there, and should follow up with whoever wrote that plugin. It’s not us.

I also think it’s really questionable to add a ton of very rarely used formatting items to the toolbar. I think we should actually offer even less icons in the editor than we do now by default cc @awesomerobot – perhaps we can drop one or more of them? I mean how often do people really need to use the toolbar to enter:

  • a heading
  • a horizontal rule

Whereas,

  • bold, italic
  • link
  • quote
  • code
  • bulleted list
  • numbered list

are quite defensible and I use all those regularly. When was the last time I entered a header or horizontal rule? Weeks or months ago…

oddly enough Gmail hides virtually all formatting behind another pop-up bar now.

Its default toolbar only includes

  • attachment (two types!)
  • send money (?)
  • photo
  • link
  • emoji

Zero bold, italic, anything. But notice that horizontal rule and heading appear NOWHERE on the google formatting toolbar!

3 Likes

IPad in portrait mode is 768 but I’ve seen some wacko android tablets having 8xx I’m portrait mode.

Desktop really shouldn’t be less than 1024 in today’s world…

So we are talking about very edge case devices here.

I am in 100% agreement we should remove horizontal rule. I am not sure of removing headings though.

1 Like

Turns out that it seems to be too narrow (with the preview pane) to show all the icons on an iPad Mini in PORTRAIT mode…

It could only show 11 icons while there are 13…

1 Like

It’s not in gmail, therefore it has to go. Headings are incredibly rare. I already assigned it to @zogstrip, we can kill off two extranous icons here.

Did you notice Google has three, THREE, :three: attachment icons on the default toolbar in Gmail? :scream_cat:

So it’s like…

  1. format (expands)
  2. attach Ă—1, attach Ă—2, attach Ă—3
  3. send cash monies :dollar:
  4. link
  5. emoji
5 Likes

https://github.com/discourse/discourse/commit/62156885ec12887d291ee6413a2b57ab589533e4

3 Likes

The trouble is that there is so much magic hiding in CommonMark and our implementation, we don’t even have a help button for new users

1 Like

We can add some kind of expando-button later. Trust me, nobody gives a :poop: about headings or horizontal lines, and if you do, you surely know how to type them. See: Gmail.

1 Like

Maybe lump them into the gear icon?

I occasionally see my users bolding text and all-caps them to make a heading… Of course none of them know to press the heading icon in the first place.

So headings are somewhat necessary, but right now the icon doesn’t seem to be any help in getting users to use it, so good riddance.

Honestly most of the time I see people use headings they are basically griefing people with them by YELLING

3 posts were split to a new topic: Do we need a help button on the composer?