Commit graph

42 commits

Author SHA1 Message Date
Divya adbf42280e Match size of preview and real image
Bug: T87295
Change-Id: I04746dcb80e571a624366b86fd5c5f4cbc31185b
2015-01-23 15:22:39 -05:00
Fomafix ae99be730e Apply coding conventions for JavaScript
Change-Id: I57a8f188eb1152438a8e94235a6f6801e2617c28
2015-01-23 12:48:27 +00:00
m4tx 9a6039b580 Improve error messages UI for Media Viewer
Bug: T77272
Change-Id: I97ffa70903da32c66697c52969cfec2df03c1d57
2015-01-14 08:24:27 +01:00
Namit d66509e2de Open the download panel when an image is right clicked
Many users right-click on images as a way to download them.Due to this,
they may get a scaled-down version which is used for display purposes and
also not given guidance on how to attribute.

Bug: T75999
Change-Id: I30655a0dda4430b494a393f1fa708fce6ca6fafe
2015-01-07 22:48:00 +05:30
gladoscc 7f4ce833d4 Log right-clicks on the image
Record how many users right-click on the image in MediaViewer, with the
assumption being they're intending to download the image. However, that
image has been resized and is not the original.

The event is logged even if the metadata panel is open, as the user probably
still intended to download.

Bug: T75962
Change-Id: I223ed957bcc60646adf9c9a00d2d9ca18ad128e6
2015-01-01 13:24:32 +11:00
Gergő Tisza 07f7b837fa Close panel on canvas click + fullscreen mouseleave
Also remove the unused mmv-image-click event and fix a bug
where links got right-aligned when the panel was opened in
fullscreen mode.

Change-Id: If538ac420da4aae3908ac96978491f89c5b53493
Bug: T76029
2014-12-08 14:52:52 +01:00
Gergő Tisza 0997b82650 Fix some metadata panel scrolling/text truncation bugs
* isOpening was calculated too early, so whenever the panel was
  partially open and opened up fully via the forceDirection
  parameter of toggle(), it was logged as the wrong direction.
  (I think the only way for this to happen is via clicking on
  "view terms" while the panel is partially open.)
* scrolling did not go all the way to the bottom when text was
  truncated as the target position was calculated before untruncating.
* panel position was not preserved in some cases where it could have
  been because the attempt to restore it happened before untruncating
  the text, when the panel was not high enough.

Change-Id: I47a96d42c80e0a00d95023526ede3b5bbf18a52c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/983
2014-11-22 06:22:35 +00:00
Gergő Tisza e7f720506f Change text truncation logic to more closely follow panel state
Several related changes to text truncation:
* remove untruncate-on-click so untruncated text is selectable
  (untruncate will happen on click to the canvas are instead,
  to be implemented in a followup patch)
* simplify the truncate/untruncate logic to be wholly based on
  panel open/close state, and fix a bug which made panel state
  and text truncation state inconsistent when prev/next
  navigating while keeping the panel open.
* remove several variations on scrolling the panel in favor of
  using toggle + remove some other unused truncation-related code
* fix a minor unrelated style bug which made truncate/untruncate more
  jarring than it had to be when the title was short by making the title
  higher on panel open even though the text did not use the extra height
* align title ellipsis better
* make sure clicking on the truncated title works even if the click is
  between lines and so misses the inline box of the <span>

Change-Id: Ie0b3afb3833102b6a9812cb7fe2df78ec5eb8396
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/983
2014-11-22 06:22:33 +00:00
Gilles Dubuc 2adf7a2008 Get rid of phantom tipsy bubbles that can appear after closing
Bug: 72516
Change-Id: Ia638688afc4d4373065c0d8a19dfcc11a7e9561e
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/1005
2014-11-19 12:13:47 +01:00
Mark Holmquist 1853540cd3 Add viewing options panel
Enable, disable, and get confirmations.

Lots of UI work on this one.

Change-Id: I1f731992bd240e7ea403592872f7c7e270158753
2014-10-19 00:27:15 +02:00
jenkins-bot 2203f89236 Merge "Log image dimensions" 2014-09-30 15:15:54 +00:00
jenkins-bot 8b13ddbd90 Merge "Debounce resizes" 2014-09-30 15:15:52 +00:00
Gergő Tisza ff76011032 Log image dimensions
Also add a sanity test to attribution logging which I forgot at the time.

Change-Id: I3010e57eb74a76fee4078c415182a033375ea890
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/898
2014-09-30 14:55:47 +00:00
Gergő Tisza 6a0ad63085 Debounce resizes
* create a resize-end event which fires 100ms after resize ends
  (or pauses)
* move slow resize callback (fetching new thumbnail from the server)
  to resize-end

Change-Id: I1c1217ea43ffade4cfaf0c03f24574d0ebfee080
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/898
2014-09-30 14:45:00 +00:00
Mark Holmquist b0aa337fd5 Initialise dialogOpen value to false
Because it was undefined, the toggleClass method just turned the class on
if it wasn't there in the first place.

Silly jQuery, Trix are for kids.

Change-Id: I4e21e033529834a4f808270306c72f5756b69ab2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/921
2014-09-26 19:03:14 -07:00
Mark Holmquist b691086f2b Fix dialog class
Missed this small issue - doesn't affect actual behaviour but will make a
confusing cursor display in some instances.

Change-Id: I40c3cf0c9596f40983f090974044bcd6f7d203d3
2014-09-24 16:19:03 -07:00
Mark Holmquist 325a8a3e27 Style fixes for the UI changes
I decided to fix them all at once since we're merging all of these
patches together anyway. I can pull changes into other patches if
absolutely necessary.

Also fixes the dialog open/close handlers for the canvas click event,
and leaves the reuse dialog open on next/prev.

Change-Id: Id1564425442aec72e5e41f2f80986d8a104dd92c
2014-09-24 17:08:02 +02:00
Mark Holmquist 0d4863dd91 Make the download pane into its own dialog
Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841
2014-09-24 17:05:50 +02:00
Mark Holmquist 59d8c5d892 Make the reuse button part of the canvas
Moves it out of stripeButtons and into canvasButtons.

Will move download to its own thing later.

Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834
2014-09-18 12:43:45 -07:00
Mark Holmquist a82dfd6eb0 Remove tooltip for view-file
Change-Id: I89b2dfd43ea18a2e1fe9d2214b76218b24ce88cb
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/886
2014-09-11 10:41:45 -07:00
Gilles Dubuc b70fa7251d Replace addEventListener call with jQuery's .on()
Bug: 70553
Change-Id: I24680e7b7759d30eca2a733d670e10c0b4bfe7ab
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/863
2014-09-09 11:18:03 +02:00
Gilles Dubuc d4666c5715 Track more metrics
- About page
- Discuss page
- Help page
- Location page
- Uploader page
- Download, share and embed tabs in detail (each clickable element)
- "Use this file" closed (previous was counted as open event)

Change-Id: I1ebcb39049ad9b521968eb2024be9b86a49e5b0c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/851
2014-09-08 10:26:55 +02:00
Mark Holmquist f94d3362d9 Go to the original image on image clicks
Also removes original file button.

Change-Id: I6e73e46e910313fe6c5efb3087ecb693e499e064
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/831
2014-09-05 10:19:00 -07:00
Gergő Tisza 4adde1685a Show help tooltip for "view original file" button on image click
Change-Id: Ia9e20f55bcdd0482e78a6e9aa5a0625ec2717e78
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/712
2014-06-30 21:12:29 +00:00
Gergő Tisza 2a5b519d7a Fix for merge mistake in Ic37b4150288055c3fae8d22919ed7b1249db1f09
A class was renamed inconsistently, causing wrong aspect ratio. 

Change-Id: I9854ff1193971c65e5b36faac62c7830ed8bdb45
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/737
2014-06-24 20:31:18 +00:00
Gergő Tisza 0a265d7e96 Fullscreen improvements
- fix sizing error so that the image actually fits the screen
- hide some stuff that didn't work properly in fullscreen anyway
  (commons/survey buttons just exited fullscreen, reuse menu
  did not fade with the metadata panel, view terms link didn't do
  anything)
- move metadata scroller CSS rules into metadata scroller LESS file
- disable invite animation which broke the opacity transition
- move opacity transition to the main metadata panel element;
  remove background-color transition which is pointless since there
  is an opacity transition

Change-Id: Ib26160cc6431ea007dab8441c634d0faf9ee1d0a
2014-06-19 18:11:26 +00:00
Gergő Tisza c594a5610a Make max-height computation more stable
Instead of setting the parent's height as max height of the
<img> element, find the first parent which has a non-automatic
height (that would be .mw-mmv-image-wrapper).

With the old structure, the height of the parent element could
be determined by the height of the image, which would then be
written back into the max-height of the image, messing up the
aspect ratio. I did not see this in the wild, but it was easy
to reproduce by changing the timing of the resize handler (in
particular, I tried to call the resize handler before loading
the new resolution, to make the UI more responsive, and ran
into this problem). This cannot happen anymore now.

This also fix a bug on some browsers (IE 10, maybe iOS Safari)
where the size of the image could be slightly larger than the
available space, and the bottom of the image was obscured by
the metadata panel. I am still not sure how exactly that
happened, but it was related to the <img> parents with automatic
heights having incorrect height. After making sure the <img>
has a max-height derived from an element with non-automatic
height, I cannot reproduce the bug on IE 10 anymore.

Change-Id: I193aefc42e6d6072717643659a9e4c0c8b7c7e93
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/698
Bug: 66244
2014-06-17 21:20:00 +00:00
Gergő Tisza ab7b339143 Revert "Minimal zoom implementation".
Per the design meeting, we are abandoning this feature for now - there is not enough time to ensure it is of acceptable quality.

This reverts commit 4329d453ec.

Change-Id: I27c113ffecb617d442557163722ea5181ed0b2f4
2014-05-15 20:40:41 +00:00
Gergő Tisza 4329d453ec Minimal zoom implementation
Just a link to the full-size file for now.

Since the link must be to a PNG/JPEG/GIF (so possibly a thumbnail),
and we want to cap the size, we might need to get the URL from the
API, but we need to open the new window right away to avoid popup
blockers, making this patch quite complicated.

Change-Id: I9ce9d2a2d27b75470eae2806d9f9ce2f95f4dac2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/588
2014-05-15 01:04:23 +00:00
Gilles Dubuc 7d5a82c571 Fix IE9 support
- Fix JS error on pushState
- Fix blur issue where blur(0px) filter would blur anyway
- Fix wrapper sizing issue where its size would be 0 when measured

Bug: 65225
Change-Id: If9279cd56f55f71f261ec54dda8228194988b9ae
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/597
2014-05-14 12:06:27 +02:00
jenkins-bot 9e0df0dd4c Merge "Refactor progressbar & blur handling" 2014-05-01 23:12:22 +00:00
Gergő Tisza fec24e02f7 Refactor progressbar & blur handling
This tries to fix a number of related issues:
* the blurred thumbnail was visible for a split-second sometimes
  when switching back to an already-loaded image. (Presumably when
  JS was sluggish enough to take more than 10 ms to execute.) We
  now check whether the promise is pending before showing a placeholder.
  (More generally, a lot of unnecessary logic was executed when paging
  through already loaded images, like displaying the placeholder, so
  this might make the UI a bit more responsive.)
* the blur could get stuck sometimes - I have seen this a few times,
  but have never been able to reproduce it, so I'm only guessing, but
  maybe the timing was really unfortunate, and we switched back less
  than 10 ms before loading finished. We now remove the blur on every
  branch, just to be sure.
* adding a progress handler to a promise might not have any immediate
  effect, so when switching to an image which was loading, the progress
  bar reacted too late. We now store the progress state per thumbnail
  so it is always available immediately.
* the progress would animate from 0 to its actual state whenever we
  navigated to the image. The change on paging is now instant; the
  progress bar only animates when we are looking at it.
* switching quickly back and forthe between a loaded and a loading
  image resulted in the loading image becoming unblurred. This seems
  fixed now, I'm not sure why. Maybe the "skip on non-pending promise"
  logic affects it somehow.

Also removes some unused things / renames some things which were
confusing, and makes an unrelated fix in the image provider, which kept
amassing fail handlers.

Change-Id: I580becff246f197ec1bc65e82acd422620e35578
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-05-01 21:09:28 +00:00
jenkins-bot f3ce1b0aa6 Merge "Fix for jsduck 5.x, rearrange categories" 2014-04-29 18:35:22 +00:00
Mark Holmquist d137689b34 Fix for jsduck 5.x, rearrange categories
Should make for a nicer documentation experience.

Change-Id: I935cbab2b06c8cf482d3987905d2257d09bea3a3
2014-04-29 11:32:12 -07:00
Gergő Tisza 7ee0cf3fcd Make progress bar less erratic
Solves the bug, and makes the code slightly cleaner, but it
still does not inspire confidence (e.g. use of viewer flags
by a bunch of callbacks that can run for a background image).
Also, the tests seem underspecified.

I'll follow up with some more refactoring.

Change-Id: I2557abcec173691ffce21185bf1a939f1644ba8c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-24 23:55:26 +00:00
Mark Holmquist 0ed174a306 Do not load too-big thumbnails for SVGs
Change-Id: Iae75105151bfcd0e974fc292794802c77eb26ea4
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/448
2014-04-15 11:21:05 -07:00
Gergő Tisza f297de60bc Hide metadata top button texts
Also make sure that the reuse dialog is positioned right, no
matter where its button is.

Also fixes some minor documentation problem with mw.mmv.ui.canvas
which I noticed in the process.

Change-Id: I86feed07738ebef012e63861ed909f3449b85a53
2014-04-04 09:11:58 +02:00
Gergő Tisza 95111d2b73 Use mw-mmv CSS prefix consistently for all things
With apologies to anyone who gets a hundred merge conflicts
because of this :)

We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-,
mw-mmv-mmv-, a few unprefixed), which was getting annoying,
and will be confusing to wiki editors who are trying to figure out
where a given style comes from. Such changes are better done before
going live because it breaks all local CSS tweaks on the wiki,
so I am renaming things now (also removing some stuff which wasnt
used anywhere).

Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d
2014-03-31 21:33:12 +00:00
Gergő Tisza c7ae4a36ba Handle image loading rejections
Displays the rejection error message when loading something fails, so that the
user knows what's going on and can send meaningful error reports.

Needs non-crappy design.

Change-Id: I7d2914d89549b598bd1070ed40c6f1c9d45b55f0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/271
2014-03-19 18:51:01 +00:00
Gilles Dubuc 56f923ae21 Add share panel, replace reuse
Mingle: 147

Change-Id: I5678002ac84965a80f5e63635151032e6c293194
2014-03-19 02:06:21 +00:00
Aaron Arcos 6b7de4b129 Fix resize issues (Part III, Fin)
Last round of fixes and refactorings regarding resize issues
and the Canvas component:
  * Consolidate all the width calculation logic inside the Canvas component
  * Consolidate image resizing logic in the Canvas component
  * Fix size problem with SVG images
  * Clean up comments and tests

Change-Id: I0198cc1e3a45f7287b9a7494f73a8f158303f886
Bug: 56454
Mingle: 239
2014-03-05 00:14:54 +00:00
Aaron Arcos fedaa553b4 Fix resize issues (Part II)
I was going to stage this but better give you the whole enchilada,
it is not that bad, ;-). This is what I am doing:

- Delete  things that are not used anymore.
- Componentize image ui element (Canvas).

Bug: 56454
Change-Id: Ib5461639a86d9f8e0a150f6d9543a20058d31e00
Mingle: 239
2014-02-28 10:22:21 +01:00