Page MenuHomePhabricator

Move both pointers when clicking into "dead corners"
Closed, ResolvedPublic

Description

Motivation
Currently, the yellow revision can be navigated by the area below, the blue revision by the area above. Since the blue pointer may never surpass the yellow one, there are currently two unclickable areas, where the top (blue) or the bottom (yellow) area cannot be moved.
This leads to confusion for some users, since the "non-clickablility" suggests a broken tool. Furthermore, some people like to jump through revisions quickly for finding out where a change was introduced. Therefore, we want to make the areas clickable, keeping all existing metaphors

Task
When a user hovers over the currently non-clickable areas, highlight the bar + show a ghost pointer as designed in [T172092]. Furthermore, highlight the bar and show a ghost for the other pointer as well, with an offset of one to the first one. That means, the end result should be like the one pointer having pushed the other pointer with it.
When the user then clicks on the highlighted bar, both pointers move to the indicated positions.
If the user switches from top to bottom or vice versa, the new highlighting disappears and we are back to the currently implemented behavior

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 373063 had a related patch set uploaded (by WMDE-Fisch; owner: Addshore):
[mediawiki/extensions/RevisionSlider@master] Reintroduce improved hover and bar clicking

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

@WMDE-Fisch @Jan_Dittrich

This is looking good!

My intuition is that the bar of the one being brought along (for example the yellow if you are clicking on the top for blue) should not be highlighted (the ghost should stay). The reasoning I have for this is that it would push users towards understanding which slider they are controlling and which one is reacting. It would help us to make sure that the top: blue, bottom: yellow rule remains clear.

the_bar.png (608×569 px, 100 KB)

Low priority bug: an invalid move (as pictured below) is still highlighted and ghosted as if it is possible.

lilbug.png (759×569 px, 112 KB)

@James_Budday

Thanks for the feedback! I addressed your issues and it should work like that now on the test wiki. :-)

Although I kind of like the idea of leaving out the highlight for the bar that is just "reacting", the contrast for the yellow ghost pointer is quite weak and a bit hard do spot in my opinion. But thats just a nit pick...

I agree. Here are two versions with small changes that might begin to address that.

1 fill in ghost bubble

Fill Bubble.png (555×866 px, 120 KB)

2 fill in ghost bubble and add gray bar

Fill Bubble + Gray Bar.png (555×866 px, 120 KB)

Does version 2 do a good job of increasing the contrast enough for one to notice it better without introducing any new problems? @WMDE-Fisch @Jan_Dittrich

@James_Budday @Jan_Dittrich I did variant 1 and filled the bubbles, it's live on the uca system. Personally I think, this is sufficient and version 2 is a bit more complicated to implement at the moment. So if you agree I would leave it like that and release the patch to the code-reviewers :-)

Hi @WMDE-Fisch @James_Budday : I suggest a minor change, since the filled yellow bubble now looks less ghosty and much like the real one. Suggestion:

image.png (219×426 px, 12 KB)

(photo shows after css change)

border: rgb(222,168,8)
fill: rgb(255, 242, 218);

→ More contrast/visibility and still ghost-y! (I think)

As talked about with @WMDE-Fisch, we just keep the blue one as it is since the suggested changes were made to make the yellow one visually more similar to the blue one.

Change 373063 merged by jenkins-bot:
[mediawiki/extensions/RevisionSlider@master] Reintroduce improved hover and bar clicking

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