diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css index 474981327774b78f05499dad9f48e6943a1bdcd0..9f77cca54a435e1a0b0d75f35c980afeeed99d3b 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 ae72de47d8a063cb38bd448efce0e2757098fd72..316c012329566d27b495a024859a34cda71c4fa0 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 5d1470ff0bf1cc0831adb074673afc9a662cd738..75994b4433542828a6807a8ade3aa7dfd6097a87 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 547181d0d8f42e58332b8c6ae30efd9a3a19b91c..6068c77b7431058182d57cc207c3c2cae27fe563 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>