From 51e24519b841d60e8aa2e94b95d1111242193a43 Mon Sep 17 00:00:00 2001 From: Riken Shah Date: Mon, 17 May 2021 08:01:02 +0000 Subject: [PATCH] refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it. --- .../{panels.js => navbar_alerts.js} | 36 +++++++++---------- static/js/floating_recipient_bar.js | 6 +++- static/js/{panels.js => navbar_alerts.js} | 12 +++---- static/js/recent_topics.js | 4 +-- static/js/resize.js | 4 +-- static/js/server_events_dispatch.js | 4 +-- static/js/ui_init.js | 4 +-- static/styles/zulip.css | 2 +- templates/zerver/app/navbar_alerts.html | 2 +- tools/test-js-with-node | 2 +- 10 files changed, 40 insertions(+), 36 deletions(-) rename frontend_tests/node_tests/{panels.js => navbar_alerts.js} (69%) rename static/js/{panels.js => navbar_alerts.js} (92%) diff --git a/frontend_tests/node_tests/panels.js b/frontend_tests/node_tests/navbar_alerts.js similarity index 69% rename from frontend_tests/node_tests/panels.js rename to frontend_tests/node_tests/navbar_alerts.js index 2a831a10a5..851ffc490a 100644 --- a/frontend_tests/node_tests/panels.js +++ b/frontend_tests/node_tests/navbar_alerts.js @@ -35,7 +35,7 @@ set_global("document", { }); const {localstorage} = zrequire("localstorage"); -const panels = zrequire("panels"); +const navbar_alerts = zrequire("navbar_alerts"); const notifications = zrequire("notifications"); const util = zrequire("util"); @@ -54,45 +54,45 @@ test("allow_notification_alert", () => { util.is_mobile = () => false; notifications.granted_desktop_notifications_permission = () => false; notifications.permission_state = () => "granted"; - assert.equal(panels.should_show_notifications(ls), true); + assert.equal(navbar_alerts.should_show_notifications(ls), true); // Avoid showing if the user said to never show alert on this computer again. ls.set("dontAskForNotifications", true); - assert.equal(panels.should_show_notifications(ls), false); + assert.equal(navbar_alerts.should_show_notifications(ls), false); // Avoid showing if device is mobile. ls.set("dontAskForNotifications", undefined); - assert.equal(panels.should_show_notifications(ls), true); + assert.equal(navbar_alerts.should_show_notifications(ls), true); util.is_mobile = () => true; - assert.equal(panels.should_show_notifications(ls), false); + assert.equal(navbar_alerts.should_show_notifications(ls), false); // Avoid showing if notification permission is denied. util.is_mobile = () => false; - assert.equal(panels.should_show_notifications(ls), true); + assert.equal(navbar_alerts.should_show_notifications(ls), true); notifications.permission_state = () => "denied"; - assert.equal(panels.should_show_notifications(ls), false); + assert.equal(navbar_alerts.should_show_notifications(ls), false); // Avoid showing if notification is already granted. notifications.permission_state = () => "granted"; notifications.granted_desktop_notifications_permission = () => "granted"; - assert.equal(panels.should_show_notifications(ls), false); + assert.equal(navbar_alerts.should_show_notifications(ls), false); }); test("profile_incomplete_alert", () => { // Show alert. page_params.is_admin = true; page_params.realm_description = "Organization imported from Slack!"; - assert.equal(panels.check_profile_incomplete(), true); + assert.equal(navbar_alerts.check_profile_incomplete(), true); // Avoid showing if the user is not admin. page_params.is_admin = false; - assert.equal(panels.check_profile_incomplete(), false); + assert.equal(navbar_alerts.check_profile_incomplete(), false); // Avoid showing if the realm description is already updated. page_params.is_admin = true; - assert.equal(panels.check_profile_incomplete(), true); + assert.equal(navbar_alerts.check_profile_incomplete(), true); page_params.realm_description = "Organization description already set!"; - assert.equal(panels.check_profile_incomplete(), false); + assert.equal(navbar_alerts.check_profile_incomplete(), false); }); test("server_upgrade_alert hide_duration_expired", (override) => { @@ -101,12 +101,12 @@ test("server_upgrade_alert hide_duration_expired", (override) => { override(Date, "now", () => start_time); assert.equal(ls.get("lastUpgradeNagDismissalTime"), undefined); - assert.equal(panels.should_show_server_upgrade_notification(ls), true); - panels.dismiss_upgrade_nag(ls); - assert.equal(panels.should_show_server_upgrade_notification(ls), false); + assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true); + navbar_alerts.dismiss_upgrade_nag(ls); + assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false); override(Date, "now", () => addDays(start_time, 8)); // Friday 14/5/2021 07:02:27 AM (UTC+0) - assert.equal(panels.should_show_server_upgrade_notification(ls), true); - panels.dismiss_upgrade_nag(ls); - assert.equal(panels.should_show_server_upgrade_notification(ls), false); + assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true); + navbar_alerts.dismiss_upgrade_nag(ls); + assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false); }); diff --git a/static/js/floating_recipient_bar.js b/static/js/floating_recipient_bar.js index ac6de725ce..a56161f4ed 100644 --- a/static/js/floating_recipient_bar.js +++ b/static/js/floating_recipient_bar.js @@ -9,7 +9,11 @@ import * as timerender from "./timerender"; let is_floating_recipient_bar_showing = false; function top_offset(elem) { - return elem.offset().top - $("#message_view_header").safeOuterHeight() - $("#panels").height(); + return ( + elem.offset().top - + $("#message_view_header").safeOuterHeight() - + $("#navbar_alerts_wrapper").height() + ); } export function first_visible_message(bar) { diff --git a/static/js/panels.js b/static/js/navbar_alerts.js similarity index 92% rename from static/js/panels.js rename to static/js/navbar_alerts.js index ed7a459aef..e184bc0b44 100644 --- a/static/js/panels.js +++ b/static/js/navbar_alerts.js @@ -11,13 +11,13 @@ import * as util from "./util"; /* This is called by resize.js, and thus indirectly when we trigger * resize events in the logic below. */ export function resize_app() { - const panels_height = $("#panels").height(); - $("body > .app").height("calc(100% - " + panels_height + "px)"); + const navbar_alerts_wrapper_height = $("#navbar_alerts_wrapper").height(); + $("body > .app").height("calc(100% - " + navbar_alerts_wrapper_height + "px)"); // the floating recipient bar is usually positioned right below // the `.header` element (including padding). const frb_top = - panels_height + + navbar_alerts_wrapper_height + $(".header").height() + Number.parseInt($(".header").css("paddingBottom"), 10); $("#floating_recipient_bar").css("top", frb_top + "px"); @@ -149,7 +149,7 @@ export function initialize() { dismiss_upgrade_nag(ls); }); - $("#panels").on("click", ".alert .close, .alert .exit", function (e) { + $("#navbar_alerts_wrapper").on("click", ".alert .close, .alert .exit", function (e) { e.stopPropagation(); const $process = $(e.target).closest("[data-process]"); if (get_step($process) === 1 && $process.data("process") === "notifications") { @@ -160,8 +160,8 @@ export function initialize() { $(window).trigger("resize"); }); - // Treat Enter with links in the panels UI focused like a click., - $("#panels").on("keyup", ".alert-link[role=button]", function (e) { + // Treat Enter with links in the navbar alerts UI focused like a click., + $("#navbar_alerts_wrapper").on("keyup", ".alert-link[role=button]", function (e) { e.stopPropagation(); if (e.key === "Enter") { $(this).trigger("click"); diff --git a/static/js/recent_topics.js b/static/js/recent_topics.js index 630aa8b201..ad3e186c7e 100644 --- a/static/js/recent_topics.js +++ b/static/js/recent_topics.js @@ -15,9 +15,9 @@ import * as message_view_header from "./message_view_header"; import * as muting from "./muting"; import * as narrow from "./narrow"; import * as narrow_state from "./narrow_state"; +import * as navbar_alerts from "./navbar_alerts"; import * as navigate from "./navigate"; import * as overlays from "./overlays"; -import * as panels from "./panels"; import * as people from "./people"; import * as popovers from "./popovers"; import * as recent_senders from "./recent_senders"; @@ -689,7 +689,7 @@ export function hide() { // Fixes misaligned message_view and hidden // floating_recipient_bar. - panels.resize_app(); + navbar_alerts.resize_app(); // This makes sure user lands on the selected message // and not always at the top of the narrow. diff --git a/static/js/resize.js b/static/js/resize.js index 82335df91b..83dedd1637 100644 --- a/static/js/resize.js +++ b/static/js/resize.js @@ -5,9 +5,9 @@ import * as blueslip from "./blueslip"; import * as condense from "./condense"; import * as message_lists from "./message_lists"; import * as message_viewport from "./message_viewport"; +import * as navbar_alerts from "./navbar_alerts"; import * as navigate from "./navigate"; import {page_params} from "./page_params"; -import * as panels from "./panels"; import * as popovers from "./popovers"; import * as ui from "./ui"; import * as util from "./util"; @@ -209,7 +209,7 @@ export function resize_sidebars() { } export function resize_page_components() { - panels.resize_app(); + navbar_alerts.resize_app(); const h = resize_sidebars(); resize_bottom_whitespace(h); } diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index cc623565e1..83e8afdb9b 100644 --- a/static/js/server_events_dispatch.js +++ b/static/js/server_events_dispatch.js @@ -22,11 +22,11 @@ import * as message_list from "./message_list"; import * as message_lists from "./message_lists"; import * as muting_ui from "./muting_ui"; import * as narrow_state from "./narrow_state"; +import * as navbar_alerts from "./navbar_alerts"; import * as night_mode from "./night_mode"; import * as notifications from "./notifications"; import * as overlays from "./overlays"; import {page_params} from "./page_params"; -import * as panels from "./panels"; import * as peer_data from "./peer_data"; import * as people from "./people"; import * as reactions from "./reactions"; @@ -290,7 +290,7 @@ export function dispatch_normal_event(event) { if (page_params.is_admin) { // Update the UI notice about the user's profile being // incomplete, as we might have filled in the missing field(s). - panels.show_profile_incomplete(panels.check_profile_incomplete()); + navbar_alerts.show_profile_incomplete(navbar_alerts.check_profile_incomplete()); } break; } diff --git a/static/js/ui_init.js b/static/js/ui_init.js index be16abd62b..1db11f5758 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -38,11 +38,11 @@ import * as message_scroll from "./message_scroll"; import * as message_view_header from "./message_view_header"; import * as message_viewport from "./message_viewport"; import * as muting from "./muting"; +import * as navbar_alerts from "./navbar_alerts"; import * as navigate from "./navigate"; import * as notifications from "./notifications"; import * as overlays from "./overlays"; import {page_params} from "./page_params"; -import * as panels from "./panels"; import * as people from "./people"; import * as pm_conversations from "./pm_conversations"; import * as presence from "./presence"; @@ -471,7 +471,7 @@ export function initialize_everything() { people.initialize(page_params.user_id, people_params); scroll_bar.initialize(); message_viewport.initialize(); - panels.initialize(); + navbar_alerts.initialize(); compose_closed_ui.initialize(); initialize_kitchen_sink_stuff(); echo.initialize(); diff --git a/static/styles/zulip.css b/static/styles/zulip.css index e20e9213e7..4ae092186e 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -275,7 +275,7 @@ p.n-margin { border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); } -#panels { +#navbar_alerts_wrapper { font-size: 1rem; position: relative; diff --git a/templates/zerver/app/navbar_alerts.html b/templates/zerver/app/navbar_alerts.html index 9e18db3d48..692ef46fbb 100644 --- a/templates/zerver/app/navbar_alerts.html +++ b/templates/zerver/app/navbar_alerts.html @@ -1,4 +1,4 @@ -
+