From d76d2535001b5047ba9f799dd4280de167b63c82 Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Sun, 18 Nov 2018 12:04:59 +0100 Subject: [PATCH] Fixed #342 - is payment toggle is barely recognizable --- src/main/resources/static/css/dark/style.css | 10 +++++-- src/main/resources/static/css/style.css | 10 +++++-- src/main/resources/static/js/transactions.js | 28 +++++++++++++++++++ .../templates/transactions/newTransaction.ftl | 28 +++++++++++++------ 4 files changed, 61 insertions(+), 15 deletions(-) diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css index 474981327..9f77cca54 100644 --- a/src/main/resources/static/css/dark/style.css +++ b/src/main/resources/static/css/dark/style.css @@ -40,7 +40,7 @@ main { } .budgetmaster-green { - background-color: #5cb85c; + background-color: #5cb85c !important; } .budgetmaster-green-text { @@ -56,7 +56,7 @@ main { } .budgetmaster-red { - background-color: #D82C29; + background-color: #D82C29 !important; } .budgetmaster-red-text { @@ -72,7 +72,7 @@ main { } .budgetmaster-grey { - background-color: #CCCCCC; + background-color: #CCCCCC !important; } .budgetmaster-grey-text { @@ -99,6 +99,10 @@ main { color: rgba(0, 0, 0, 0.87); } +.budgetmaster-text-isPayment { + color: rgba(0, 0, 0, 0.87); +} + .budgetmaster-update { background-color: #e9c46a; } diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index ae72de47d..316c01232 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -39,7 +39,7 @@ main { } .budgetmaster-green { - background-color: #5cb85c; + background-color: #5cb85c !important; } .budgetmaster-green-text { @@ -55,7 +55,7 @@ main { } .budgetmaster-red { - background-color: #D82C29; + background-color: #D82C29 !important; } .budgetmaster-red-text { @@ -71,7 +71,7 @@ main { } .budgetmaster-grey { - background-color: #696969; + background-color: #696969 !important; } .budgetmaster-grey-text { @@ -98,6 +98,10 @@ main { color: rgba(0,0,0,0.87); } +.budgetmaster-text-isPayment { + color: #FFFFFF; +} + .budgetmaster-update { background-color: #F7EB84; } diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js index 5d1470ff0..75994b443 100644 --- a/src/main/resources/static/js/transactions.js +++ b/src/main/resources/static/js/transactions.js @@ -155,6 +155,34 @@ $( document ).ready(function() { } }); + $('#buttonIncome').click(function() + { + $(this).removeClass("budgetmaster-grey"); + $(this).removeClass("budgetmaster-text-isPayment"); + $(this).addClass("budgetmaster-green"); + + var buttonExpenditure = $('#buttonExpenditure'); + buttonExpenditure.removeClass("budgetmaster-red"); + buttonExpenditure.addClass("budgetmaster-grey"); + buttonExpenditure.addClass("budgetmaster-text-isPayment"); + + document.getElementById("input-isPayment").value = 0; + }); + + $('#buttonExpenditure').click(function() + { + $(this).removeClass("budgetmaster-grey"); + $(this).removeClass("budgetmaster-text-isPayment"); + $(this).addClass("budgetmaster-red"); + + var buttonIncome = $('#buttonIncome'); + buttonIncome.removeClass("budgetmaster-green"); + buttonIncome.addClass("budgetmaster-grey"); + buttonIncome.addClass("budgetmaster-text-isPayment"); + + document.getElementById("input-isPayment").value = 1; + }); + beautifyCategorySelect(); }); diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl index 547181d0d..6068c77b7 100644 --- a/src/main/resources/templates/transactions/newTransaction.ftl +++ b/src/main/resources/templates/transactions/newTransaction.ftl @@ -29,17 +29,27 @@ <#-- isPayment switch --> <div class="row"> <div class="col s12 m12 l8 offset-l2 center-align"> - <div class="switch"> - <label> - ${locale.getString("title.income")} - <#if transaction.getAmount()??> - <input type="checkbox" name="isPayment" <#if transaction.getAmount() < 0>checked</#if>> + <div class="row hide-on-small-only"> + <div class="col m6 l4 offset-l2 right-align"> + <#assign isPayment = 1> + + <#if transaction.getAmount()?? && (transaction.getAmount() > 0)> + <#assign colorButtonIncome = "budgetmaster-green"> + <#assign isPayment = 0> <#else> - <input type="checkbox" name="isPayment" checked> + <#assign colorButtonIncome = "budgetmaster-grey budgetmaster-text-isPayment"> </#if> - <span class="lever"></span> - ${locale.getString("title.expenditure")} - </label> + <a class="waves-effect waves-light btn ${colorButtonIncome}" id="buttonIncome"><i class="material-icons left">file_download</i>${locale.getString("title.income")}</a> + </div> + <div class="col m6 l4 left-align"> + <#if transaction.getAmount()?? && (transaction.getAmount() > 0)> + <#assign colorButtonExpenditure = "budgetmaster-grey budgetmaster-text-isPayment"> + <#else> + <#assign colorButtonExpenditure = "budgetmaster-red"> + </#if> + <a class="waves-effect waves-light btn ${colorButtonExpenditure}" id="buttonExpenditure"><i class="material-icons left">file_upload</i>${locale.getString("title.expenditure")}</a> + </div> + <input type="hidden" name="isPayment" id="input-isPayment" value="${isPayment}"> </div> </div> </div> -- GitLab