Made image size of preview images in tables configurable and slightly bigger by default

This makes PR #984 and #623 obsolete

Author: jbtronics

assets/css/app/images.css

@@ -18,8 +18,8 @@
  */
 
 .hoverpic {
-    min-width: 10px;
-    max-width: 30px;
+    min-width: var(--table-image-preview-min-size, 20px);
+    max-width: var(--table-image-preview-max-size, 35px);
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -49,7 +49,7 @@
 }
 
 .part-table-image {
-    max-height: 40px;
+    max-height: calc(1.2*var(--table-image-preview-max-size, 35px)); /** Aspect ratio of maximum 1.2 */
     object-fit: contain;
 }
 

src/Settings/BehaviorSettings/TableSettings.php

@@ -70,6 +70,20 @@ class TableSettings
         PartTableColumns::CATEGORY, PartTableColumns::FOOTPRINT, PartTableColumns::MANUFACTURER,
         PartTableColumns::LOCATION, PartTableColumns::AMOUNT];
 
+    #[SettingsParameter(label: new TM("settings.behavior.table.preview_image_min_width"),
+        formOptions: ['attr' => ['min' => 1, 'max' => 100]],
+        envVar: "int:TABLE_IMAGE_PREVIEW_MIN_SIZE", envVarMode: EnvVarMode::OVERWRITE
+    )]
+    #[Assert\Range(min: 1, max: 100)]
+    public int $previewImageMinWidth = 20;
+
+    #[SettingsParameter(label: new TM("settings.behavior.table.preview_image_max_width"),
+        formOptions: ['attr' => ['min' => 1, 'max' => 100]],
+        envVar: "int:TABLE_IMAGE_PREVIEW_MAX_SIZE", envVarMode: EnvVarMode::OVERWRITE
+    )]
+    #[Assert\Range(min: 1, max: 100)]
+    #[Assert\GreaterThanOrEqual(propertyPath: 'previewImageMinWidth')]
+    public int $previewImageMaxWidth = 35;
 
     public static function mapPartsDefaultColumnsEnv(string $columns): array
     {
@@ -87,4 +101,4 @@ public static function mapPartsDefaultColumnsEnv(string $columns): array
         return $ret;
     }
 
-}
+}

templates/base.html.twig

@@ -53,6 +53,14 @@
         {% endif %}
 
         {{ encore_entry_link_tags('app') }}
+
+        {% set table_settings = settings_instance('table') %}
+        <style nonce="{{ csp_nonce('style') }}">
+            :root {
+                --table-image-preview-min-size: {{ table_settings.previewImageMinWidth }}px;
+                --table-image-preview-max-size: {{ table_settings.previewImageMaxWidth }}px;
+            }
+        </style>
     {% endblock %}
 
     {% block javascripts %}

translations/messages.en.xlf

@@ -13489,5 +13489,17 @@ Please note, that you can not impersonate a disabled user. If you try you will g
         <target>These providers will be preselected for searches in part providers.</target>
       </segment>
     </unit>
+    <unit id="dv6eslZ" name="settings.behavior.table.preview_image_max_width">
+      <segment>
+        <source>settings.behavior.table.preview_image_max_width</source>
+        <target>Preview image max width (px)</target>
+      </segment>
+    </unit>
+    <unit id="5bOoqEL" name="settings.behavior.table.preview_image_min_width">
+      <segment>
+        <source>settings.behavior.table.preview_image_min_width</source>
+        <target>Preview image min width (px)</target>
+      </segment>
+    </unit>
   </file>
 </xliff>