From 9b622b7d25cdaf5fa4fecc5168cc17e57faff9d5 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Thu, 10 Feb 2022 15:06:55 +0000 Subject: [PATCH] gear_menu: Allow user to configure preferred theme. We save the preferred theme in localstorage so that user doesn't have to re-select the theme on every reload. Users on slow computers might see flash of a theme change, if it happens. --- static/js/click_handlers.js | 15 +++++++++++++++ static/js/dark_theme.js | 26 ++++++++++++++++++++++++++ static/js/dark_theme.ts | 13 ------------- static/js/ui_init.js | 12 ++++++++++++ static/styles/dark_theme.css | 10 ++++++++++ static/styles/zulip.css | 4 ++++ static/templates/gear_menu.hbs | 12 +++++++++++- tools/test-js-with-node | 2 +- 8 files changed, 79 insertions(+), 15 deletions(-) create mode 100644 static/js/dark_theme.js delete mode 100644 static/js/dark_theme.ts diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 257b261389..a48ceee9eb 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -17,6 +17,7 @@ import * as compose_actions from "./compose_actions"; import * as compose_error from "./compose_error"; import * as compose_state from "./compose_state"; import {media_breakpoints_num} from "./css_variables"; +import * as dark_theme from "./dark_theme"; import * as emoji_picker from "./emoji_picker"; import * as hash_util from "./hash_util"; import * as hotspots from "./hotspots"; @@ -831,6 +832,20 @@ export function initialize() { $(".modal.in").removeClass("in"); }); + // GEAR MENU + + $("body").on("click", "#gear-menu .dark-theme", (e) => { + // Allow propagation to close gear menu. + e.preventDefault(); + dark_theme.enable(); + }); + + $("body").on("click", "#gear-menu .light-theme", (e) => { + // Allow propagation to close gear menu. + e.preventDefault(); + dark_theme.disable(); + }); + // MAIN CLICK HANDLER $(document).on("click", (e) => { diff --git a/static/js/dark_theme.js b/static/js/dark_theme.js new file mode 100644 index 0000000000..9e564f3649 --- /dev/null +++ b/static/js/dark_theme.js @@ -0,0 +1,26 @@ +import $ from "jquery"; + +import {localstorage} from "./localstorage"; +import {page_params} from "./page_params"; + +export function enable() { + $("body").removeClass("color-scheme-automatic").addClass("dark-theme"); + + if (page_params.is_spectator) { + const ls = localstorage(); + ls.set("spectator-theme-preference", "dark"); + } +} + +export function disable() { + $("body").removeClass("color-scheme-automatic").removeClass("dark-theme"); + + if (page_params.is_spectator) { + const ls = localstorage(); + ls.set("spectator-theme-preference", "light"); + } +} + +export function default_preference_checker() { + $("body").removeClass("dark-theme").addClass("color-scheme-automatic"); +} diff --git a/static/js/dark_theme.ts b/static/js/dark_theme.ts deleted file mode 100644 index 4c1790d39a..0000000000 --- a/static/js/dark_theme.ts +++ /dev/null @@ -1,13 +0,0 @@ -import $ from "jquery"; - -export function enable(): void { - $("body").removeClass("color-scheme-automatic").addClass("dark-theme"); -} - -export function disable(): void { - $("body").removeClass("color-scheme-automatic").removeClass("dark-theme"); -} - -export function default_preference_checker(): void { - $("body").removeClass("dark-theme").addClass("color-scheme-automatic"); -} diff --git a/static/js/ui_init.js b/static/js/ui_init.js index b6e09ba77a..7dcd441e42 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -25,6 +25,7 @@ import * as compose_pm_pill from "./compose_pm_pill"; import * as composebox_typeahead from "./composebox_typeahead"; import * as condense from "./condense"; import * as copy_and_paste from "./copy_and_paste"; +import * as dark_theme from "./dark_theme"; import * as drafts from "./drafts"; import * as echo from "./echo"; import * as emoji_picker from "./emoji_picker"; @@ -37,6 +38,7 @@ import * as i18n from "./i18n"; import * as invite from "./invite"; import * as lightbox from "./lightbox"; import * as linkifiers from "./linkifiers"; +import {localstorage} from "./localstorage"; import * as markdown from "./markdown"; import * as markdown_config from "./markdown_config"; import * as message_edit from "./message_edit"; @@ -547,6 +549,16 @@ export function initialize_everything() { const user_settings_params = pop_fields("user_settings"); const realm_settings_defaults_params = pop_fields("realm_user_settings_defaults"); + if (page_params.is_spectator) { + const ls = localstorage(); + const preferred_theme = ls.get("spectator-theme-preference"); + if (preferred_theme === "dark") { + dark_theme.enable(); + } else if (preferred_theme === "light") { + dark_theme.disable(); + } + } + i18n.initialize(i18n_params); tippyjs.initialize(); popover_menus.initialize(); diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css index a4cd188cae..75153d3e0f 100644 --- a/static/styles/dark_theme.css +++ b/static/styles/dark_theme.css @@ -466,6 +466,16 @@ body.dark-theme { } } + #gear-menu { + .dark-theme { + display: none; + } + + .light-theme { + display: block; + } + } + .nav .dropdown-menu::after, .popover.bottom .arrow { border-bottom-color: hsl(235, 18%, 7%); diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 278bc6fb8e..33fc1cbe9c 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -660,6 +660,10 @@ strong { color: inherit; } +#gear-menu .light-theme { + display: none; +} + /* .dropdown-menu from v2.3.2 + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d basic idea of this fix is to remove decorations from :hover and apply them only diff --git a/static/templates/gear_menu.hbs b/static/templates/gear_menu.hbs index 412be7cabf..68531ce58e 100644 --- a/static/templates/gear_menu.hbs +++ b/static/templates/gear_menu.hbs @@ -32,7 +32,17 @@ {{/unless}} - + + +
  • {{t 'Help center' }} diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 52647a7ce1..d6c139fd2d 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -69,7 +69,7 @@ EXEMPT_FILES = make_set( "static/js/copy_and_paste.js", "static/js/csrf.ts", "static/js/css_variables.js", - "static/js/dark_theme.ts", + "static/js/dark_theme.js", "static/js/debug.js", "static/js/deprecated_feature_notice.js", "static/js/desktop_integration.js",