From 20be33703da319563e41e5d265ab607e8d7584c9 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 14 Mar 2021 11:56:06 +0100
Subject: [PATCH] #419 - select image in account settings
---
.../accounts/AccountController.java | 4 +++
src/main/resources/static/css/accounts.css | 24 +++++++++++++-
src/main/resources/static/js/accounts.js | 33 ++++++++++++++++++-
.../templates/accounts/accountFunctions.ftl | 25 ++++++++++++++
.../templates/accounts/newAccount.ftl | 6 +++-
5 files changed, 89 insertions(+), 3 deletions(-)
create mode 100644 src/main/resources/templates/accounts/accountFunctions.ftl
diff --git a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
index 44bc1b692..5651fd483 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java
@@ -17,6 +17,7 @@ import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.request.WebRequest;
import javax.servlet.http.HttpServletRequest;
+import java.util.List;
import java.util.Optional;
@@ -128,6 +129,7 @@ public class AccountController extends BaseController
Account emptyAccount = new Account();
model.addAttribute("account", emptyAccount);
model.addAttribute("settings", settingsService.getSettings());
+ model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
return "accounts/newAccount";
}
@@ -142,6 +144,7 @@ public class AccountController extends BaseController
model.addAttribute("account", accountOptional.get());
model.addAttribute("settings", settingsService.getSettings());
+ model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
return "accounts/newAccount";
}
@@ -165,6 +168,7 @@ public class AccountController extends BaseController
model.addAttribute("error", bindingResult);
model.addAttribute("account", account);
model.addAttribute("settings", settingsService.getSettings());
+ model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
return "accounts/newAccount";
}
else
diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
index c41f0263e..6d352cc32 100644
--- a/src/main/resources/static/css/accounts.css
+++ b/src/main/resources/static/css/accounts.css
@@ -16,4 +16,26 @@
#button-remove-account-icon i {
font-size: 1.8rem;
-}
\ No newline at end of file
+}
+
+.account-icon-option-column {
+ text-align: center;
+ margin-bottom: 1.5rem;
+}
+
+.account-icon-option {
+ padding: 0.5rem;
+ border: 2px solid transparent;
+}
+
+.account-icon-option:hover {
+ cursor: pointer;
+}
+
+.account-icon-option.selected {
+ border: 2px solid var(--color-text);
+}
+
+.account-icon-preview-icon {
+ height: 5rem;
+}
diff --git a/src/main/resources/static/js/accounts.js b/src/main/resources/static/js/accounts.js
index ff2a9eb8d..276507a79 100644
--- a/src/main/resources/static/js/accounts.js
+++ b/src/main/resources/static/js/accounts.js
@@ -17,8 +17,39 @@ $(document).ready(function()
$('#button-remove-account-icon').click(function()
{
- document.querySelector(".account-icon-preview").classList.toggle('hidden', true);
+ document.getElementById("account-icon-preview-icon").classList.toggle('hidden', true);
document.getElementById("account-icon-placeholder").classList.toggle('hidden', false);
document.getElementById("hidden-input-account-icon").value = '';
});
+
+ $('#button-account-icon-confirm').click(function()
+ {
+ let icon = document.querySelector('.account-icon-option.selected .account-icon-preview');
+ if(icon === null)
+ {
+ return false;
+ }
+
+ let iconPath = icon.src;
+ let iconId = icon.dataset.imageId;
+
+ let previewIcon = document.getElementById("account-icon-preview-icon");
+ previewIcon.src = iconPath;
+
+ document.getElementById("account-icon-preview-icon").classList.toggle('hidden', false);
+ document.getElementById("account-icon-placeholder").classList.toggle('hidden', true);
+ document.getElementById("hidden-input-account-icon").value = iconId;
+ });
+
+ // select an icon option
+ $('.account-icon-option').click(function()
+ {
+ let allIconOptions = document.querySelectorAll('.account-icon-option');
+ for(let i = 0; i < allIconOptions.length; i++)
+ {
+ allIconOptions[i].classList.remove('selected');
+ }
+
+ this.classList.add('selected');
+ });
});
\ No newline at end of file
diff --git a/src/main/resources/templates/accounts/accountFunctions.ftl b/src/main/resources/templates/accounts/accountFunctions.ftl
new file mode 100644
index 000000000..407c3b353
--- /dev/null
+++ b/src/main/resources/templates/accounts/accountFunctions.ftl
@@ -0,0 +1,25 @@
+<#import "../helpers/header.ftl" as header>
+
+<#macro modalAccountIconSelect>
+ <div id="modalAccountIconSelect" class="modal modal-fixed-footer background-color">
+ <div class="modal-content">
+ <div class="row">
+ <#list iconImages as image>
+ <@accountIconOption image/>
+ </#list>
+ </div>
+ </div>
+ <div class="modal-footer background-color">
+ <@header.buttonLink url='' icon='save' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
+ <@header.buttonLink url='' icon='done' id='button-account-icon-confirm' localizationKey='ok' color='green' classes='modal-action modal-close text-white' noUrl=true/>
+ </div>
+ </div>
+</#macro>
+
+<#macro accountIconOption icon>
+ <div class="col s4 m2 l2 account-icon-option-column">
+ <div class="account-icon-option">
+ <img src="${icon}" class="account-icon-preview" alt="${icon}" data-image-id="1"/>
+ </div>
+ </div>
+</#macro>
\ No newline at end of file
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index f8f7c7df4..d27d2205d 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -17,6 +17,8 @@
<#import "../helpers/navbar.ftl" as navbar>
<@navbar.navbar "accounts" settings/>
+ <#import "accountFunctions.ftl" as accountFunctions>
+
<main>
<div class="card main-card background-color">
<div class="container">
@@ -52,7 +54,7 @@
<div id="account-icon" class="valign-wrapper">
<a href="#modalAccountIconSelect" id="account-icon-preview" class="modal-trigger">
- <img src="<#if account.getIconPath()?has_content>${account.getIconPath()}</#if>" class="account-icon-preview <#if account.getIconPath()?has_content == false>hidden</#if>"/>
+ <img id="account-icon-preview-icon" src="<#if account.getIconPath()?has_content>${account.getIconPath()}</#if>" class="account-icon-preview <#if account.getIconPath()?has_content == false>hidden</#if>"/>
<div id="account-icon-placeholder" class="<#if account.getIconPath()?has_content>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
</a>
<@header.buttonFlat url='' icon='delete' id='button-remove-account-icon' localizationKey='' classes="no-padding text-default" noUrl=true/>
@@ -61,6 +63,8 @@
</div>
</div>
+ <@accountFunctions.modalAccountIconSelect/>
+
<br>
<#-- buttons -->
--
GitLab