Page MenuHomePhabricator

S5. Flow: Integrate VE toolbar in Flow entry fields
Closed, ResolvedPublic0 Estimated Story Points

Description

Controls on the toolbar:
Bold/Italics, Link, Mention, Icon switch to wikitext:

toolbar_mockup.jpg (619×782 px, 196 KB)

Bold/Italics icon pops up a menu:

bold_ital.jpg (599×810 px, 204 KB)

Mentions icon pops up as an inspector modal, similar to the VE link modal. It should have an arrow pointing at the cursor.

The mentions box is pre-populated with usernames that have already posted in this topic. The names should be in alphabetical order. Don't include IP addresses for anons.

(What happens when it's too many? Scroll bar? When does that happen? What does it look like with no names?)

mentions_menu.jpg (622×823 px, 210 KB)

Switch to wikitext: T90763: S6. Flow: Switching from VE to wikitext and back without losing content VE icons disappear, and the icon switches to reverse colors.

Text at the bottom says: "Wikitext uses markup, and you can preview the result any time."

"Preview the result" is a link -- clicking on it switches the user back into VE mode.

"Markup" is not a link.

wikitext.jpg (611×785 px, 208 KB)

Tooltips: Hovering on the wikitext icon pops up a tooltip.

In VE: "View message as wikitext"

In Wikitext: "View message as rich text"

view_msg_1.jpg (634×985 px, 210 KB)

view_message_2.jpg (634×1 px, 223 KB)

We also decided to put a ... menu to the right of the main 3. Behind that will be keyboard shortcuts.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
DannyH triaged this task as Medium priority.Feb 25 2015, 7:43 PM
DannyH edited a custom field.

As discussed, since we want to keep the editing mode as a persistent preference it may not be clear how to preview to those users that prefer using the wikitext editor.

However, keeping the current preview action will also lead to a preview state which is very close to the rich text editing one but non-editable. That may also generate confusion (e.g., correcting a typo you noticed while previewing requires several navigation steps and reorientation). So having two modes instead of three seems a good idea.

We can provide a clear entry point for those users looking for previewing their message, but still use the rich text editing as the preview mode.
Some options to achieve that:

  • Show a secondary access to rich text editing labeled as preview:

flow-wikitext-rev.png (534×698 px, 79 KB)

  • Replace the source toggle button with specific actions for mode change and use an icon that could work for both "go back to rich text editing" and "preview message":

flow-wikitext-prev.png (534×698 px, 78 KB)

  • Keep the current preview button but make it switch to the rich text mode instead.
DannyH renamed this task from Flow: Implement VE layout from Pau's mockups to Flow: Implement VE toolbar layout from Pau's mockups.Mar 10 2015, 7:02 PM
DannyH renamed this task from Flow: Implement VE toolbar layout from Pau's mockups to Flow: Implement VE toolbar layout .
DannyH added a project: Roadmap.
DannyH moved this task from Unscheduled to March 2015: Features & Apps on the Roadmap board.
DannyH renamed this task from Flow: Implement VE toolbar layout to S5. Flow: Implement VE toolbar layout .Mar 11 2015, 9:44 PM

I'm going to do at least part of this as part of the mention patch.

@Pginer-WMF, can you make a 24x24 user mention SVG for the toolbar icon?

Change 196866 had a related patch set uploaded (by Mattflaschen):
WIP: Refactor and implement mention inspector

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

That patch limits us to the three icons requested. It does also still have the menu button.

I assume we'll want to get rid of that, but it does have the find/replace and keyboard shortcut listing, so it would be reasonable to keep it.

I didn't start looking at how to move it to the bottom yet.

@Mattflaschen Here is the user mention icon.

Let me know where I can check how it fits with the rest, in case I need to adjust the position of the elements a little.

Change 197862 had a related patch set uploaded (by Mattflaschen):
Add VisualEditor as dependency for Flow

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

Change 197862 merged by jenkins-bot:
Add VisualEditor as dependency for Flow

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

@Mattflaschen Here is the user mention icon.

Let me know where I can check how it fits with the rest, in case I need to adjust the position of the elements a little.

Thanks. You can test at http://ee-flow.wmflabs.org/wiki/Talk:SomethingElse . All the other icons except mention and switcher are from VE.

It is great to see this live. Some comments:

  • The actions provided work quite well in general.
    • Clicking "outside" to close inspectors is sometimes unreliable.
    • While tying a username in the mention inspector I'd expect autocompletion to show the matching user names.
  • Loading takes a while and is quite noticeable:
    • If this could get pre-loaded without delaying the content display users would be able to get to editing immediately in most of the cases. Ideally while I'm reading the discussion some of the idle cycles of my computer could be used to anticipate my intention to participate in the conversation.
    • The fact that the input area disappears while waiting, makes the waiting more prominent (is not clear what is going on). If we could keep the input area visible and the loading indicator inside it, we would be able to communicate that we are preparing the text area for you to edit it.
    • We should unify loading indicators at some point (T76587).
  • The text area right border is cropped for some reason which makes it not visible.
  • The toolbar should be better integrated into the text area. I tried applying the following style adjustments to the toolbar:
position: relative;
top: -3px;
border: 1px solid #ccc;
border-top: none;

Screen_Shot_2015-03-23_at_15.05.40.png (318×723 px, 39 KB)

  • When the user is typing, the text area is highlighted in blue. This creates a separation between the text area and the formatting actions. If we apply the suggestion above, we'll need to adjust the toolbar borders in a similar way to make the toolbar look as if it were integrated in the text area.
  • The button to switch between VE and wikitext is shown in green when it is pressed. It should be a regular grey pressed button. Otherwise it competes with the main "publish" action too much.
  • The tooltip for logged-out users should point to the text area. Currently it points to the VE-wikitext switch which makes it confusing.

Screen_Shot_2015-03-23_at_13.08.48.png (338×973 px, 48 KB)

  • The VE-Wikitext switch is missing its tooltip as illustrated int he mockups on the ticket description above.

Most of the above may be already in the works, but I wanted to capture what I noticed to avoid some details to get forgotten.

Another aspect I noticed yesterday is that on the wikitext editor, the link to wikitext format opens in the current window by default. I think it should be set to open in a new tab by default since asking the user to abandon the current editing context to learn how the formatting work puts the user unnecessarily into a hard choice (learn to format or lose the current text the user was typing). Today I tried to reproduce but the wikitext-switch button was not available in the demo instance.

It is great to see this live.

Thanks (and thanks to Matthias and Erik). :)

  • Clicking "outside" to close inspectors is sometimes unreliable.

T94109: Click outside to close doesn't always work as intended for mention inspector

  • While tying a username in the mention inspector I'd expect autocompletion to show the matching user names.

We decided to only consider posters in the current thread for the initial version, but I agree this is an important feature: T93421: Full user auto-complete for mention inspector

  • Loading takes a while and is quite noticeable:
    • If this could get pre-loaded without delaying the content display users would be able to get to editing immediately in most of the cases. Ideally while I'm reading the discussion some of the idle cycles of my computer could be used to anticipate my intention to participate in the conversation.

As discussed, Erik has patches for this.

  • The fact that the input area disappears while waiting, makes the waiting more prominent (is not clear what is going on). If we could keep the input area visible and the loading indicator inside it, we would be able to communicate that we are preparing the text area for you to edit it.

T94111: Show an empty textarea with a loading indicator in center when editor (i.e. VE) is loading

  • The text area right border is cropped for some reason which makes it not visible.

Let's keep an eye on that. It may just be a box-sizing issue.

  • The toolbar should be better integrated into the text area. I tried applying the following style adjustments to the toolbar:
position: relative;
top: -3px;
border: 1px solid #ccc;
border-top: none;

Screen_Shot_2015-03-23_at_15.05.40.png (318×723 px, 39 KB)

  • When the user is typing, the text area is highlighted in blue. This creates a separation between the text area and the formatting actions. If we apply the suggestion above, we'll need to adjust the toolbar borders in a similar way to make the toolbar look as if it were integrated in the text area.

T94112: Toolbar should appear to be within text area As mentioned there, this is a somewhat problematic aspect of the mockup integrating the toolbar and textarea.

  • The button to switch between VE and wikitext is shown in green when it is pressed. It should be a regular grey pressed button. Otherwise it competes with the main "publish" action too much.
  • The tooltip for logged-out users should point to the text area. Currently it points to the VE-wikitext switch which makes it confusing.

Screen_Shot_2015-03-23_at_13.08.48.png (338×973 px, 48 KB)

  • The VE-Wikitext switch is missing its tooltip as illustrated int he mockups on the ticket description above.

Copied to T90763: S6. Flow: Switching from VE to wikitext and back without losing content

Most of the above may be already in the works, but I wanted to capture what I noticed to avoid some details to get forgotten.

Thanks for the feedback, as always.

In T90764#1155499, @Mattflaschen wrote:

Let's keep an eye on that. It may just be a box-sizing issue.

Fixed in https://gerrit.wikimedia.org/r/#/c/200102/ .

This was in this week's column in Roadmap, how'd it go? Still more to do?

In T90764#1155499, @Mattflaschen wrote:
  • The text area right border is cropped for some reason which makes it not visible.

Let's keep an eye on that. It may just be a box-sizing issue.

This was a box-sizing issue. Perhaps not the right place to have put it, but the fix snuck into my "move toolbar below editing surface" patch https://gerrit.wikimedia.org/r/#/c/198395/6/modules/editor/editors/visualeditor/mw.flow.ve.Target.less

This was in this week's column in Roadmap, how'd it go? Still more to do?

This one is still working its way through code review

DannyH renamed this task from S5. Flow: Implement VE toolbar layout to S5. Flow: Integrate VE toolbar in Flow entry fields .Mar 27 2015, 6:11 PM

Change 196866 merged by jenkins-bot:
Refactor and implement mention inspector

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

On Beta right now, I'm seeing an older version -- buttons above the field, and no switch icon...

This is live on Mediawiki now.