With the recent changes to lightbox image handling in #21145 and #20788
it is no longer necessary to have panning and zooming disabled by
default. This commit removes the enable/disable button and instead
replaces it with a "Reset Image" button, and enables panning and zooming
as the default state of the lightbox.
This commit attempts to prevent images with long filenames,
descriptions, or author names displayed in the lightbox from altering
the layout of the page.
It also adds a title prop to both the filename and author, allowing a
user to hover and see a tooltip of the full text in the case where the
text is truncated.
Fixes#21058.
This PR changes the library used for panning and zooming in the lightbox
module from timmywil/panzoom to avanka/panzoom.
The original (timmywil) version of the library contains a bug where if
you have a high resolution touchpad and Firefox and you zoom in and out
repeatedly on an image, the image may drift. avanka/panzoom does not
appear to display this behavior.
Restores the behaviour from before 5f83bc5cfe, where clicking
outside the image closes the lightbox, primarily by way of swapping
out the panzoom library.
Fixes: #21163.
This commit adds a method of marking an overlay as being meant to be
left open despite click events triggering that would normally close it.
This is to prevent the case where a user drags an image and "unclicks"
in an area where normally clicking would close the overlay.
This PR changes how the Pan & Zoom feature of images displayed in the
attachment lightbox are handled.
The existing method of using a canvas element is replaced by the Panzoom
library (timmywil/panzoom). This library is lightweight and has 0
transitive dependencies.
This fixes#20759 where the issue is that the viewport of a zoomed image
was not expanding to fill the available space on the page. Switching to
this new library also solves several other UX issues:
* Images are no longer blurred when in Pan & Zoom mode.
* The zoom behavior itself uses focal point zooming: zooming occurs
where the cursor is on the image instead of at the center of the
image, reducing the need for extra panning.
* CSS transitions are used for a more visually pleasing experience
when switching images, toggling zoom off, etc.
* The library has the potential to open other file types which
leaves that option open for us in the future.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px. Use only the *_min bounds for consistency.
This requires queries with strict inequalities to express upper
bounds (width < md_min). Fortunately, that functionality is provided
by range context queries. Unfortunately, those are not supported in
all browsers. Fortunately, we can compile them away using
postcss-media-minmax. Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug. Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:
https://github.com/postcss/postcss-media-minmax/pull/28
Signed-off-by: Anders Kaseorg <anders@zulip.com>
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader. Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.
https://github.com/webpack-contrib/css-loader/issues/1164
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.
To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template
Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
The CSS linter was pretty hard to reason about. It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.
This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself. It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.
The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
Previously, the font-weight for 500 did not exist in our set, so
all of those examples defaulted to 400. This fixes them to stay
as they previously were by migrating them to a font weight of 400.
This fixes the styling to stay on the screen of most reasonably sized
monitors along with extending the JavaScript code to allow for the
video to be keyed to in the lightbox.
This adds an image feed that you can scroll through with hotkeys
in the lightbox.
The left and right arrow keys along with the left and right arrows
will go to the prev/next image, and clicking on an image will also
take a user to that image.
The child ".image-preview" has a background which is ordinarily
invisible (as it is the same color as the #lightbox_overlay bg,
however when fading in it is noticeable.
Austin Riba
Austin Riba
Anders Kaseorg
Jonny Tran
Aman Agrawal
Armaan Ahluwalia
Cynthia Lin
ihsavru
Steve Howell
Brock Whittaker
Cory Lynch
Shubham Dhama
Tim Abbott