Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/templates/lightbox_overlay.hbs

26 lines
1.1 KiB
Handlebars
Raw Normal View History

lightbox: Prevent undesired closing of lightbox during pan. 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.
2022-01-24 21:27:33 +01:00
<div id="lightbox_overlay" class="overlay new-style" data-overlay="lightbox" data-noclose="false">
lightbox: Replace image with media. Since lightbox can also play videos now, replace image with media.
2023-09-14 07:41:33 +02:00
<div class="media-info-wrapper">
<div class="media-description">
Clean image-overlay.html to use 4 space indents.
2017-02-23 02:12:38 +01:00
<div class="title"></div>
<div class="user"></div>
</div>
lightbox: Replace image with media. Since lightbox can also play videos now, replace image with media.
2023-09-14 07:41:33 +02:00
<div class="media-actions">
lightbox: Remove Pan/Zoom enable button. 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.
2022-02-23 23:57:03 +01:00
<a class="button small lightbox-zoom-reset disabled">{{t "Reset zoom" }}</a>
lightbox_overlay: Migrate to handlebars.
2021-06-13 05:55:50 +02:00
<a class="button small open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
<a class="button small download" download>{{t "Download" }}</a>
Clean image-overlay.html to use 4 space indents.
2017-02-23 02:12:38 +01:00
</div>
lightbox: Prevent long titles from altering layout. 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.
2022-02-11 00:01:02 +01:00
<div class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">x</span></div>
Aesthetic Changes for Overlay. This includes reduced title font size to bring the total info bar height to the same height as the buttons, and an image preview that doesn’t hit the walls of the container.
2016-09-30 20:59:25 +02:00
</div>
lightbox: Change aesthetic to white-on-blue design. No longer is there a white information bar at the bottom. Now it is all aligned to the top.
2016-10-01 00:50:19 +02:00
lightbox: Prevent undesired closing of lightbox during pan. 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.
2022-01-24 21:27:33 +01:00
<div class="image-preview no-select">
<div class="zoom-element no-select"></div>
lightbox: Replace lightbox_canvas with PanZoom library. 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.
2022-01-14 00:46:54 +01:00
</div>
lightbox: Add support for playing video.
2023-09-14 05:38:58 +02:00
<div class="video-player"></div>
Clean image-overlay.html to use 4 space indents.
2017-02-23 02:12:38 +01:00
<div class="player-container"></div>
hotkeys: Add lightbox image feed with controls. 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.
2017-03-19 01:51:20 +01:00
<div class="center">
<div class="arrow no-select" data-direction="prev">&lt;</div>
<div class="image-list"></div>
<div class="arrow no-select" data-direction="next">&gt;</div>
</div>
Add overlay lightbox for displaying inline image previews. This adds an event listener (by way of delegation) to the .message_inline_image elements that pops up the overlay and hides it when the overlay exit is clicked. Fixes #654.
2016-09-22 02:05:24 +02:00
</div>