diff --git a/.eslintrc.json b/.eslintrc.json index 98dd9980fc..2bcd42d1ed 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -121,6 +121,7 @@ "reactions": false, "realm_icon": false, "realm_logo": false, + "realm_night_logo": false, "recent_senders": false, "reload": false, "reload_state": false, diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js index b1305c4fb4..d9365ce288 100644 --- a/frontend_tests/node_tests/dispatch.js +++ b/frontend_tests/node_tests/dispatch.js @@ -296,6 +296,16 @@ var event_fixtures = { }, }, + realm__update_dict__night_logo: { + type: 'realm', + op: 'update_dict', + property: 'night_logo', + data: { + night_logo_url: 'night_logo.png', + night_logo_source: 'U', + }, + }, + realm__deactivated: { type: 'realm', op: 'deactivated', @@ -940,6 +950,12 @@ with_overrides(function (override) { assert_same(page_params.realm_logo_url, 'logo.png'); assert_same(page_params.realm_logo_source, 'U'); + event = event_fixtures.realm__update_dict__night_logo; + override('realm_logo.rerender', noop); + dispatch(event); + assert_same(page_params.realm_night_logo_url, 'night_logo.png'); + assert_same(page_params.realm_night_logo_source, 'U'); + event = event_fixtures.realm__deactivated; window.location = {}; dispatch(event); @@ -1336,6 +1352,7 @@ with_overrides(function (override) { event = event_fixtures.update_display_settings__night_mode; page_params.night_mode = false; override('night_mode.enable', stub.f); // automatically checks if called + override('realm_logo.rerender', noop); dispatch(event); assert_same(page_params.night_mode, true); }); diff --git a/frontend_tests/node_tests/settings_org.js b/frontend_tests/node_tests/settings_org.js index 06fbc480bd..37ffd12372 100644 --- a/frontend_tests/node_tests/settings_org.js +++ b/frontend_tests/node_tests/settings_org.js @@ -57,6 +57,7 @@ const _ui_report = { const _realm_logo = { build_realm_logo_widget: noop, + build_realm_night_logo_widget: noop, }; set_global('channel', _channel); diff --git a/static/js/admin.js b/static/js/admin.js index 3516b84a83..45f4234826 100644 --- a/static/js/admin.js +++ b/static/js/admin.js @@ -53,6 +53,8 @@ exports.build_page = function () { realm_icon_url: page_params.realm_icon_url, realm_logo_source: page_params.realm_logo_source, realm_logo_url: page_params.realm_logo_url, + realm_night_logo_source: page_params.realm_night_logo_source, + realm_night_logo_url: page_params.realm_night_logo_url, realm_mandatory_topics: page_params.realm_mandatory_topics, realm_send_welcome_emails: page_params.realm_send_welcome_emails, realm_message_content_allowed_in_email_notifications: diff --git a/static/js/realm_logo.js b/static/js/realm_logo.js index 906e4e83b0..11d0289c48 100644 --- a/static/js/realm_logo.js +++ b/static/js/realm_logo.js @@ -2,22 +2,22 @@ var realm_logo = (function () { var exports = {}; - exports.build_realm_logo_widget = function (upload_function) { var get_file_input = function () { return $('#realm_logo_file_input').expectOne(); }; - if (page_params.realm_logo_source === 'D') { $("#realm_logo_delete_button").hide(); } else { $("#realm_logo_delete_button").show(); } + var data = {night: JSON.stringify(false)}; $("#realm_logo_delete_button").on('click', function (e) { e.preventDefault(); e.stopPropagation(); channel.del({ url: '/json/realm/logo', + data: data, }); }); @@ -30,18 +30,61 @@ var realm_logo = (function () { ); }; + exports.build_realm_night_logo_widget = function (upload_function) { + var get_file_input = function () { + return $('#realm_night_logo_file_input').expectOne(); + }; + if (page_params.realm_night_logo_source === 'D') { + $("#realm_night_logo_delete_button").hide(); + } else { + $("#realm_night_logo_delete_button").show(); + } + var data = {night: JSON.stringify(true)}; + $("#realm_night_logo_delete_button").on('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + channel.del({ + url: '/json/realm/logo', + data: data, + }); + }); + + return upload_widget.build_direct_upload_widget( + get_file_input, + $("#realm_night_logo_file_input_error").expectOne(), + $("#realm_night_logo_upload_button").expectOne(), + upload_function, + page_params.max_logo_file_size + ); + }; + exports.rerender = function () { + var file_input = $("#realm_logo_file_input"); + var night_file_input = $("#realm_night_logo_file_input"); $("#realm-settings-logo").attr("src", page_params.realm_logo_url); - $("#realm-logo").attr("src", page_params.realm_logo_url); + $("#realm-settings-night-logo").attr("src", page_params.realm_night_logo_url); + if (page_params.night_mode) { + $("#realm-logo").attr("src", page_params.realm_night_logo_url); + } else { + $("#realm-logo").attr("src", page_params.realm_logo_url); + } if (page_params.realm_logo_source === 'U') { $("#realm_logo_delete_button").show(); } else { $("#realm_logo_delete_button").hide(); // Need to clear input because of a small edge case // where you try to upload the same image you just deleted. - var file_input = $("#realm_logo_file_input"); file_input.val(''); } + if (page_params.realm_night_logo_source === 'U') { + $("#realm_night_logo_delete_button").show(); + } else { + $("#realm_night_logo_delete_button").hide(); + // Need to clear input because of a small edge case + // where you try to upload the same image you just deleted. + night_file_input.val(''); + } + }; return exports; diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index 0c4cbfcb11..3c5d1b3a5b 100644 --- a/static/js/server_events_dispatch.js +++ b/static/js/server_events_dispatch.js @@ -165,6 +165,10 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) { page_params.realm_logo_url = event.data.logo_url; page_params.realm_logo_source = event.data.logo_source; realm_logo.rerender(); + } else if (event.op === 'update_dict' && event.property === 'night_logo') { + page_params.realm_night_logo_url = event.data.night_logo_url; + page_params.realm_night_logo_source = event.data.night_logo_source; + realm_logo.rerender(); } else if (event.op === 'deactivated') { window.location.href = "/accounts/deactivated/"; } @@ -392,8 +396,10 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) { setTimeout(function () { if (event.setting === true) { night_mode.enable(); + realm_logo.rerender(); } else { night_mode.disable(); + realm_logo.rerender(); } $("body").fadeIn(300); }, 300); diff --git a/static/js/settings_org.js b/static/js/settings_org.js index 4e257ee0e7..23ac3a53e6 100644 --- a/static/js/settings_org.js +++ b/static/js/settings_org.js @@ -1116,20 +1116,30 @@ exports.build_page = function () { } realm_icon.build_realm_icon_widget(upload_realm_icon); - function upload_realm_logo(file_input) { + function upload_realm_logo(file_input, night) { var form_data = new FormData(); + var spinner; + var error_field; + var button_text; form_data.append('csrfmiddlewaretoken', csrf_token); jQuery.each(file_input[0].files, function (i, file) { form_data.append('file-' + i, file); }); - - var error_field = $("#realm_logo_file_input_error"); + if (night) { + error_field = $("#realm_night_logo_file_input_error"); + spinner = $("#upload_night_logo_spinner"); + button_text = $("#upload_night_logo_button_text"); + } else { + error_field = $("#realm_logo_file_input_error"); + spinner = $("#upload_logo_spinner"); + button_text = $("#upload_logo_button_text"); + } + spinner.expectOne(); error_field.hide(); - var spinner = $("#upload_logo_spinner").expectOne(); + button_text.expectOne().hide(); loading.make_indicator(spinner, {text: i18n.t("Uploading logo.")}); - $("#upload_logo_button_text").expectOne().hide(); - + form_data.append('night', JSON.stringify(night)); channel.post({ url: '/json/realm/logo', data: form_data, @@ -1137,17 +1147,18 @@ exports.build_page = function () { processData: false, contentType: false, success: function () { - loading.destroy_indicator($("#upload_logo_spinner")); - $("#upload_logo_button_text").expectOne().show(); + loading.destroy_indicator(spinner); + button_text.expectOne().show(); }, error: function (xhr) { - loading.destroy_indicator($("#upload_logo_spinner")); - $("#upload_logo_button_text").expectOne().show(); + loading.destroy_indicator(spinner); + button_text.expectOne().show(); ui_report.error("", xhr, error_field); }, }); } + realm_logo.build_realm_night_logo_widget(upload_realm_logo); realm_logo.build_realm_logo_widget(upload_realm_logo); $('#deactivate_realm_button').on('click', function (e) { diff --git a/static/js/upload_widget.js b/static/js/upload_widget.js index 6fab38fb02..3976d4b756 100644 --- a/static/js/upload_widget.js +++ b/static/js/upload_widget.js @@ -116,10 +116,15 @@ var upload_widget = (function () { ) { // default value of max upladed file size max_file_upload_size = max_file_upload_size || default_max_file_size; - function accept() { input_error.hide(); - upload_function(get_file_input()); + if (upload_button[0].id === "realm_night_logo_upload_button") { + upload_function(get_file_input(), true); + } else if (upload_button[0].id === "realm_logo_upload_button") { + upload_function(get_file_input(), false); + } else { + upload_function(get_file_input()); + } } function clear() { diff --git a/static/styles/settings.scss b/static/styles/settings.scss index e7da306ceb..811c4e9c68 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -970,7 +970,8 @@ input[type=checkbox].inline-block { #upload_avatar_spinner, #upload_logo_spinner, -#upload_icon_spinner { +#upload_icon_spinner, +#upload_night_logo_spinner { font-size: 14px; margin: auto; } @@ -1113,7 +1114,8 @@ input[type=checkbox].inline-block { height: 100px; } -#realm-settings-logo { +#realm-settings-logo, +#realm-settings-night-logo { border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.2); /* We allow actual images up to 800x100 in the main display, but the @@ -1690,7 +1692,8 @@ input[type=text]#settings_search { } @media (max-width: 1023px) { - #realm-settings-logo { + #realm-settings-logo, + #realm-settings-night-logo { max-width: 600px; height: 75px; } @@ -1716,7 +1719,8 @@ input[type=text]#settings_search { margin: 5px 0 0 0; } - #realm-settings-logo { + #realm-settings-logo, + #realm-settings-night-logo { max-width: 400px; height: 50px; } diff --git a/static/templates/settings/organization-profile-admin.handlebars b/static/templates/settings/organization-profile-admin.handlebars index 4c3a38f127..21104d20e9 100644 --- a/static/templates/settings/organization-profile-admin.handlebars +++ b/static/templates/settings/organization-profile-admin.handlebars @@ -66,6 +66,27 @@ +

{{t "Organization logo for night mode" }}

+

{{t "Like Organization Logo, but for the night theme." }}

+ +
+
+ + +
+
+
+ + +
+
+

{{t "Deactivate organization" }}

diff --git a/templates/zerver/api/server-settings.md b/templates/zerver/api/server-settings.md index 2a2f986999..9c3366768a 100644 --- a/templates/zerver/api/server-settings.md +++ b/templates/zerver/api/server-settings.md @@ -56,6 +56,9 @@ curl {{ api_url }}/v1/server_settings \ * `realm_logo`: the URI of the organization's logo as a horizontal format image (displayed in the top-left corner of the logged-in webapp). +* `realm_night_logo`: the URI of the organization's logo in the night mode as a + horizontal format image (dispalyed in the top-left corner of the logged-in + webapp). * `realm_description`: HTML description of the organization, as configured by the [organization profile](/help/create-your-organization-profile). diff --git a/templates/zerver/app/navbar.html b/templates/zerver/app/navbar.html index 160ac2dd0e..7f11a9da73 100644 --- a/templates/zerver/app/navbar.html +++ b/templates/zerver/app/navbar.html @@ -31,7 +31,7 @@