diff --git a/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java b/src/main/java/de/deadlocker8/budgetmaster/categories/CategoryController.java
index 12353e9aa9d0224e0194e0e145678fc1096ef4c1..719310530ae77864d9932d03e36c6fbe26a859c1 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 8020fe5d9132f3eb4fc3ec7ea2dec3017206d586..323327823f3f1b0098e90943b0c660165384fd87 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 39412c9559732953b4364bc85baf0d1d325538fb..3c8f8e48e4dc9f4e86ddde3eb4d81f9e9b60fd79 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 294be0bab788d25f943ac4c9521c3798a314d35d..b2c6f147434c5f6024c1cc342cffb93803587d85 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 0000000000000000000000000000000000000000..0dca0c266c7487b9e9c3025018ebad0e21d5a77f
--- /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 dc0bdedb4a67c0f9186ed7553971dfebf0a27f6c..5d40e07fce5e9f51a7d96293b3660ceb42448456 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