paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-16 03:41:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

popovers: Extend the compute_placement() function.

Browse Source 
This commit extends the `compute_placement()` function in
`popovers.js` to take into account height/width of popover as well as
positioning preference. If vertical positioning is desired and the
popover fits in either 'top/bottom' positions then we don't check for
`left/right' positions. Earlier the behavior was to prefer
'left/right'positions over 'top/bottom' positions, which resulted in
the emoji picker popping incorrectly to the left.
This commit is contained in:
Harshit Bansal
2017-08-25 17:59:23 +00:00
committed by Tim Abbott
parent f24582576a
commit cd2f41dbb1
3 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/emoji_picker.js
View File

@@ -2,6 +2,11 @@ var emoji_picker = (function () {
var exports = {};
// Emoji picker is of fixed width and height. Update these
// whenever these values are changed in `reactions.css`.
var APPROX_HEIGHT = 330;
var APPROX_WIDTH = 255;
// The functionalities for reacting to a message with an emoji
// and composing a message with an emoji share a single widget,
// implemented as the emoji_popover.
@@ -193,10 +198,10 @@ exports.render_emoji_popover = function (elt, id) {
class: "emoji-info-popover",
categories: get_rendered_emoji_categories(),
};
var placement = popovers.compute_placement(elt, APPROX_HEIGHT, APPROX_WIDTH, true);
elt.popover({
// temporary patch for handling popover placement of `viewport_center`
placement: popovers.compute_placement(elt) === 'viewport_center' ?
'right' : popovers.compute_placement(elt),
placement: placement === 'viewport_center' ? 'left' : placement,
template: templates.render('emoji_popover', template_args),
title: "",
content: generate_emoji_picker_content(id),

7
static/js/hotspots.js
View File

@@ -137,7 +137,12 @@ function place_popover(hotspot) {
var popover_offset;
var arrow_placement;
var orientation = hotspot.location.popover ||
popovers.compute_placement($(hotspot.location.element));
popovers.compute_placement(
$(hotspot.location.element),
popover_height,
popover_width,
false
);
switch (orientation) {
case TOP:

13
static/js/popovers.js
View File

@@ -620,10 +620,8 @@ exports.set_userlist_placement = function (placement) {
userlist_placement = placement || "right";
};
exports.compute_placement = function (elt) {
var popover_height = 350;
var popover_width = 350;
exports.compute_placement = function (elt, popover_height, popover_width,
prefer_vertical_positioning) {
var client_rect = elt.get(0).getBoundingClientRect();
var distance_from_top = client_rect.top;
var distance_from_bottom = message_viewport.height() - client_rect.bottom;
@@ -648,6 +646,13 @@ exports.compute_placement = function (elt) {
if (distance_from_bottom > popover_height && elt_will_fit_horizontally) {
placement = 'bottom';
}
if (prefer_vertical_positioning && placement !== 'viewport_center') {
// If vertical positioning is prefered and the popover fits in
// either top or bottom position then return.
return placement;
}
if (distance_from_left > popover_width && elt_will_fit_vertically) {
placement = 'left';
}