From 765129b6d33257a54168736162a0de415031f6be Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 13 Mar 2021 16:58:16 +0100
Subject: [PATCH] #419 - preview icon on account edit page + added button to
remove icon from account
---
.../resources/languages/base_de.properties | 1 +
.../resources/languages/base_en.properties | 1 +
src/main/resources/static/css/accounts.css | 19 +++++++++++++++++++
src/main/resources/static/css/style.css | 4 ++++
src/main/resources/static/js/accounts.js | 7 +++++++
.../templates/accounts/newAccount.ftl | 13 +++++++++++--
6 files changed, 43 insertions(+), 2 deletions(-)
create mode 100644 src/main/resources/static/css/accounts.css
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 26c727eac..140ca2593 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -261,6 +261,7 @@ settings.search.itemsPerPage=Anzahl der Suchergebnisse pro Seite
account.new.label.name=Name
account.new.label.icon=Icon
+account.new.icon.placeholder=Hier klicken um ein Icon auszuwählen
account.default.name=Standardkonto
account.all=Alle Konten
account.budget.asof=Stand
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 626faad57..9bff555fd 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -261,6 +261,7 @@ settings.search.itemsPerPage=Number of search results per page
account.new.label.name=Name
account.new.label.icon=Icon
+account.new.icon.placeholder=Click here to select an icon
account.default.name=Default Account
account.all=All Accounts
account.budget.asof=as of
diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
new file mode 100644
index 000000000..c41f0263e
--- /dev/null
+++ b/src/main/resources/static/css/accounts.css
@@ -0,0 +1,19 @@
+#account-icon {
+ margin-top: 3rem;
+ justify-content: center;
+}
+
+#account-icon-preview {
+ text-align: center;
+ border: 2px solid var(--color-text);
+ padding: 1rem;
+ color: var(--color-text);
+}
+
+#button-remove-account-icon {
+ margin-left: 1rem;
+}
+
+#button-remove-account-icon i {
+ font-size: 1.8rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ad5768c8c..5a0116ed6 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -437,6 +437,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
height: 2.6rem;
}
+.account-icon-preview {
+ height: 5rem;
+}
+
.tooltipped:hover {
cursor: pointer;
}
diff --git a/src/main/resources/static/js/accounts.js b/src/main/resources/static/js/accounts.js
index b3ca4b9a0..ff2a9eb8d 100644
--- a/src/main/resources/static/js/accounts.js
+++ b/src/main/resources/static/js/accounts.js
@@ -14,4 +14,11 @@ $(document).ready(function()
{
document.getElementById('account-name').focus();
}
+
+ $('#button-remove-account-icon').click(function()
+ {
+ document.querySelector(".account-icon-preview").classList.toggle('hidden', true);
+ document.getElementById("account-icon-placeholder").classList.toggle('hidden', false);
+ document.getElementById("hidden-input-account-icon").value = '';
+ });
});
\ 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 5d3a24137..f8f7c7df4 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -10,6 +10,7 @@
</#if>
<@header.header "BudgetMaster - ${title}"/>
+ <@header.style "accounts"/>
<#import "/spring.ftl" as s>
</head>
<@header.body>
@@ -47,8 +48,16 @@
<div class="row">
<div class="input-field col s12 m12 l8 offset-l2">
<i class="fas fa-icons prefix"></i>
- <input id="account-icon" type="text" name="iconPath" <@validation.validation "iconPath"/> value="<#if account.getIconPath()??>${account.getIconPath()}</#if>">
- <label for="account-icon">${locale.getString("account.new.label.icon")}</label>
+ <label class="input-label" for="account-icon">${locale.getString("account.new.label.icon")}</label>
+
+ <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>"/>
+ <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/>
+ <input id="hidden-input-account-icon" type="hidden" name="iconPath" value="<#if account.getIconPath()??>${account.getIconPath()}</#if>">
+ </div>
</div>
</div>
--
GitLab