mirror of https://github.com/zulip/zulip.git
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.
This commit is contained in:
Austin Riba
Tim Abbott
parent
eae0975b63
commit
75a29d6b82
|
|
@ -32,15 +32,15 @@ export class PanZoomControl {
|
|||
return true;
|
||||
},
|
||||
});
|
||||
// Start with pan/zoom disabled.
|
||||
this.disablePanZoom();
|
||||
|
||||
// The following events are necessary to prevent the click event
|
||||
// firing where the user "unclicks" at the end of the drag, which
|
||||
// was causing accidental overlay closes in some situations.
|
||||
this.panzoom.on("pan", () => {
|
||||
// Marks this overlay as needing to stay open.
|
||||
$("#lightbox_overlay").data("noclose", true);
|
||||
|
||||
// Enable the panzoom reset button.
|
||||
$("#lightbox_overlay .lightbox-zoom-reset").removeClass("disabled");
|
||||
});
|
||||
|
||||
this.panzoom.on("panend", (e) => {
|
||||
|
|
@ -61,6 +61,9 @@ export class PanZoomControl {
|
|||
// event does not fire when using the scroll wheel or pinch to zoom.
|
||||
// https://github.com/anvaka/panzoom/issues/250
|
||||
this.constrainImage(e);
|
||||
|
||||
// Enable the panzoom reset button.
|
||||
$("#lightbox_overlay .lightbox-zoom-reset").removeClass("disabled");
|
||||
});
|
||||
|
||||
// key bindings
|
||||
|
|
@ -144,17 +147,9 @@ export class PanZoomControl {
|
|||
// of which there is some anecdotal evidence that suggests they
|
||||
// might be prone to race conditions.
|
||||
$("#lightbox_overlay").data("noclose", false);
|
||||
}
|
||||
|
||||
disablePanZoom() {
|
||||
$(".image-preview .zoom-element img").css("cursor", "auto");
|
||||
this.reset();
|
||||
this.panzoom.pause();
|
||||
}
|
||||
|
||||
enablePanZoom() {
|
||||
$(".image-preview .zoom-element img").css("cursor", "move");
|
||||
this.panzoom.resume();
|
||||
// Disable the lightbox reset button to reflect the state that
|
||||
// the image has not been panned or zoomed.
|
||||
$("#lightbox_overlay .lightbox-zoom-reset").addClass("disabled");
|
||||
}
|
||||
|
||||
zoomIn() {
|
||||
|
|
@ -208,9 +203,7 @@ function display_image(payload) {
|
|||
render_lightbox_list_images(payload.preview);
|
||||
|
||||
$(".player-container").hide();
|
||||
$(
|
||||
".image-preview, .image-actions, .image-description, .download, .lightbox-canvas-trigger",
|
||||
).show();
|
||||
$(".image-preview, .image-actions, .image-description, .download, .lightbox-zoom-reset").show();
|
||||
|
||||
const img_container = $("#lightbox_overlay .image-preview > .zoom-element");
|
||||
const img = new Image();
|
||||
|
|
@ -229,7 +222,7 @@ function display_video(payload) {
|
|||
render_lightbox_list_images(payload.preview);
|
||||
|
||||
$(
|
||||
"#lightbox_overlay .image-preview, .image-description, .download, .lightbox-canvas-trigger",
|
||||
"#lightbox_overlay .image-preview, .image-description, .download, .lightbox-zoom-reset",
|
||||
).hide();
|
||||
|
||||
let source;
|
||||
|
|
@ -453,9 +446,8 @@ export function initialize() {
|
|||
is_open = false;
|
||||
document.activeElement.blur();
|
||||
if (pan_zoom_control.isActive()) {
|
||||
pan_zoom_control.disablePanZoom();
|
||||
pan_zoom_control.reset();
|
||||
}
|
||||
$(".lightbox-canvas-trigger").removeClass("enabled");
|
||||
};
|
||||
|
||||
const open_image = build_open_image_function(reset_lightbox_state);
|
||||
|
|
@ -516,24 +508,14 @@ export function initialize() {
|
|||
}
|
||||
});
|
||||
|
||||
$("#lightbox_overlay").on("click", ".lightbox-canvas-trigger", function () {
|
||||
$("#lightbox_overlay").on("click", ".lightbox-zoom-reset", () => {
|
||||
if (!$("#lightbox_overlay .lightbox-zoom-reset").hasClass("disabled")) {
|
||||
const $img = $("#lightbox_overlay").find(".image-preview img");
|
||||
open_image($img);
|
||||
|
||||
if ($(this).hasClass("enabled")) {
|
||||
pan_zoom_control.disablePanZoom();
|
||||
$(this).removeClass("enabled");
|
||||
} else {
|
||||
pan_zoom_control.enablePanZoom();
|
||||
$(this).addClass("enabled");
|
||||
pan_zoom_control.reset();
|
||||
}
|
||||
});
|
||||
|
||||
$("#lightbox_overlay .image-preview").on("dblclick", "img, canvas", (e) => {
|
||||
$("#lightbox_overlay .lightbox-canvas-trigger").trigger("click");
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$("#lightbox_overlay .player-container").on("click", function () {
|
||||
if ($(this).is(".player-container")) {
|
||||
reset_lightbox_state();
|
||||
|
|
|
|||
|
|
@ -16,26 +16,9 @@
|
|||
background-position: center center;
|
||||
|
||||
img {
|
||||
cursor: move;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
hsl(0, 0%, 80%) 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(135deg, hsl(0, 0%, 80%) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, hsl(0, 0%, 80%) 75%),
|
||||
linear-gradient(135deg, transparent 75%, hsl(0, 0%, 80%) 75%);
|
||||
|
||||
background-size: 20px 20px;
|
||||
|
||||
background-position: 0 0, 50px 0, 50px -50px, 0 50px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoom-element {
|
||||
|
|
@ -83,54 +66,6 @@
|
|||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
|
||||
.lightbox-canvas-trigger {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
min-width: 75px;
|
||||
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
padding: 0 5px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.6);
|
||||
|
||||
text-align: center;
|
||||
color: hsl(0, 0%, 100%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid hsl(0, 0%, 100%);
|
||||
color: hsl(227, 40%, 16%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: -7px;
|
||||
|
||||
&::after {
|
||||
content: attr(data-disabled);
|
||||
text-transform: uppercase;
|
||||
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
&.enabled .status::after {
|
||||
content: attr(data-enabled);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 0.9rem;
|
||||
min-width: inherit;
|
||||
|
|
@ -149,12 +84,23 @@
|
|||
color: hsl(227, 40%, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: hsl(0, 0%, 100%);
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - 350px);
|
||||
max-width: calc(100% - 400px);
|
||||
/* add some extra margin top and remove some bottom to keep the
|
||||
height the same. and vertically center the text with the buttons. */
|
||||
margin-top: 25px;
|
||||
|
|
@ -175,7 +121,6 @@
|
|||
}
|
||||
|
||||
.user {
|
||||
max-width: 200px;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,7 @@
|
|||
<div class="user"></div>
|
||||
</div>
|
||||
<div class="image-actions">
|
||||
<div class="lightbox-canvas-trigger">
|
||||
<div class="title">{{t "Pan & zoom" }}</div>
|
||||
<div class="status" data-disabled="{{t 'Disabled' }}" data-enabled="{{t 'Enabled' }}"></div>
|
||||
</div>
|
||||
<a class="button small lightbox-zoom-reset disabled">{{t "Reset zoom" }}</a>
|
||||
<a class="button small open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
|
||||
<a class="button small download" download>{{t "Download" }}</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue