From 909ad19e20d9b5229d37dcc3037c468c29fc1aae Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Sat, 12 Feb 2022 18:01:41 +0100 Subject: [PATCH] #658 - re-designed global account in navbar --- .../accounts/AccountController.java | 9 +++++ .../resources/languages/base_de.properties | 3 +- .../resources/languages/base_en.properties | 3 +- src/main/resources/static/css/style.css | 28 +++++++++---- src/main/resources/static/js/about.js | 2 +- src/main/resources/static/js/main.js | 19 ++++----- .../templates/globalAccountSelectModal.ftl | 25 ++++++++++++ .../resources/templates/helpers/navbar.ftl | 40 ++++++++++++------- 8 files changed, 91 insertions(+), 38 deletions(-) create mode 100644 src/main/resources/templates/globalAccountSelectModal.ftl diff --git a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java index 976bd6f56..3021685d1 100644 --- a/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java +++ b/src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java @@ -46,6 +46,7 @@ public class AccountController extends BaseController public static final String DELETE_ENTITY = "accounts/deleteAccountModal"; public static final String IMPORT_STEP_2 = "redirect:/settings/database/import/step2"; public static final String SETTINGS = "redirect:/settings"; + public static final String GLOBAL_ACCOUNT_SELECT_MODAL = "globalAccountSelectModal"; } private final AccountService accountService; @@ -217,4 +218,12 @@ public class AccountController extends BaseController return true; } } + + @GetMapping("/globalAccountSelectModal") + public String globalAccountSelectModal(Model model) + { + model.addAttribute(ModelAttributes.ALL_ENTITIES, accountService.getAllReadableAccounts()); + + return ReturnValues.GLOBAL_ACCOUNT_SELECT_MODAL; + } } \ No newline at end of file diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties index 33e37c56a..764cf1d90 100644 --- a/src/main/resources/languages/base_de.properties +++ b/src/main/resources/languages/base_de.properties @@ -304,6 +304,8 @@ settings.database.delete.verification=Bestätigungscodes settings.search.itemsPerPage=Anzahl der Suchergebnisse pro Seite +account.select=Konto auswählen + account.new.label.name=Name account.new.label.icon=Icon account.new.label.icon.fontcolor=Schriftfarbe @@ -314,7 +316,6 @@ 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.state.full.access=Vollzugriff diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties index 00169876e..9a51aa6db 100644 --- a/src/main/resources/languages/base_en.properties +++ b/src/main/resources/languages/base_en.properties @@ -305,6 +305,8 @@ settings.database.delete.verification=Verification Code settings.search.itemsPerPage=Number of search results per page +account.select=Choose account + account.new.label.name=Name account.new.label.icon=Icon account.new.label.icon.fontcolor=Font color @@ -315,7 +317,6 @@ 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.state.full.access=Full access diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index ee21e1d18..3248950b1 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -317,20 +317,32 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa border: 2px solid var(--color-blue); } -.account-budget { - font-size: 20px !important; +#globalAccountSelect { + padding: 1rem 32px 1rem 32px; + display: flex; + flex-direction: row; + align-items: center; } -.account-budget-date { - font-size: 12px !important; +#globalAccountSelect:hover { + cursor: pointer; } -.account-navbar { - padding: 5px 32px 12px 32px; +#globalAccountSelect .account-select-icon { + height: 3.5rem; + width: 3.5rem; } -.all-account-placeholder { - font-weight: bold; +.global-account-select-right { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-left: 2rem; + font-size: 1.1rem; +} + +.global-account-select-budget { + font-size: 1.8rem; } .login-button { diff --git a/src/main/resources/static/js/about.js b/src/main/resources/static/js/about.js index 1e57ffcdf..860ea9e5d 100644 --- a/src/main/resources/static/js/about.js +++ b/src/main/resources/static/js/about.js @@ -2,6 +2,6 @@ $(document).ready(function() { $('.whatsNewLink').click(function() { - fetchAndShowWhatsNewModal(this, 'whatsNewModelContainerOnDemand'); + fetchAndShowModal(this, 'whatsNewModelContainerOnDemand', '#modalWhatsNew'); }); }); diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js index a72329d95..77a8c5bc1 100644 --- a/src/main/resources/static/js/main.js +++ b/src/main/resources/static/js/main.js @@ -5,6 +5,11 @@ $(document).ready(function() document.getElementById('logout-form').submit(); }); + $('#globalAccountSelect').click(function() + { + fetchAndShowModal(this, 'globalAccountSelectModalOnDemand', '#modalGlobalAccountSelect'); + }); + $('.sidenav').sidenav(); $('.modal').modal(); @@ -16,21 +21,13 @@ $(document).ready(function() if($("#whatsNewModelContainer").length) { - fetchAndShowWhatsNewModal(document.getElementById('whatsNewModelContainer'), 'whatsNewModelContainer'); + fetchAndShowModal(document.getElementById('whatsNewModelContainer'), 'whatsNewModelContainer', '#modalWhatsNew'); } $('.tooltipped').tooltip(); $('select').formSelect(); - $("#selectWrapper ul.dropdown-content.select-dropdown li span").each(function() - { - if($(this).text() === accountPlaceholderName) - { - $(this).addClass("all-account-placeholder"); - } - }); - if($("#login-password").length) { document.getElementById("login-password").focus(); @@ -63,10 +60,8 @@ $(document).ready(function() }); }); - -function fetchAndShowWhatsNewModal(item, containerID) +function fetchAndShowModal(item, containerID, modalID) { - let modalID = '#modalWhatsNew'; let modal = $(modalID).modal(); if(modal.isOpen) { diff --git a/src/main/resources/templates/globalAccountSelectModal.ftl b/src/main/resources/templates/globalAccountSelectModal.ftl new file mode 100644 index 000000000..b85ca68a9 --- /dev/null +++ b/src/main/resources/templates/globalAccountSelectModal.ftl @@ -0,0 +1,25 @@ +<#global locale = static["de.thecodelabs.utils.util.Localization"]> +<#import "/spring.ftl" as s> +<#import "helpers/header.ftl" as header> + +<div id="modalGlobalAccountSelect" class="modal modal-fixed-footer background-color"> + <div class="modal-content"> + <div class="row"> + <div class="col s12"> + <h3>${locale.getString("account.select")}</h3> + </div> + </div> + + <div class="row"> + <div class="col s12"> + <#list accounts as account> + ${account.getName()}<br> + </#list> + </div> + </div> + </div> + <div class="modal-footer background-color"> + <@header.buttonLink url='' icon='cancel' localizationKey='cancel' color='red' id='buttonCloseGlobalAccountSelect' classes='modal-action modal-close text-white' isDataUrl=false noUrl=true/> + </div> +</div> + diff --git a/src/main/resources/templates/helpers/navbar.ftl b/src/main/resources/templates/helpers/navbar.ftl index 8a70e5106..0e12863d6 100644 --- a/src/main/resources/templates/helpers/navbar.ftl +++ b/src/main/resources/templates/helpers/navbar.ftl @@ -55,6 +55,8 @@ <@backupReminder settings/> <@whatsNewModal settings/> + + <div id="globalAccountSelectModalOnDemand"></div> </#macro> <#macro itemLogo> @@ -86,22 +88,30 @@ </#macro> <#macro itemAccountSelect> - <div class="account-navbar"> - <#import 'customSelectMacros.ftl' as customSelectMacros/> - <@customSelectMacros.globalAccountSelect/> - - <div class="center-align"> - <a href="<@s.url '/accounts'/>">${locale.getString("home.menu.accounts.action.manage")}</a> - - <#assign accountBudget = helpers.getAccountBudget()/> - <#if accountBudget <= 0> - <div class="account-budget ${redTextColor}">${currencyService.getCurrencyString(accountBudget)}</div> - <#else> - <div class="account-budget ${greenTextColor}">${currencyService.getCurrencyString(accountBudget)}</div> - </#if> - <div class="account-budget-date text-default">(${locale.getString("account.budget.asof")}: ${dateService.getDateStringNormal(dateService.getCurrentDate())})</div> + <#import "customSelectMacros.ftl" as customSelectMacros> + + <a id="globalAccountSelect" class="center-align" data-url="<@s.url '/accounts/globalAccountSelectModal'/>"> + <#assign selectedAccount=helpers.getCurrentAccount()/> + <#if selectedAccount.getType().name() == "ALL"> + <#assign accountName=locale.getString("account.all")/> + <#else> + <#assign accountName=selectedAccount.getName()/> + </#if> + + <@customSelectMacros.accountIcon selectedAccount accountName "category-circle-preview"/> + <div class="global-account-select-right"> + <div>${accountName}</div> + + <div> + <#assign accountBudget = helpers.getAccountBudget()/> + <#if accountBudget <= 0> + <div class="global-account-select-budget ${redTextColor}">${currencyService.getCurrencyString(accountBudget)}</div> + <#else> + <div class="global-account-select-budget ${greenTextColor}">${currencyService.getCurrencyString(accountBudget)}</div> + </#if> + </div> </div> - </div> + </a> </#macro> <#macro itemPlain ID link text activeID> -- GitLab