From f16b2257c61323812c650b286032e8bae85e7d6e Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Sun, 22 Apr 2018 08:08:09 +0200
Subject: [PATCH] Custom input for amount.

---
 public/css/firefly.css                       |  25 +++
 resources/views/transactions/split/edit.twig | 152 ++++++++++---------
 2 files changed, 102 insertions(+), 75 deletions(-)

diff --git a/public/css/firefly.css b/public/css/firefly.css
index 4a9b209600..25487e0ffe 100644
--- a/public/css/firefly.css
+++ b/public/css/firefly.css
@@ -18,6 +18,31 @@
  * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
  */
 
+.split_amount_input {
+    width: 40%;
+    border-radius: 0;
+    height: 36px;
+    padding: 6px 12px;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccd0d2;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+
+}
+
+.split_amount_input:focus {
+    border-color: #98cbe8;
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(152, 203, 232, .6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(152, 203, 232, .6);
+}
+
 #daterange {
     cursor: pointer;
 }
diff --git a/resources/views/transactions/split/edit.twig b/resources/views/transactions/split/edit.twig
index 1cb3cbc0cb..dc5dbb9e60 100644
--- a/resources/views/transactions/split/edit.twig
+++ b/resources/views/transactions/split/edit.twig
@@ -184,7 +184,7 @@
                     <div class="box-body">
                         <div class="container-fluid split_row_holder">
                             <div class="row bg-gray-light" style="padding-bottom:3px;">
-                                <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6">&nbsp;</div>
+                                {# HEADER #}
                                 <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6"><strong>{{ trans('list.split_number') }}</strong></div>
                                 <div class="col-lg-3 col-md-5 col-sm-12 col-xs-12"><strong>{{ trans('list.description') }}</strong></div>
                                 {# withdrawal and deposit have a destination. #}
@@ -195,28 +195,25 @@
                                 {% if preFilled.what == 'deposit' %}
                                     <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12"><strong>{{ trans('list.source') }}</strong></div>
                                 {% endif %}
-                                <div class="col-lg-1 col-md-5 col-sm-12 col-xs-12"><strong>{{ trans('list.amount') }}</strong></div>
-                                <div class="col-lg-1 col-md-7 col-sm-12 col-xs-12">
-                                    &nbsp;
-                                </div>
+                                <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12"><strong>{{ trans('list.amount') }}</strong></div>
                                 {# only withdrawal has budget #}
                                 {% if preFilled.what == 'withdrawal' %}
-                                    <div class="col-lg-1 col-md-6 col-sm-12 col-xs-12"><strong>{{ trans('list.budget') }}</strong></div>
+                                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"><strong>{{ trans('list.budget') }}</strong></div>
                                 {% endif %}
                                 <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"><strong>{{ trans('list.category') }}</strong></div>
                             </div>
 
+                            {# ROWS #}
+
+
                             {% for index, transaction in preFilled.transactions %}
                             <div class="row {% if loop.index0 % 2 == 1 %}bg-gray-light{% endif %} split_row" data-split="{{ loop.index0 }}">
                                 {# button #}
                                 <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6">
                                     <a href="#" class="btn btn-xs btn-danger remove-current-split" data-split="{{ loop.index0 }}">
-                                        <i class="fa fa-trash" data-split="{{ loop.index0 }}"></i></a>
+                                        <i class="fa fa-trash" data-split="{{ loop.index0 }}"></i> #{{ loop.index }}</a>
                                 </div>
 
-                                {# index #}
-                                <div class="col-lg-1 col-md-1 col-sm-6 col-xs-6 count">#{{ loop.index }}</div>
-
                                 {# description #}
                                 <div class="col-lg-3 col-md-5 col-sm-12 col-xs-12">
                                     <input autocomplete="off" type="text" name="transactions[{{ loop.index0 }}][transaction_description]"
@@ -228,7 +225,8 @@
                                 {% if preFilled.what == 'withdrawal' %}
                                     <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12">
                                         <input autocomplete="off" type="text" name="transactions[{{ loop.index0 }}][destination_name]"
-                                               value="{% if transaction.destination_type != 'Cash account' %}{{ transaction.destination_name }}{% endif %}" class="form-control"/>
+                                               value="{% if transaction.destination_type != 'Cash account' %}{{ transaction.destination_name }}{% endif %}"
+                                               class="form-control"/>
                                     </div>
                                 {% endif %}
 
@@ -241,81 +239,85 @@
                                 {% endif %}
 
                                 {# amount#}
+                                <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12">
+                                    {{ transaction.currency_symbol }}&nbsp;<input class="split_amount_input" type="number" name="transactions[{{ loop.index0 }}][amount]" value="{{ transaction.amount }}"
+                                                autocomplete="off" step="any">
+                                    {% if transaction.foreign_amount != null %}
+                                            {{ transaction.foreign_currency_symbol }}&nbsp;<input class="split_amount_input" type="number" name="transactions[{{ loop.index0 }}][foreign_amount]"
+                                                       value="{{ transaction.foreign_amount }}" autocomplete="off" step="any">
+                                            <input type="hidden" name="transactions[{{ loop.index0 }}][foreign_currency_id]" value="{{ transaction.foreign_currency_id }}">
+                                    {% endif %}
+                                    <input type="hidden" name="transactions[{{ loop.index0 }}][transaction_currency_id]"
+                                           value="{{ transaction.transaction_currency_id }}">
+                            </div>
+                            {#
+                            {% if transaction.foreign_amount != null %}
+                                    <div class="col-lg-1 col-md-5 col-sm-12 col-xs-12" style="border:1px red solid;">
+                            {% else %}
+                                    <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12" style="border:1px blue solid;">
+                            {% endif %}
+
+
                                 {% if transaction.foreign_amount != null %}
-                                <div class="col-lg-1 col-md-5 col-sm-12 col-xs-12">
-                                    {% else %}
-                                    <div class="col-lg-2 col-md-5 col-sm-12 col-xs-12">
-                                        {% endif %}
+                                    <div class="col-lg-1 col-md-7 col-sm-12 col-xs-12" style="border:1px green solid;">
                                         <div class="input-group">
-                                            <div class="input-group-addon">{{ transaction.currency_symbol }}</div>
-                                            <input type="number" name="transactions[{{ loop.index0 }}][amount]" value="{{ transaction.amount }}"
+                                            <div class="input-group-addon">{{ transaction.foreign_currency_symbol }}</div>
+                                            <input type="number" name="transactions[{{ loop.index0 }}][foreign_amount]"
+                                                   value="{{ transaction.foreign_amount }}"
                                                    class="form-control" autocomplete="off" step="any">
                                         </div>
-                                        <input type="hidden" name="transactions[{{ loop.index0 }}][transaction_currency_id]"
-                                               value="{{ transaction.transaction_currency_id }}">
-                                    </div>
-
-                                    {# foreign amount #}
-                                    {% if transaction.foreign_amount != null %}
-                                        <div class="col-lg-1 col-md-7 col-sm-12 col-xs-12">
-                                            <div class="input-group">
-                                                <div class="input-group-addon">{{ transaction.foreign_currency_symbol }}</div>
-                                                <input type="number" name="transactions[{{ loop.index0 }}][foreign_amount]"
-                                                       value="{{ transaction.foreign_amount }}"
-                                                       class="form-control" autocomplete="off" step="any">
-                                            </div>
-                                            <input type="hidden"
-                                                   name="transactions[{{ loop.index0 }}][foreign_currency_id]"
-                                                   value="{{ transaction.foreign_currency_id }}">
-
-                                        </div>
-                                    {% endif %}
-
-                                    {# budget #}
-                                    {% if preFilled.what == 'withdrawal' %}
-                                        <div class="col-lg-1 col-md-6 col-sm-12 col-xs-12">
-                                            <select class="form-control" name="transactions[{{ loop.index0 }}][budget_id]">
-                                                {% for key, budget in budgets %}
-                                                    <option label="{{ budget }}" value="{{ key }}"
-                                                            {% if transaction.budget_id == key %} selected="selected"{% endif %}>{{ budget }}</option>
-                                                {% endfor %}
-                                            </select>
-                                        </div>
-                                    {% endif %}
-
-                                    {# category #}
-                                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
-                                        <input autocomplete="off" type="text" name="transactions[{{ loop.index0 }}][category_name]"
-                                               value="{{ transaction.category_name}}"
-                                               class="form-control"/>
+                                        <input type="hidden"
+                                               name="transactions[{{ loop.index0 }}][foreign_currency_id]"
+                                               value="{{ transaction.foreign_currency_id }}">
+
                                     </div>
+                                {% endif %}
+                            #}
+                            {# budget #}
+                            {% if preFilled.what == 'withdrawal' %}
+                                <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
+                                    <select class="form-control" name="transactions[{{ loop.index0 }}][budget_id]">
+                                        {% for key, budget in budgets %}
+                                            <option label="{{ budget }}" value="{{ key }}"
+                                                    {% if transaction.budget_id == key %} selected="selected"{% endif %}>{{ budget }}</option>
+                                        {% endfor %}
+                                    </select>
                                 </div>
-                                {% endfor %}
+                            {% endif %}
+
+                            {# category #}
+                            <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
+                                <input autocomplete="off" type="text" name="transactions[{{ loop.index0 }}][category_name]"
+                                       value="{{ transaction.category_name }}"
+                                       class="form-control"/>
                             </div>
-                            <p>
-                                <br/>
-                                <a href="#" class="btn btn-default btn-do-split"><i class="fa fa-plus-circle"></i> {{ 'add_another_split'|_ }}</a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                    {# panel for options #}
-                    <div class="box">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">{{ 'options'|_ }}</h3>
-                        </div>
-                        <div class="box-body">
-                            {{ ExpandedForm.optionsList('update','split-transaction') }}
-                        </div>
-                        <div class="box-footer">
-                            <button type="submit" class="pull-right btn btn-success">{{ ('update_' ~ preFilled.what)|_ }}</button>
                         </div>
+                        {% endfor %}
+                    </div>
+                    <p>
+                        <br/>
+                        <a href="#" class="btn btn-default btn-do-split"><i class="fa fa-plus-circle"></i> {{ 'add_another_split'|_ }}</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                {# panel for options #}
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'options'|_ }}</h3>
+                    </div>
+                    <div class="box-body">
+                        {{ ExpandedForm.optionsList('update','split-transaction') }}
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="pull-right btn btn-success">{{ ('update_' ~ preFilled.what)|_ }}</button>
                     </div>
                 </div>
             </div>
+        </div>
     </form>
 
 {% endblock %}