Fix issue with custom icons which are higher than large.

CHANGELOG.txt

@@ -4,6 +4,7 @@
 
   Users side :
   ------------
+    # The render of custom menu icons has been fixed for non-square images.
     # In mass-import form, the selector for properties was not our expected widget.
     # In menu entries with custom URLs, links are now opened in a new tab.
     # Some escaping issues have been fixed.

creme/creme_core/templatetags/creme_widgets.py

@@ -20,6 +20,7 @@
 
 import logging
 from base64 import b64encode
+from io import BytesIO
 from os.path import splitext
 
 from django.conf import settings
@@ -30,6 +31,7 @@
 from django.utils.html import urlize as django_urlize
 from django.utils.safestring import mark_safe
 from django.utils.translation import gettext as _
+from PIL.Image import open as open_img
 
 from ..gui.icons import (
     BaseIcon,
@@ -139,14 +141,33 @@ def render(this, css_class=''):
 
                 with open(this.path, 'rb') as img:
                     _base_path, extension = splitext(path)
-                    img_data = b64encode(img.read()).decode()
+                    file_data = img.read()
+
+                    # TODO: store width & height?
+                    with open_img(BytesIO(file_data)) as img:
+                        width, height = img.size
+
+                    img_data = b64encode(file_data).decode()
+
+                if width > height:
+                    size_attr = 'width'
+                    # NB: we pad in order to center vertically the image
+                    # tips: "this.size * height / width" gives the scaled height
+                    padding = (this.size - int(round(this.size * height / width))) // 2
+                    style = f'padding-top: {padding}px;' if padding else ''
+                else:
+                    size_attr = 'height'
+                    style = ''
 
                 return format_html(
-                    '<img src="{url}" {attrs}title="{label}" alt="{label}" width="{size}px"/>',
+                    '<img src="{url}" {attrs}title="{label}" alt="{label}" '
+                    '{size_attr}="{size}px" style="{style}"/>',
+                    size_attr=size_attr,
                     size=this.size,
                     label=this.label,
                     attrs=format_html('class="{}" ', final_css_class) if final_css_class else '',
                     url=f'data:image/{extension[1:]};base64, {img_data}',
+                    style=style,
                 )
 
         return InlinedIcon(path, size=size_px, label=label)

creme/creme_core/tests/templatetags/test_creme_widgets.py

@@ -443,8 +443,9 @@ def test_widget_icon_instance(self):
             render,
         )
 
-    def test_widget_icon_data01(self):
+    def test_widget_icon_data__high(self):
         path = Path(
+            # 16 x 16 px
             settings.CREME_ROOT, 'static', 'icecream', 'images', 'remove_16.png',
         )
         self.assertTrue(path.exists())
@@ -466,14 +467,43 @@ def test_widget_icon_data01(self):
         self.assertFalse(dom.children)
 
         get_attribute = dict(dom.attributes).get
-        self.assertEqual('22px', get_attribute('width'))
+        self.assertEqual('22px', get_attribute('height'))
         self.assertEqual(label, get_attribute('alt'))
         self.assertEqual(label, get_attribute('title'))
+        self.assertEqual('', get_attribute('style'))
         self.assertStartsWith(
             get_attribute('src', ''),
             'data:image/png;base64, iVBORw0KGgoAAAANSUh',
         )
 
+    def test_widget_icon_data__large(self):
+        path = Path(
+            # 89 x 40 px
+            settings.CREME_ROOT, 'static', 'common', 'images', 'creme_powered.png',
+        )
+        self.assertTrue(path.exists())
+
+        label = 'Large image'
+
+        with self.assertNoException():
+            render = Template(
+                r'{% load creme_widgets %}'
+                r'{% widget_icon data=path label=label size="header-menu-home" %}'
+            ).render(Context({
+                'THEME_NAME': 'icecream',
+                'path': path,
+                'label': label,
+            }))
+
+        dom = assert_and_parse_html(self, render, 'Rendered icon is not valid HTML', None)
+        self.assertEqual('img', dom.name)
+        self.assertFalse(dom.children)
+
+        get_attribute = dict(dom.attributes).get
+        self.assertEqual('30px', get_attribute('width'))
+        self.assertEqual('padding-top: 8px;', get_attribute('style'))
+        self.assertEqual(label, get_attribute('title'))
+
     def test_widget_icon_named_error01(self):
         with self.assertRaises(TemplateSyntaxError) as cm:
             Template(