#652 - add button to clear font color (go back to automatic appropriate color)

src/main/java/de/deadlocker8/budgetmaster/icon/IconService.java

@@ -92,6 +92,11 @@ public class IconService implements Resettable
 			return new Icon(imageByIdOptional.get());
 		}
 
+		if(fontColor != null && fontColor.isEmpty())
+		{
+			fontColor = null;
+		}
+
 		if(builtinIconIdentifier != null && !builtinIconIdentifier.isEmpty())
 		{
 			return new Icon(builtinIconIdentifier, fontColor);

src/main/resources/languages/base_de.properties

@@ -291,6 +291,7 @@ settings.search.itemsPerPage=Anzahl der Suchergebnisse pro Seite
 account.new.label.name=Name
 account.new.label.icon=Icon
 account.new.label.icon.fontcolor=Schriftfarbe
+account.new.icon.fontcolor.clear=Automatische Schriftfarbe
 account.new.icon.placeholder=Vorschau anklicken, um ein Icon auszuwählen
 account.new.icon.upload.choose.file=Datei auswählen
 account.new.icon.upload=Hochladen

src/main/resources/languages/base_en.properties

@@ -292,6 +292,7 @@ settings.search.itemsPerPage=Number of search results per page
 account.new.label.name=Name
 account.new.label.icon=Icon
 account.new.label.icon.fontcolor=Font color
+account.new.icon.fontcolor.clear=Automatic font color
 account.new.icon.placeholder=Click preview to select an icon
 account.new.icon.upload.choose.file=Choose file
 account.new.icon.upload=Upload

src/main/resources/static/css/style.css

@@ -504,6 +504,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     justify-content: center;
 }
 
+#buttonFontColorAuto {
+    margin-top: 3rem;
+}
+
 .invisible {
     opacity: 0;
 }

src/main/resources/static/js/categories.js

@@ -66,7 +66,9 @@ function removeActive()
 function updateCustomColor(parent, color)
 {
     removeActive();
+
     addClass(parent, "category-color-active");
     parent.style.backgroundColor = color.hex;
     document.getElementById("categoryColor").value = color.hex;
+    document.getElementById("item-icon-preview-background").style.backgroundColor = color.rgbaString;
 }

src/main/resources/static/js/fontColorPicker.js

@@ -21,6 +21,18 @@ $(document).ready(function()
         });
 
         fontColorPicker.setColor(fontColorPickerParent.style.backgroundColor, true);
+
+        $('#buttonFontColorAuto').click(function()
+        {
+            document.getElementById("fontColor").value = null;
+
+            let backgroundColor = document.getElementById('item-icon-preview-background').style.backgroundColor;
+            let rgb = extractRGB(backgroundColor);
+            let appropriateColor = getAppropriateTextColor(rgb);
+            document.getElementById("item-icon-preview").style.color = appropriateColor;
+
+            fontColorPicker.setColor(appropriateColor, true);
+        });
     }
 });
 
@@ -30,3 +42,22 @@ function updateFontColor(parent, color)
     document.getElementById("fontColor").value = color.hex;
     document.getElementById("item-icon-preview").style.color = color.hex;
 }
+
+function extractRGB(rgbaString)
+{
+    return rgbaString.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1, 4);
+}
+
+function getAppropriateTextColor(colorRGB)
+{
+    // Counting the perceptive luminance - human eye favors green color...
+    let a = 1 - (0.299 * colorRGB[0] + 0.587 * colorRGB[1] + 0.114 * colorRGB[2]) / 255;
+    if(a < 0.5)
+    {
+        return '#000000';
+    }
+    else
+    {
+        return '#FFFFFF'
+    }
+}

src/main/resources/static/js/main.js

@@ -110,14 +110,13 @@ function removeClass(element, className)
 
 function rgb2hex(rgb)
 {
-    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    let rgba = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1);
+    let convertedParts = rgba.map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n))
+            .toString(16)
+            .padStart(2, '0')
+            .replace('NaN', ''));
 
-    function hex(x)
-    {
-        return ("0" + parseInt(x).toString(16)).slice(-2);
-    }
-
-    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    return '#' + convertedParts.join('');
 }
 
 function validateLoginForm()

src/main/resources/templates/categories/newCategory.ftl

@@ -87,11 +87,15 @@
                                     <i class="material-icons prefix">palette</i>
                                     <label class="input-label" for="fontColorPickerContainer">${locale.getString("account.new.label.icon.fontcolor")}</label>
 
+                                    <div class="center-align">
+                                        <@header.buttonLink url='' icon='auto_fix_high' id='buttonFontColorAuto' localizationKey='account.new.icon.fontcolor.clear' noUrl=true/>
+
                                         <div id="fontColorPickerContainer" class="valign-wrapper">
                                             <div id="fontColorPicker" style="background-color: ${category.getFontColor()}"></div>
                                         </div>
                                     </div>
                                 </div>
+                            </div>
 
                             <br>