Page MenuHomePhabricator

Let users collapse a description by clicking on it again, after expanding it
Closed, ResolvedPublic


Acceptance criteria

  1. Open an image that has a long caption or description, like this Rapa Nui map on alpha.
  2. Click on the long caption (or its ellipsis) to expand it
  3. Clicking on it again should collapse that long caption and bring the panel back to its closed state. (we don’t want to interfere with text selection)
  4. When the panel is open and the user clicks on the image or the black background area, the panel collapses.
    1. When hovering the image, if the panel is open, the cursor will be the regular pointer (not the magnifying glass). This is because clicking on the image is not going to trigger the zoom but close the panel instead. Once the panel is closed, the “zoom” behaviour would be as usual again (and the cursor the zoom-in one).
    2. Note that other controls over the image are not affected by this. That is, the user will still be able to go next/previous while keeping the panel open.
  5. On full-screen mode, hovering outside the metadata panel will compact it again. This won’t be visible for the user since we are hidding the panel when the user moves the mouse outside of it in full-sceen mode.

Design notes

The panel should be closed in a smooth (but not necessarily slow) transition. I created a quick hack to see how this will look:

$(".mw-mmv-image img, .mw-mmv-image-wrapper").click(function(e){ if($(".mw-mmv-post-image").hasClass("panel-open")){ $("html, body").animate({ scrollTop: 0 }, "slow"); e.stopImmediatePropagation(); } }) jQuery._data( $(".mw-mmv-image img")[0], "events" ).click.reverse()

Event Timeline

MarkTraceur raised the priority of this task from to High.
MarkTraceur updated the task description. (Show Details)
MarkTraceur moved this task to Next up on the Multimedia board.
MarkTraceur changed Security from none to None.
MarkTraceur added a subscriber: MarkTraceur.
Gilles assigned this task to Tgr.Dec 2 2014, 10:36 AM
Gilles moved this task from Next up to Needs code review on the Multimedia board.

Change 175189 had a related patch set uploaded (by Gilles):
Close panel on canvas click fullscreen mouseleave


Change 175189 merged by jenkins-bot:
Close panel on canvas click fullscreen mouseleave

Gilles moved this task from Ready for testing to Doing on the Multimedia board.Dec 10 2014, 4:27 PM
Gilles closed this task as Resolved.Dec 10 2014, 10:19 PM
Gilles moved this task from Doing to Done on the Multimedia board.