Page MenuHomePhabricator

Flow's VE toolbar v2
Open, MediumPublic

Assigned To
None
Authored By
Quiddity
Mar 19 2015, 6:52 PM
Referenced Files
F17340952: image.png
Apr 27 2018, 1:30 PM
F16902422: Screenshot from 2018-04-10 12-20-10.png
Apr 10 2018, 7:21 PM
F16789948: image.png
Apr 7 2018, 1:19 PM
F4150948: Screenshot - 10062016 - 20:13:17.png
Jun 10 2016, 6:16 PM
F4104524: format.png
Jun 2 2016, 7:10 PM
F4104526: elements.png
Jun 2 2016, 7:10 PM
F4104521: initial.png
Jun 2 2016, 7:10 PM
F4103592: Screenshot - 02062016 - 15:46:08.png
Jun 2 2016, 1:47 PM
Tokens
"Like" token, awarded by Liuxinyu970226."Like" token, awarded by Elitre."Love" token, awarded by Quiddity."Like" token, awarded by Trizek-WMF.

Description

Placeholder, for notes about the second iteration of the VE toolbar.

Things like:


In the 2017 wikitext editor, an option to add <nowiki></nowiki> would also be welcomed.


See also:

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

JamesF said during a meeting that we should provide an option for h1 and h2 titles (even hidden on a sub-menu), because people can do that on wikitext.

How it will look:

Screenshot - 02062016 - 15:46:08.png (235×1 px, 18 KB)

I'd propose to try to make the toolbar a bit more compact in this context. Some ideas:

  • Move the special character action inside the "insert" menu.
  • Move the list creation actions inside the "insert" menu, and remove the list indentation control (the use of tabs should be enough in this context).
  • Remove undo/redo actions since keyboard shortcuts should be enough in this context.
  • Rename "Paragraph" to "Normal" since in a conversation context, compared to a document context, it may not be obvious you are writing a paragraph.

I'd propose to try to make the toolbar a bit more compact in this context. Some ideas:

  • Move the special character action inside the "insert" menu.

@Trizek-WMF initially asked for that, and I tried, but it doesn't want to go there.

  • Move the list creation actions inside the "insert" menu, and remove the list indentation control (the use of tabs should be enough in this context).

Something similar to this was initially requested as well, but it may or may not make sense conceptually. The tools in the list dropdown aren't really insertion tools, but communicate state and can change state. However, @Pginer-WMF suggests using lines to separate sections of the dropdown, which could work. Dropping the indent/outdent tools is easy.

  • Remove undo/redo actions since keyboard shortcuts should be enough in this context.

We could remove these easily enough. @Trizek-WMF wanted to include them for consistency with the normal VE toolbar.

  • Rename "Paragraph" to "Normal" since in a conversation context, compared to a document context, it may not be obvious you are writing a paragraph.

That may be trickier. I understand the rationale, but if we do this should we also change it in VE?

At a higher level, what should we do with this change? It was rushed (my apologies) and will be deployed in its current form on Tuesday unless we do something. Should we revert this until we've figured out what we need?

I'd propose to try to make the toolbar a bit more compact in this context. Some ideas:

  • Move the special character action inside the "insert" menu.

@Trizek-WMF initially asked for that, and I tried, but it doesn't want to go there.

If the issue is related to the special characters becoming a panel, we may want to open a separate ticket, if there is none already ( I think @Esanders was considering some work around that).

  • Move the list creation actions inside the "insert" menu, and remove the list indentation control (the use of tabs should be enough in this context).

Something similar to this was initially requested as well, but it may or may not make sense conceptually. The tools in the list dropdown aren't really insertion tools, but communicate state and can change state. However, @Pginer-WMF suggests using lines to separate sections of the dropdown, which could work. Dropping the indent/outdent tools is easy.

Another way to solve for this would be to make the insert bucket to be more generic. Making it become "More" and use it as an entry point of the tools that do not fit in the default toolbar.

  • Remove undo/redo actions since keyboard shortcuts should be enough in this context.

We could remove these easily enough. @Trizek-WMF wanted to include them for consistency with the normal VE toolbar.

I understand that, but the more options we add the less chances (and more effort is required) for users to find and use the specific tools that are useful in this context (e.g., mentioning people).

  • Rename "Paragraph" to "Normal" since in a conversation context, compared to a document context, it may not be obvious you are writing a paragraph.

That may be trickier. I understand the rationale, but if we do this should we also change it in VE?

In the context of VE it may also make sense since the menu there are options such as "preformatted" which also result in a paragraph (at least from the perspective of those not talking about HTML tags).

At a higher level, what should we do with this change? It was rushed (my apologies) and will be deployed in its current form on Tuesday unless we do something. Should we revert this until we've figured out what we need?

I'd go with adding the "insert" menu for now, and then figure out where we want to go from there.

I illustrated how some of the ideas above would look in context:

Initial state.

initial.png (758×725 px, 101 KB)

Text format and styling:

format.png (758×725 px, 106 KB)

Adding new elements:

elements.png (758×725 px, 108 KB)

Special character is a separate tool because it is a toggle button for the panel, mostly because we couldn't find a place for a hide button in the special character panel.

Change 292912 had a related patch set uploaded (by Catrope):
Revert "Use the standard VE toolbar in Flow as much as possible"

https://gerrit.wikimedia.org/r/292912

Change 292912 merged by jenkins-bot:
Revert "Use the standard VE toolbar in Flow as much as possible"

https://gerrit.wikimedia.org/r/292912

Screenshot - 10062016 - 20:13:17.png (180×593 px, 21 KB)

We may need to shorten that toolbar width on page description' edit field.

What about just expanding sideways, so a [>] button that reveals the extra toolbar groups?

Possible.

So, is it possible to group things like Pau suggested on T93243#2350530?

Any release date for this new toolbar?

No. There is still some design issues and the priority is not on having major changes on Flow at the moment.

(The 2 things I miss the most in Flow so far are "Remove formatting" and a button to add curly brackets.)

Would it be imaginable to have that toolbar as an option? @Quiddity sugests that IPs and beginners have the current toolbar, but an option in parameters give access to a complete toolbar.

Change 424760 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Flow@master] Provide other text styling tools under 'more'

https://gerrit.wikimedia.org/r/424760

The above just adds 'more' to the text styling menu, which exposes the remaining text styling tools.

image.png (233×351 px, 8 KB)

That's great, @Esanders! How does it looks like when deployed (regarding the limited height of the textarea)?

It just goes straight up past the edge of the textarea, it is only bounded by the browser window.

That feedback asks for more tools in the current toolbar, with a good finding on how to create indentations on lists. Is it complicated to create something close to T93243#2350530?

Yes, but that's a bigger piece of work. My commit was just to restore some advanced formatting in a minimally disruptive way.

This looks good in general but I think it needs some tweaks. When I click "More" in the new topic editor, I get this:

Screenshot from 2018-04-10 12-20-10.png (495×349 px, 32 KB)

Note that the "Fewer" button is out of view (I have to scroll to reach it) so I can't easily collapse the menu back in, and part of the menu is obscured by the Page and Discussion tabs.

The z-index should be an easy fix, I'm sure @matmarex knows what to do.

As for the limited height, I'm not sure if this isn't just correct behaviour. The same thing would happen in VE if you had a short window.

Yes, but that's a bigger piece of work. My commit was just to restore some advanced formatting in a minimally disruptive way.

My comment wasn't targeting you, Ed, but anyone watching that task with technical skills to have an idea if that's complicated. I'm still hoping to have that toolbar some day! :)

Hmm - it looks like the toolbar popup is in a local overlay, so all we can do here is clip it to the content area.

It's not that easy, unfortunately, we'll need to make some changes to OOUI toolbars to allow toolbar menus to display on top of everything. On the bright side, in the past we've made the exact same changes to all other kinds of popups and menus we have, so maybe it won't be that hard.

I'll put this in a subtask (T192505), so that I can claim it without claiming this task, because I have no idea what is going on here :)

Change 424760 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Provide other text styling tools under 'more'

https://gerrit.wikimedia.org/r/424760

I do still strongly believe that most of the additional items will get frequent usage, based upon existing editing practices in talkpages.
E.g. skimming the first page of recent changes, I can easily see uses of <code>, bullet-list, numbered-list, template, strikeout.

[n.b. I wrote this in 2016 (hence the old links), but apparently I didn't click [Submit]. It's still accurate and relevant, so I'm posting it now.]