paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Adjust scope for main overlay CSS and click handlers.

Browse Source 
KaTeX makes use of a "span.overlay" element for the little vector
arrow symbol on top of a `\vec` object. This conflicts with Zulip's
CSS for our overlays, which are divs with the `overlay` CSS class.

While KaTeX may rename their class
(https://github.com/KaTeX/KaTeX/issues/1456), we can work around this
issue by scoping our own overlay CSS and click handlers to
"div.overlay" rather than ".overlay".

Fixes #18068.
This commit is contained in:
Tim Abbott
2021-04-14 08:18:29 -07:00
parent 8d54d6d246
commit 0dac331c17
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
static/js/overlays.js
View File

@@ -44,20 +44,20 @@ export function drafts_open() {
// To address bugs where mouse might apply to the streams/settings // To address bugs where mouse might apply to the streams/settings
// overlays underneath an open modal within those settings UI, we add // overlays underneath an open modal within those settings UI, we add
// this inline style to '.overlay.show', overriding the // this inline style to 'div.overlay.show', overriding the
// "pointer-events: all" style in app_components.css. // "pointer-events: all" style in app_components.css.
// //
// This is kinda hacky; it only works for modals within overlays, and // This is kinda hacky; it only works for modals within overlays, and
// we need to make sure it gets re-enabled when the modal closes. // we need to make sure it gets re-enabled when the modal closes.
export function disable_background_mouse_events() { export function disable_background_mouse_events() {
$(".overlay.show").attr("style", "pointer-events: none"); $("div.overlay.show").attr("style", "pointer-events: none");
} }
// This removes only the inline-style of the element that // This removes only the inline-style of the element that
// was added in disable_background_mouse_events and // was added in disable_background_mouse_events and
// enables the background mouse events. // enables the background mouse events.
export function enable_background_mouse_events() { export function enable_background_mouse_events() {
$(".overlay.show").attr("style", null); $("div.overlay.show").attr("style", null);
} }
export function active_modal() { export function active_modal() {
@@ -211,7 +211,7 @@ export function close_active_modal() {
} }
export function close_for_hash_change() { export function close_for_hash_change() {
$(".overlay.show").removeClass("show"); $("div.overlay.show").removeClass("show");
if (active_overlay) { if (active_overlay) {
close_handler(); close_handler();
} }
@@ -228,14 +228,14 @@ export function open_settings() {
} }
export function initialize() { export function initialize() {
$("body").on("click", ".overlay, .overlay .exit", (e) => { $("body").on("click", "div.overlay, div.overlay .exit", (e) => {
let $target = $(e.target); let $target = $(e.target);
// if the target is not the .overlay element, search up the node tree // if the target is not the div.overlay element, search up the node tree
// until it is found. // until it is found.
if ($target.is(".exit, .exit-sign, .overlay-content, .exit span")) { if ($target.is(".exit, .exit-sign, .overlay-content, .exit span")) {
$target = $target.closest("[data-overlay]"); $target = $target.closest("[data-overlay]");
} else if (!$target.is(".overlay")) { } else if (!$target.is("div.overlay")) {
// not a valid click target then. // not a valid click target then.
return; return;
} }

2
static/styles/app_components.css
View File

@@ -271,7 +271,7 @@
} }
/* -- unified overlay design component -- */ /* -- unified overlay design component -- */
.overlay { div.overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;

4
static/styles/night_mode.css
View File

@@ -272,7 +272,7 @@ on a dark background, and don't change the dark labels dark either. */
color: hsla(0, 0%, 90%, 1); color: hsla(0, 0%, 90%, 1);
} }
.overlay, div.overlay,
#subscription_overlay #subscription_overlay
#stream-creation #stream-creation
#stream_creation_form #stream_creation_form
@@ -283,7 +283,7 @@ on a dark background, and don't change the dark labels dark either. */
background-color: hsla(212, 28%, 8%, 0.75); background-color: hsla(212, 28%, 8%, 0.75);
} }
.overlay .flex.overlay-content > div, div.overlay .flex.overlay-content > div,
.dropdown-menu.typeahead, .dropdown-menu.typeahead,
#settings_page, #settings_page,
.informational-overlays .overlay-content { .informational-overlays .overlay-content {