Move emoji picker and "Insert image" under the overflow menu

[luka-nextcloud]

Signed-off-by: Luka Trovic luka@nextcloud.com

• Resolves: Emoji picker and "Insert image" should go into the overflow menu #2606
• Target version: master

Summary

Screencast.from.30-06-2022.22_59_14.webm

[susnux]

Have you tested the Insert image part? While developing the link menu entry I noticed Actions within the overflow menu do not work, so for me callouts insert image (and my insert link) menus do not work when allowed to move into the overflow menu.

[vinicius73]

Originally those are not in the overflow menu because those are "dropdown menus", like "heading" and callouts.

[max-nextcloud]

I like the idea of moving some actions to the bottom. I think we actually might need both places and more drop down menus. How about this:

• on top:
  • history ( undo, redo - drop down only if redo is available )
  • style ( bold, italic, underline, strike )
  • headings ( h1...h6 )
  • lists ( unordered, ordered, todo )
• on bottom:
  • blocks ( quote, code, info, success, warn, error )
  • table
  • emoji
  • image
  • formatting help

[luka-nextcloud]

Hmm, the uploaded image and emoji don't work inside the overflow menu.
@max-nextcloud From my understanding, the items inside your round bracket should go into dropdown. So, I think the quote, code, info, success, warn, and the error should go into dropdown because I believe we don't have enough space.

[max-nextcloud]

@max-nextcloud From my understanding, the items inside your round bracket should go into dropdown. So, I think the quote, code, info, success, warn, and the error should go into dropdown because I believe we don't have enough space.

Yes... totally agree. I changed my comment above acordingly. Now all dropdowns are written as brackets. I my list they have a name (history, style, ...) in order to clarify why i'd put them in one place. So far this name is only to make it easier to discuss this - it would not show in the ui.

[luka-nextcloud]

@max-nextcloud I've updated the summary with a new video.

[jancborchardt]

I'm not fully sure about the separation of the toolbar, as it seems a bit arbitrary as it is now.

A separation which would seem fine is to put undo/redo at the top, and everything else on the bottom, for example. So all formatting is together. It's also fine to have horizontal scrolling in the bar as e.g. GitHub mobile does it.

Otherwise we repeat a similar confusion we had with the toolbar + menu which appears when narking text.

[jancborchardt]

Also to add: What takes most space at the top currently is actually the "Saved" indicator which can be done via an icon, or with an asterisk / circle next to the filename if there are unsaved changes.

[luka-nextcloud]

@jancborchardt How does it look like? :)

Screencast.from.05-07-2022.22_38_00.webm

[max-nextcloud]

Just a few thoughts:

• I like the idea of using an icon as a saved indicator a lot.
• The floppy icon does not work so well i think - some people don't know what a floppy is these days ;). I'd personally use a checkmark when it's saved and some form of progress indication (spinning wheel, etc.) sync when it's not saved. I would not make it blue in either state.
• I like the clean look of only undo and redo on top.
• I don't like the scrolling of the bottom toolbar. If the help icon is not on the screen initially it might be hard to find.
• @jancborchardt would you be okay with still moving the formatting (bold, italic, strike through, ...) into a submenu but on the bottom? I think that would save quite some space / scrolling.
• todo list seems to be missing in the last video, right?
• @jancborchardt would you be okay with combining the lists into one submenu?

[mejo-]

I mostly agree with @max-nextcloud comments.

One additional thought: would it be an option to move the help icon to the top as well? It's not a formatting tool either, so could fit next to the redo/undo buttons, no? @jancborchardt

[susnux]

From mobile perspective scrolling makes using the lower menu bar is harder, so moving the formatting help to the upper menu makes sense on mobile (and in general).

Also the priority of e.g. emoji picker is on mobile quite low as most keyboards already have a (better) emoji input (e.g. you can type more than one without the need of reopen the menu), so there is no problem with hiding it in an overflow menu as you probably do not need it here.

It is also possible to thin out the menu by hiding disabled entries, like the blockquote if you are within an list entry (isDisabled is already available) or later the list indention button (heavily required on mobile!)

[juliusknorr]

@nimishavijay Any thoughts on that until @jancborchardt is back? :)

[nimishavijay]

This is a good improvement! The top bar looks much cleaner now :)

• The floppy icon does not work so well i think - some people don't know what a floppy is these days ;). I'd personally use a checkmark when it's saved and some form of progress indication (spinning wheel, etc.) sync when it's not saved. I would not make it blue in either state.
• One additional thought: would it be an option to move the help icon to the top as well?
• Also the priority of e.g. emoji picker is on mobile quite low as most keyboards already have a (better) emoji input

Agree with these points!
I am not so sure about scrolling horizontally as it can be easy to miss. Some options:

1. Hide everything that is overflowing in a submenu
2. Categorise into submenu like @max-nextcloud said
3. Kind of a contextual bottom bar, where depending on what you click some items are hidden or shown, expanding on what @susnux said. Google docs does something like this. By default, the options shown are bold, italic, underline, text colour, highlight, text align and list. If you click the list button, text color, highlight and text align are hidden and in their place checklist, bullet list, numbered list and increase/decrease indentation of list are shown. We can group the options and show them only if they are relevant.

I like 2 because it shows all the options available in a simple way, but I like 3 because it allows you to easily switch between formatting options without opening menus. What do you think? cc @jancborchardt

[max-nextcloud]

@luka-nextcloud what do we do with this? My understanding is that we discussed at the ui review and came up with some ideas for submenus etc... but is this PR still relevant to that?

[juliusknorr]

Let's close this as from the discussion the actual implementation would be quite different and requires more refactoring as described in #2836