From 2691854f4bee8ccb2e5f68e56b876ae65e34e629 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 16 Jan 2022 12:57:57 +0100
Subject: [PATCH] #652 - add button to clear font color (go back to automatic
appropriate color)
---
.../budgetmaster/icon/IconService.java | 5 +++
.../resources/languages/base_de.properties | 1 +
.../resources/languages/base_en.properties | 1 +
src/main/resources/static/css/style.css | 6 +++-
src/main/resources/static/js/categories.js | 2 ++
.../resources/static/js/fontColorPicker.js | 31 +++++++++++++++++++
src/main/resources/static/js/main.js | 13 ++++----
.../templates/categories/newCategory.ftl | 8 +++--
8 files changed, 57 insertions(+), 10 deletions(-)
diff --git a/src/main/java/de/deadlocker8/budgetmaster/icon/IconService.java b/src/main/java/de/deadlocker8/budgetmaster/icon/IconService.java
index 3447e9e58..86f9dd2b3 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/icon/IconService.java
+++ b/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);
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 293d67b53..9122bb84e 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/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
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 5562c86ea..3a5dd6b74 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/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
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index b2c6f1474..ee21e1d18 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -493,7 +493,7 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
height: 3px;
}
-#customColorPickerContainer > span{
+#customColorPickerContainer > span {
color: black;
line-height: 25px;
}
@@ -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;
}
diff --git a/src/main/resources/static/js/categories.js b/src/main/resources/static/js/categories.js
index 0c9269104..0c32375b3 100644
--- a/src/main/resources/static/js/categories.js
+++ b/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;
}
diff --git a/src/main/resources/static/js/fontColorPicker.js b/src/main/resources/static/js/fontColorPicker.js
index 1fef5add4..5bd73df14 100644
--- a/src/main/resources/static/js/fontColorPicker.js
+++ b/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'
+ }
+}
diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js
index 34b95cffa..a72329d95 100644
--- a/src/main/resources/static/js/main.js
+++ b/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()
diff --git a/src/main/resources/templates/categories/newCategory.ftl b/src/main/resources/templates/categories/newCategory.ftl
index a44313c0d..056958084 100644
--- a/src/main/resources/templates/categories/newCategory.ftl
+++ b/src/main/resources/templates/categories/newCategory.ftl
@@ -87,8 +87,12 @@
<i class="material-icons prefix">palette</i>
<label class="input-label" for="fontColorPickerContainer">${locale.getString("account.new.label.icon.fontcolor")}</label>
- <div id="fontColorPickerContainer" class="valign-wrapper">
- <div id="fontColorPicker" style="background-color: ${category.getFontColor()}"></div>
+ <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>
--
GitLab