From 6ea86a6192a7abdbb1fc9fb41a558221ae6d874b Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 21 Mar 2021 18:22:32 +0100
Subject: [PATCH] #590 - use select with icons
---
.../budgetmaster/accounts/AccountState.java | 34 +++++++++++--
.../resources/languages/base_de.properties | 7 ++-
.../resources/languages/base_en.properties | 7 ++-
src/main/resources/static/js/customSelect.js | 8 +++
.../templates/accounts/newAccount.ftl | 16 +++---
.../templates/helpers/customSelectMacros.ftl | 50 +++++++++++++++++++
6 files changed, 106 insertions(+), 16 deletions(-)
diff --git a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountState.java b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountState.java
index 217345583..993d680ea 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountState.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountState.java
@@ -2,7 +2,35 @@ package de.deadlocker8.budgetmaster.accounts;
public enum AccountState
{
- FULL_ACCESS,
- READ_ONLY,
- HIDDEN
+ FULL_ACCESS("fas fa-edit", "account.state.full.access"),
+ READ_ONLY("fas fa-lock", "account.state.read.only"),
+ HIDDEN("far fa-eye-slash", "account.state.hidden");
+
+ private final String icon;
+ private final String localizationKey;
+
+ AccountState(String icon, String localizationKey)
+ {
+ this.icon = icon;
+ this.localizationKey = localizationKey;
+ }
+
+ public String getIcon()
+ {
+ return icon;
+ }
+
+ public String getLocalizationKey()
+ {
+ return localizationKey;
+ }
+
+ @Override
+ public String toString()
+ {
+ return "AccountState{" +
+ "icon='" + icon + '\'' +
+ ", localizationKey='" + localizationKey + '\'' +
+ "} " + super.toString();
+ }
}
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index d7cfffcca..74e1720e0 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -271,12 +271,15 @@ account.new.label.icon=Icon
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
+account.new.label.state=Sichtbarkeit
account.default.name=Standardkonto
account.all=Alle Konten
account.budget.asof=Stand
account.tooltip.default=Als Standardkonto festlegen
-account.tooltip.readonly.activate=Konto aktivieren
-account.tooltip.readonly.deactivate=Konto deaktivieren
+
+account.state.full.access=Vollzugriff
+account.state.read.only=Lesezugriff
+account.state.hidden=Versteckt
transaction.new.label.name=Name
transaction.new.label.amount=Betrag
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 3079713e4..47f8b13f4 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -271,12 +271,15 @@ account.new.label.icon=Icon
account.new.icon.placeholder=Click here to select an icon
account.new.icon.upload.choose.file=Choose file
account.new.icon.upload=Upload
+account.new.label.state=Visibility
account.default.name=Default Account
account.all=All Accounts
account.budget.asof=as of
account.tooltip.default=Set as default account
-account.tooltip.readonly.activate=Enable account
-account.tooltip.readonly.deactivate=Disable account
+
+account.state.full.access=Vollzugriff
+account.state.read.only=Lesezugriff
+account.state.hidden=Versteckt
transaction.new.label.name=Name
transaction.new.label.amount=Amount
diff --git a/src/main/resources/static/js/customSelect.js b/src/main/resources/static/js/customSelect.js
index 35f9e8449..7421a6aa4 100644
--- a/src/main/resources/static/js/customSelect.js
+++ b/src/main/resources/static/js/customSelect.js
@@ -26,6 +26,14 @@ $(document).ready(function()
allCustomSelects.push(transferAccountSelect);
}
+ let selectorAccountStateSelect = '.account-state-select-wrapper';
+ if($(selectorAccountStateSelect).length)
+ {
+ let accountStateSelect = new CustomSelect(selectorAccountStateSelect);
+ accountStateSelect.init();
+ allCustomSelects.push(accountStateSelect);
+ }
+
let selectorGlobalAccountSelect = '.global-account-select-wrapper';
if($(selectorGlobalAccountSelect).length)
{
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index 77d5bed1c..e0da30a81 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -17,6 +17,7 @@
<@navbar.navbar "accounts" settings/>
<#import "accountFunctions.ftl" as accountFunctions>
+ <#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
<main>
<div class="card main-card background-color">
@@ -63,15 +64,12 @@
</div>
<#-- state -->
- <div class="row">
- <div class="input-field col s12 m12 l8 offset-l2" id="account-state">
- <select name="accountState">
- <#list availableAccountStates as state>
- <option value="${state}">${state}</option>
- </#list>
- </select>
- </div>
- </div>
+ <#if account.getAccountState()??>
+ <#assign selectedState=account.getAccountState()>
+ <#else>
+ <#assign selectedState=availableAccountStates[0]>
+ </#if>
+ <@customSelectMacros.customAccountStateSelect "account-state-select-wrapper" "accountState" availableAccountStates selectedState "col s12 m12 l8 offset-l2" locale.getString("account.new.label.state") "account-state"/>
<br>
diff --git a/src/main/resources/templates/helpers/customSelectMacros.ftl b/src/main/resources/templates/helpers/customSelectMacros.ftl
index d1a4cd67d..00229caef 100644
--- a/src/main/resources/templates/helpers/customSelectMacros.ftl
+++ b/src/main/resources/templates/helpers/customSelectMacros.ftl
@@ -101,6 +101,41 @@
</div>
</#macro>
+<#macro customAccountStateSelect selector inputName availableStates selectedState inputClasses labelText id >
+ <div class="row">
+ <div class="input-field ${inputClasses}">
+ <i class="material-icons prefix">visibility</i>
+ <label class="input-label" for="${id}">${labelText}</label>
+ <div class="custom-select-wrapper ${selector}" id="${id}">
+ <div class="custom-select">
+ <div class="custom-select-trigger" tabindex="0">
+ <div class="custom-select-selected-item">
+ <#if selectedState??><@customSelectOptionAccountStateContent selectedState "no-margin-left"/></#if>
+ </div>
+ <div class="custom-select-arrow"></div>
+ </div>
+ <div class="custom-select-options">
+ <#list availableStates as state>
+ <#if selectedState??>
+ <#if selectedState == state>
+ <@customSelectAccountStateOption state true/>
+ <#else>
+ <@customSelectAccountStateOption state false/>
+ </#if>
+ <#continue>
+ </#if>
+
+ <@customSelectAccountStateOption state false/>
+ </#list>
+ </div>
+ </div>
+
+ <input type="hidden" name="${inputName}" class="hidden-input-custom-select" <#if selectedState??>value="${selectedState.name()}"</#if>/>
+ </div>
+ </div>
+ </div>
+</#macro>
+
<#macro customSelectCategoryOption category isSelected>
<div class="custom-select-option <#if isSelected>selected</#if>" data-value="${category.getID()?c}">
<@customSelectOptionCategoryContent category/>
@@ -139,4 +174,19 @@
</span>
</#if>
</div>
+</#macro>
+
+<#macro customSelectAccountStateOption state isSelected>
+ <div class="custom-select-option <#if isSelected>selected</#if>" data-value="${state.name()}">
+ <@customSelectOptionAccountStateContent state=state/>
+ </div>
+</#macro>
+
+<#macro customSelectOptionAccountStateContent state classes="">
+ <div class="category-circle category-circle-small ${classes}" data-value="${state.name()}">
+ <span class="text-blue">
+ <i class="${state.getIcon()}"></i>
+ </span>
+ </div>
+ <span class="custom-select-item-name">${locale.getString(state.getLocalizationKey())}</span>
</#macro>
\ No newline at end of file
--
GitLab