Page MenuHomePhabricator

Consider changing the presentation of the visual mode's editing toolbar
Open, Needs TriagePublic

Description

This is a task to capture the feedback reported about the Reply tool's visual mode's toolbar.

The "Feedback" below could warrant a series discrete interventions that warrant their own tickets or a series of changes made together as part of this single ticket.

For now, we will use this task to accumulate feedback.

Feedback

IssueDescriptionTicketSource(s)
1"On a wide screen the styling buttons are quite far on the right edge from the area where my mouse is typically (above the text)." and "I needed one big second to find where the style buttons were. I think they are too far to the right (on a large screen like mine)."T257280https://www.mediawiki.org/wiki/Topic:Vmtco3nu7vnfmobq + https://w.wiki/Sz6 (@Jules78120)
2When typing a long comment, user might have to scroll all the way up to use those tools. It does not currently look like a toolbar with editing tools to me rather some static options.

Possible approaches

  • Fix the editing tools to the bottom of the text input area, as is done in flow. See: T252445#6131077
  • Revise the location of the editing tools within the toolbar

Event Timeline

Ryasmeen created this task.May 11 2020, 7:21 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 11 2020, 7:21 PM
Demian added a subscriber: Demian.May 11 2020, 11:36 PM
Esanders added a comment.EditedMay 12 2020, 8:05 PM

I think if we had the toolbar fixed to the bottom like Flow this would be much less of an issue, as most of the time your cursor is at the end of the document.

That said I think comments longer than a page are relatively rare.

ppelberg renamed this task from [Feedback] Consider floating the toolbar for the rich text editing mode for Reply box to Consider changing the presentation of the visual mode's editing toolbar.May 30 2020, 1:33 AM
ppelberg updated the task description. (Show Details)
ppelberg added a comment.EditedMay 30 2020, 1:35 AM

Updated the task description to:

  • Include additional feedback @Demian shared here: https://w.wiki/SEh
  • Expand the task's scope to include the range of feedback people are sharing.
Demian added a comment.EditedJun 1 2020, 5:46 AM

Thank you, @ppelberg!

I'd like to share ideas... stolen from Gmail, actually. I find that message composing interface very user-friendly.

  1. The editing toolbar is on the left side. Though there's no "Visual" / "Source" tab in gmail, I think the toolbar would fit well on the right side of the "Source" tab with some margin between the two.
  2. Gmail keeps both the top and the bottom of the editor on-screen. This approach would result in both the toolbar (top) and the edit actions (bottom) to stay on-screen all time. I think this is the best UX:
    1. The toolbar (top) and editactions (bottom) are position: sticky. Note that the new Vector's header will be sticky as well (DEMO), therefore the toolbar's top has to be adjusted for that skin when that gets implemented in a few months (T246170: 69px as of 2020-06-01).
    2. As a visual hint the top and bottom toolbars drop a shadow on the editing area whenever there is text off-screen.
Implementation:

The .dt-ui-replyWidget-modeTabs element is moved into .oo-ui-toolbar-bar (necessary for both points).
Positioning with flexbox and float fallback for some old browsers.

.dt-ui-replyWidget .oo-ui-toolbar-bar {
    display: flex; // Not strictly necessary.
}
.dt-ui-replyWidget .dt-ui-replyWidget-modeTabs {
    position: unset;
    float: left;
}
.dt-ui-replyWidget .oo-ui-toolbar-tools {
    float: left;
    margin-left: 2em;
}
CSS draft for the sticky toolbars:
@background-color-base: #fff; // skin's default BG
@size-toolbar-shadow: 4px;

.dt-ui-replyWidget .oo-ui-toolbar {
    position: sticky;
    top: 0;
    background-color: @background-color-base;
    z-index: 1;
    &.oo-ui-dropshadow {
        box-shadow: 0px @size-toolbar-shadow @size-toolbar-shadow -@size-toolbar-shadow;
    }
}

.dt-ui-replyWidget-actionsWrapper {
    position: sticky;
    bottom: 0;
    background-color: @background-color-base;
    &.oo-ui-dropshadow {
        box-shadow: 0 -@size-toolbar-shadow @size-toolbar-shadow -@size-toolbar-shadow;
    }
}
ppelberg updated the task description. (Show Details)Jun 5 2020, 1:22 AM
ppelberg added a subscriber: Jules78120.
ppelberg updated the task description. (Show Details)Jun 5 2020, 1:42 AM
ppelberg updated the task description. (Show Details)
ppelberg added a subscriber: Wladek92.
  1. Gmail keeps both the top and the bottom of the editor on-screen. This approach would result in both the toolbar (top) and the edit actions (bottom) to stay on-screen all time. I think this is the best UX:

This is mostly resolved by T254208: Revise position and behavior of Reply tool's text input

Thank you, @ppelberg!

I'd like to share ideas...

@Demian we appreciate you advancing the thinking on this and going so far to draft an implementation!

Here is what we're thinking as it relates to resolving these two issues [ii]: Initially, we are going to focus on the first issue: people can find the tools hard to reach when writing comments on a wide screens.

To address this issue, we are going to try the approach you proposed [i], moving the tools to the side of the screen where writing starts (read: on the left side of the screen in left-to-right languages and on the right side of the screen for right-to-left languages).

This implementation will happen in: T257280.

Now, as to why we are going to address Issue 1 – "tools can be hard to reach" – first:

  1. People finding the tools hard to reach is an issue we assume some people will experience quite often
  2. Addressing the above issue fits nicely with the plan we have to experiment with making the visual and source mode switcher less prominent in the UI (T256166) so as to minimize the likelihood people new to using talk pages will be confused by the tool's two modes (T246190#6201892 + T246190#6186156)
  3. We are assuming fewer people will encounter Issue 2 less frequently than they will Issue 1.

All of the above is now represented in the task description.


i. Issue 1: People can find the tools hard to reach when writing comments on a wide screens; Issue 2: People can have difficulty locating the tool when writing a long comment [b/c the tools are out of view].

ii.

The editing toolbar is on the left side. Though there's no "Visual" / "Source" tab in gmail, I think the toolbar would fit well on the right side of the "Source" tab with some margin between the two.

ppelberg updated the task description. (Show Details)Tue, Jul 7, 12:37 AM