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