Commit graph

4 commits

Author SHA1 Message Date
ThibG
ea28c8f63b Fix media description in various media modals () 2018-09-13 20:31:59 +02:00
Emelia Smith
07ffc4fa11 Revert "Add double-tap zoom functionary to ZoomableImage ()" ()
Unfortunately the new hammer.js functionality wasn't correctly tested and didn't work across devices and browsers, as such, it's best to revert PR  until we can revisit this functionality and make it work across all devices and browsers that are supported by Mastodon.

This reverts commit 7551951094.
2018-04-04 11:58:15 +02:00
Yuto Tokunaga
7551951094 Add double-tap zoom functionary to ZoomableImage ()
add <div.zoomable-image__margin/> to keep margin of the image on zooming
move setting `scrollLeft` and `scrollTop` of container from callback of
`setState` to `componentDidUpdate`
add 'hammerjs' package for touch gesture detection
rewrite `ZoomableImage` using 'hammerjs'
2018-03-28 20:40:51 +02:00
Yuto Tokunaga
d6e88e29e2 [RFC] Improved media modal ()
* Improved media modal

ImageLoader: Impliment pinch zoom by CSS `transform: scale(X)`
ImageLoader: Impliment panning by CSS `overflow: scroll`
ImageLoader: Larger image
MediaModal: Larger close button
MediaModal: Close the modal by swiping vertically
MediaModal: Show/hide close button and right/left navigation on tapping image
MediaModal: Change the `pointer-event` CSS prpp to get more blank space to close the modal
ImageLoader: Zoom/reset zoom on double tap
MediaModal: disable vertical swiping while horizontally swiped
ImageLoader: prevent propagating touchmove event to MediaModal
MediaModal: Adjust size and potision of buttons
ImageLoader: Adjust scroll potision on pinch zoom

* Remove "swipe to close" and "double tap to zoom" features

* remove unused prop and functions

removed `onScroll` prop and `handleScroll` func in ImageLoader

* separate zoom functionary to ZoomableImage component

adjust styling of ImageLoader
add styling for ZoomableImage

* adjust size and potision of close button of media modal

* Fix for gif video

add `onClick` prop to ExtendedVideoPlayer
specify `onClick` prop to video tag for switching nav of `MediaModal`
add `.video-modal` class to scss to separate styling for `VideoModal`

* fix styling for centering

specify height of `ZoomableImage` by pixel
clean styling for `ImageLoader`

* fix lint errors

* small fix

* fixed designated parts
2018-03-04 20:32:24 +01:00