From 3540075b61606a11c9f2801283ab7280640410dc Mon Sep 17 00:00:00 2001 From: Kristian Feldsam Date: Sun, 3 Sep 2023 18:49:12 +0200 Subject: [PATCH] [Web] dark mode logo support Signed-off-by: Kristian Feldsam --- data/web/admin.php | 1 + data/web/inc/functions.customize.inc.php | 22 +++++++++---- data/web/inc/header.inc.php | 1 + data/web/inc/triggers.inc.php | 4 +++ data/web/js/build/013-mailcow.js | 9 ++++++ data/web/lang/lang.en-gb.json | 2 ++ data/web/templates/admin/customize/logo.twig | 9 ++++++ .../templates/admin/tab-config-customize.twig | 32 +++++++++++-------- data/web/templates/base.twig | 5 ++- data/web/templates/debug.twig | 3 +- data/web/templates/index.twig | 5 ++- 11 files changed, 69 insertions(+), 24 deletions(-) create mode 100644 data/web/templates/admin/customize/logo.twig diff --git a/data/web/admin.php b/data/web/admin.php index 14cb89f5..ebddb7b9 100644 --- a/data/web/admin.php +++ b/data/web/admin.php @@ -108,6 +108,7 @@ $template_data = [ 'rsettings' => $rsettings, 'rspamd_regex_maps' => $rspamd_regex_maps, 'logo_specs' => customize('get', 'main_logo_specs'), + 'logo_dark_specs' => customize('get', 'main_logo_dark_specs'), 'ip_check' => customize('get', 'ip_check'), 'password_complexity' => password_complexity('get'), 'show_rspamd_global_filters' => @$_SESSION['show_rspamd_global_filters'], diff --git a/data/web/inc/functions.customize.inc.php b/data/web/inc/functions.customize.inc.php index 6025d97d..0da8c356 100644 --- a/data/web/inc/functions.customize.inc.php +++ b/data/web/inc/functions.customize.inc.php @@ -24,9 +24,10 @@ function customize($_action, $_item, $_data = null) { } switch ($_item) { case 'main_logo': - if (in_array($_data['main_logo']['type'], array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/x-png', 'image/png', 'image/svg+xml'))) { + case 'main_logo_dark': + if (in_array($_data[$_item]['type'], array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/x-png', 'image/png', 'image/svg+xml'))) { try { - if (file_exists($_data['main_logo']['tmp_name']) !== true) { + if (file_exists($_data[$_item]['tmp_name']) !== true) { $_SESSION['return'][] = array( 'type' => 'danger', 'log' => array(__FUNCTION__, $_action, $_item, $_data), @@ -34,7 +35,7 @@ function customize($_action, $_item, $_data = null) { ); return false; } - $image = new Imagick($_data['main_logo']['tmp_name']); + $image = new Imagick($_data[$_item]['tmp_name']); if ($image->valid() !== true) { $_SESSION['return'][] = array( 'type' => 'danger', @@ -63,7 +64,7 @@ function customize($_action, $_item, $_data = null) { return false; } try { - $redis->Set('MAIN_LOGO', 'data:' . $_data['main_logo']['type'] . ';base64,' . base64_encode(file_get_contents($_data['main_logo']['tmp_name']))); + $redis->Set(strtoupper($_item), 'data:' . $_data[$_item]['type'] . ';base64,' . base64_encode(file_get_contents($_data[$_item]['tmp_name']))); } catch (RedisException $e) { $_SESSION['return'][] = array( @@ -201,8 +202,9 @@ function customize($_action, $_item, $_data = null) { } switch ($_item) { case 'main_logo': + case 'main_logo_dark': try { - if ($redis->del('MAIN_LOGO')) { + if ($redis->del(strtoupper($_item))) { $_SESSION['return'][] = array( 'type' => 'success', 'log' => array(__FUNCTION__, $_action, $_item, $_data), @@ -239,8 +241,9 @@ function customize($_action, $_item, $_data = null) { return ($app_links) ? $app_links : false; break; case 'main_logo': + case 'main_logo_dark': try { - return $redis->get('MAIN_LOGO'); + return $redis->get(strtoupper($_item)); } catch (RedisException $e) { $_SESSION['return'][] = array( @@ -277,9 +280,14 @@ function customize($_action, $_item, $_data = null) { } break; case 'main_logo_specs': + case 'main_logo_dark_specs': try { $image = new Imagick(); - $img_data = explode('base64,', customize('get', 'main_logo')); + if($_item == 'main_logo_specs') { + $img_data = explode('base64,', customize('get', 'main_logo')); + } else { + $img_data = explode('base64,', customize('get', 'main_logo_dark')); + } if ($img_data[1]) { $image->readImageBlob(base64_decode($img_data[1])); return $image->identifyImage(); diff --git a/data/web/inc/header.inc.php b/data/web/inc/header.inc.php index f62819a2..9afc288d 100644 --- a/data/web/inc/header.inc.php +++ b/data/web/inc/header.inc.php @@ -40,6 +40,7 @@ $globalVariables = [ 'ui_texts' => $UI_TEXTS, 'css_path' => '/cache/'.basename($CSSPath), 'logo' => customize('get', 'main_logo'), + 'logo_dark' => customize('get', 'main_logo_dark'), 'available_languages' => $AVAILABLE_LANGUAGES, 'lang' => $lang, 'skip_sogo' => (getenv('SKIP_SOGO') == 'y'), diff --git a/data/web/inc/triggers.inc.php b/data/web/inc/triggers.inc.php index c40453a2..6922429b 100644 --- a/data/web/inc/triggers.inc.php +++ b/data/web/inc/triggers.inc.php @@ -120,10 +120,14 @@ if (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == "admi if (isset($_POST["submit_main_logo"])) { if ($_FILES['main_logo']['error'] == 0) { customize('add', 'main_logo', $_FILES); + } + if ($_FILES['main_logo_dark']['error'] == 0) { + customize('add', 'main_logo_dark', $_FILES); } } if (isset($_POST["reset_main_logo"])) { customize('delete', 'main_logo'); + customize('delete', 'main_logo_dark'); } // Some actions will not be available via API if (isset($_POST["license_validate_now"])) { diff --git a/data/web/js/build/013-mailcow.js b/data/web/js/build/013-mailcow.js index e659915b..4907623c 100644 --- a/data/web/js/build/013-mailcow.js +++ b/data/web/js/build/013-mailcow.js @@ -314,19 +314,28 @@ $(document).ready(function() { $('#dark-mode-toggle').click(toggleDarkMode); if ($('#dark-mode-theme').length) { $('#dark-mode-toggle').prop('checked', true); + $('.main-logo').addClass('d-none'); + $('.main-logo-dark').removeClass('d-none'); if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_light.png'); if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_light.png'); + } else { + $('.main-logo').removeClass('d-none'); + $('.main-logo-dark').addClass('d-none'); } function toggleDarkMode(){ if($('#dark-mode-theme').length){ $('#dark-mode-theme').remove(); $('#dark-mode-toggle').prop('checked', false); + $('.main-logo').removeClass('d-none'); + $('.main-logo-dark').addClass('d-none'); if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_dark.png'); if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_dark.png'); localStorage.setItem('theme', 'light'); }else{ $('head').append(''); $('#dark-mode-toggle').prop('checked', true); + $('.main-logo').addClass('d-none'); + $('.main-logo-dark').removeClass('d-none'); if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_light.png'); if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_light.png'); localStorage.setItem('theme', 'dark'); diff --git a/data/web/lang/lang.en-gb.json b/data/web/lang/lang.en-gb.json index a4d06da3..344fae6c 100644 --- a/data/web/lang/lang.en-gb.json +++ b/data/web/lang/lang.en-gb.json @@ -149,6 +149,8 @@ "ays": "Are you sure you want to proceed?", "ban_list_info": "See a list of banned IPs below: network (remaining ban time) - [actions].
IPs queued to be unbanned will be removed from the active ban list within a few seconds.
Red labels indicate active permanent bans by blacklisting.", "change_logo": "Change logo", + "logo_normal_label": "Normal", + "logo_dark_label": "Inverted for dark mode", "configuration": "Configuration", "convert_html_to_text": "Convert HTML to plain text", "cors_settings": "CORS Settings", diff --git a/data/web/templates/admin/customize/logo.twig b/data/web/templates/admin/customize/logo.twig new file mode 100644 index 00000000..45f6c91e --- /dev/null +++ b/data/web/templates/admin/customize/logo.twig @@ -0,0 +1,9 @@ +
+ mailcow logo +
+ {{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px + {{ logo_specs.mimetype }} + {{ logo_specs.fileSize }} +
+
+ diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig index e458eeb3..a616375c 100644 --- a/data/web/templates/admin/tab-config-customize.twig +++ b/data/web/templates/admin/tab-config-customize.twig @@ -10,22 +10,26 @@ {{ lang.admin.change_logo }}

{{ lang.admin.logo_info }}

-

-
- -

+
+ + +
+
+ + +
+ +
- {% if logo %} -
+ {% if logo or logo_dark %} +
-
- mailcow logo -
- {{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px - {{ logo_specs.mimetype }} - {{ logo_specs.fileSize }} -
-
+ {% if logo %} + {% include 'admin/customize/logo.twig' %} + {% endif %} + {% if logo_dark %} + {% include 'admin/customize/logo.twig' with {'logo': logo_dark, 'logo_specs': logo_dark_specs, 'dark': 1} %} + {% endif %}

diff --git a/data/web/templates/base.twig b/data/web/templates/base.twig index 06c47bd2..0b1c60a2 100644 --- a/data/web/templates/base.twig +++ b/data/web/templates/base.twig @@ -31,7 +31,10 @@ {% block navbar %}