From f4b968c274e3bd5c14c57ab4e0e5ea144be5b78e Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Thu, 13 Jan 2022 21:11:57 +0100
Subject: [PATCH] #652 - added font color picker for categories
---
.../categories/CategoryController.java | 6 ++--
.../resources/languages/base_de.properties | 1 +
.../resources/languages/base_en.properties | 1 +
src/main/resources/static/css/style.css | 6 ++++
.../resources/static/js/fontColorPicker.js | 31 +++++++++++++++++++
.../templates/categories/newCategory.ftl | 17 +++++++++-
6 files changed, 58 insertions(+), 4 deletions(-)
create mode 100644 src/main/resources/static/js/fontColorPicker.js
diff --git a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
index 12353e9aa..719310530 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
@@ -115,7 +115,8 @@ public class CategoryController extends BaseController
public String post(WebRequest request,
Model model, @ModelAttribute("NewCategory") Category category, BindingResult bindingResult,
@RequestParam(value = "iconImageID", required = false) Integer iconImageID,
- @RequestParam(value = "builtinIconIdentifier", required = false) String builtinIconIdentifier)
+ @RequestParam(value = "builtinIconIdentifier", required = false) String builtinIconIdentifier,
+ @RequestParam(value = "fontColor", required = false) String fontColor)
{
CategoryValidator userValidator = new CategoryValidator();
userValidator.validate(category, bindingResult);
@@ -133,8 +134,7 @@ public class CategoryController extends BaseController
category.setType(CategoryType.CUSTOM);
}
- // TODO: pass actual font color
- category.updateIcon(iconService, iconImageID, builtinIconIdentifier, null, categoryService);
+ category.updateIcon(iconService, iconImageID, builtinIconIdentifier, fontColor, categoryService);
categoryService.save(category);
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 8020fe5d9..323327823 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -292,6 +292,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.placeholder=Hier klicken 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 39412c955..3c8f8e48e 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -293,6 +293,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.placeholder=Click here 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 294be0bab..b2c6f1474 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -498,6 +498,12 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
line-height: 25px;
}
+
+#fontColorPickerContainer {
+ margin-top: 3rem;
+ justify-content: center;
+}
+
.invisible {
opacity: 0;
}
diff --git a/src/main/resources/static/js/fontColorPicker.js b/src/main/resources/static/js/fontColorPicker.js
new file mode 100644
index 000000000..0dca0c266
--- /dev/null
+++ b/src/main/resources/static/js/fontColorPicker.js
@@ -0,0 +1,31 @@
+$(document).ready(function()
+{
+ if($("#fontColorPicker").length)
+ {
+ let fontColorPickerParent = document.getElementById('fontColorPicker');
+
+ let fontColorPicker = new Picker({
+ parent: fontColorPickerParent,
+ popup: false,
+ alpha: false,
+ editor: true,
+ editorFormat: 'hex',
+ cancelButton: false,
+ color: fontColorPickerParent.style.backgroundColor,
+ onChange: function(color) {
+ updateFontColor(fontColorPickerParent, color);
+ },
+ onClose: function(color) {
+ updateFontColor(fontColorPickerParent, color);
+ }
+ });
+
+ fontColorPicker.setColor(fontColorPickerParent.style.backgroundColor, true);
+ }
+});
+
+function updateFontColor(parent, color)
+{
+ parent.style.backgroundColor = color.hex;
+ document.getElementById("fontColor").value = color.hex;
+}
diff --git a/src/main/resources/templates/categories/newCategory.ftl b/src/main/resources/templates/categories/newCategory.ftl
index dc0bdedb4..5d40e07fc 100644
--- a/src/main/resources/templates/categories/newCategory.ftl
+++ b/src/main/resources/templates/categories/newCategory.ftl
@@ -68,7 +68,7 @@
</div>
</#if>
</#list>
- <#-- add custom color picker-->
+ <#-- add custom color picker -->
<div class="col s2 m1 no-padding">
<div id="customColorPickerContainer" class="category-color <#if customColor == category.getColor()>category-color-active</#if>" style="background-color: ${customColor}">
<span>+</span>
@@ -79,6 +79,20 @@
<#-- icon -->
<@iconSelectMacros.iconSelect id="account-icon" item=category/>
+ <#-- font color -->
+ <input type="hidden" name="fontColor" id="fontColor" value="${category.getFontColor()}">
+
+ <div class="row">
+ <div class="input-field col s12 m12 l8 offset-l2">
+ <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>
+ </div>
+ </div>
+
<br>
<#-- buttons -->
@@ -117,5 +131,6 @@
<script src="<@s.url '/js/libs/vanilla-picker.min.js'/>"></script>
<script src="<@s.url '/js/categories.js'/>"></script>
<script src="<@s.url '/js/iconSelect.js'/>"></script>
+ <script src="<@s.url '/js/fontColorPicker.js'/>"></script>
</@header.body>
</html>
\ No newline at end of file
--
GitLab