From bceffbc874f12e1af47253571e861ba22fdb09f6 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sun, 9 Aug 2020 08:56:51 +0200
Subject: [PATCH] Better transaction overview.

---
 resources/views/v1/transactions/show.twig | 87 ++++++++++-------------
 1 file changed, 39 insertions(+), 48 deletions(-)

diff --git a/resources/views/v1/transactions/show.twig b/resources/views/v1/transactions/show.twig
index f42c73df69..cb00395bcc 100644
--- a/resources/views/v1/transactions/show.twig
+++ b/resources/views/v1/transactions/show.twig
@@ -10,6 +10,32 @@
             <div class="box box-primary">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'transaction_journal_information'|_ }}</h3>
+                    <div class="btn-group btn-group-xs pull-right">
+                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            {{ 'actions'|_}} <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a href="{{ route('transactions.edit', [transactionGroup.id]) }}"><i class="fa fa-pencil"></i> {{ 'edit'|_ }}</a></li>
+                            <li><a href="{{ route('transactions.delete', [transactionGroup.id]) }}"><i class="fa fa-trash"></i> {{ 'delete'|_ }}</a></li>
+                            <li role="separator" class="divider"></li>
+                            {% if groupArray.transactions[0].type != 'withdrawal' %}
+                                <li><a href="{{ route('transactions.convert.index', ['withdrawal', transactionGroup.id]) }}"><i class="fa fa-exchange"></i> {{ 'convert_to_withdrawal'|_ }}</a></li>
+                            {% endif %}
+
+                            {% if groupArray.transactions[0].type != 'deposit' %}
+                                <li><a href="{{ route('transactions.convert.index', ['deposit', transactionGroup.id]) }}"><i class="fa fa-exchange"></i> {{ 'convert_to_deposit'|_ }}</a></li>
+                            {% endif %}
+
+                            {% if groupArray.transactions[0].type != 'transfer' %}
+                                <li><a href="{{ route('transactions.convert.index', ['transfer', transactionGroup.id]) }}"><i class="fa fa-exchange"></i> {{ 'convert_to_transfer'|_ }}</a></li>
+                            {% endif %}
+                            {% if groupArray.transactions[0].type != 'opening balance' and groupArray.transactions[0].type != 'reconciliation' %}
+                                <!-- since 5.1.0 -->
+                                <li role="separator" class="divider"></li>
+                                <li><a href="{{ route('transactions.clone', [transactionGroup.id]) }}" id="clone_button"><i class="fa fa-copy"></i> {{ 'clone'|_ }}</a></li>
+                            {% endif %}
+                        </ul>
+                    </div>
                 </div>
                 <div class="box-body no-padding">
                     <table class="table table-hover">
@@ -37,38 +63,6 @@
                         </tbody>
                     </table>
                 </div>
-                <div class="box-footer">
-                    <div class="btn-group btn-group-xs">
-                        <a href="{{ route('transactions.edit', [transactionGroup.id]) }}" class="btn btn-default"><i class="fa fa-pencil"></i> {{ 'edit'|_ }}
-                        </a>
-                        <a href="{{ route('transactions.delete', [transactionGroup.id]) }}" class="btn btn-danger"><i class="fa fa-trash"></i> {{ 'delete'|_ }}
-                        </a>
-
-                        {% if groupArray.transactions[0].type != 'withdrawal' %}
-                            <a href="{{ route('transactions.convert.index', ['withdrawal', transactionGroup.id]) }}" class="btn btn-default"><i
-                                        class="fa fa-exchange"></i> {{ 'convert_to_withdrawal'|_ }}</a>
-                        {% endif %}
-
-                        {% if groupArray.transactions[0].type != 'deposit' %}
-                            <a href="{{ route('transactions.convert.index', ['deposit', transactionGroup.id]) }}" class="btn btn-default"><i
-                                        class="fa fa-exchange"></i> {{ 'convert_to_deposit'|_ }}</a>
-                        {% endif %}
-
-                        {% if groupArray.transactions[0].type != 'transfer' %}
-                            <a href="{{ route('transactions.convert.index', ['transfer', transactionGroup.id]) }}" class="btn btn-default"><i
-                                        class="fa fa-exchange"></i> {{ 'convert_to_transfer'|_ }}</a>
-                        {% endif %}
-
-
-                        {% if groupArray.transactions[0].type != 'opening balance' and groupArray.transactions[0].type != 'reconciliation' %}
-                            <!-- since 5.1.0 -->
-                            <a href="{{ route('transactions.clone', [transactionGroup.id]) }}" id="clone_button" class="btn btn-default"><i class="fa fa-copy"></i> {{ 'clone'|_ }}</a>
-                        {% endif %}
-                        {#
-                    <a href="{{ route('transactions.delete', [transactionGroup.id]) }}" class="btn btn-danger"><i class="fa fa-trash"></i> {{ 'delete'|_ }}</a>
-                    #}
-                    </div>
-                </div>
             </div>
         </div>
         <div class="col-lg-6">
@@ -181,6 +175,19 @@
                                 </small>
                             {% endif %}
                         </h3>
+
+
+                        <div class="btn-group btn-group-xs pull-right">
+                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                {{ 'actions'|_}} <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                <li><a href="#" class="link-modal" data-journal="{{ journal.transaction_journal_id }}"><i class="fa fa-fw fa-link"></i>{{ 'link_transaction'|_ }}</a></li>
+                                <li><a href="{{ route('rules.create-from-journal', [journal.transaction_journal_id]) }}"><i class="fa fa-fw fa-random"></i>{{ 'create_rule_from_transaction'|_ }}</a></li>
+                                <li><a href="{{ route('recurring.create-from-journal', [journal.transaction_journal_id]) }}"><i class="fa fa-fw fa-paint-brush"></i>{{ 'create_recurring_from_transaction'|_ }}</a></li>
+                            </ul>
+                        </div>
+
                     </div>
                     <div class="box-body no-padding">
                         <table class="table">
@@ -300,22 +307,6 @@
                             {% endif %}
                         </table>
                     </div>
-                    <div class="box-footer">
-                        <div class="btn-group btn-group-xs">
-                            <a href="#" class="btn btn-default link-modal" data-journal="{{ journal.transaction_journal_id }}">
-                                <i class="fa fa-fw fa-link"></i>
-                                {{ 'link_transaction'|_ }}
-                            </a>
-                            <a href="{{ route('rules.create-from-journal', [journal.transaction_journal_id]) }}" class="btn btn-default">
-                                <i class="fa fa-fw fa-random"></i>
-                                {{ 'create_rule_from_transaction'|_ }}
-                            </a>
-                            <a href="{{ route('recurring.create-from-journal', [journal.transaction_journal_id]) }}" class="btn btn-default">
-                                <i class="fa fa-fw fa-paint-brush"></i>
-                                {{ 'create_recurring_from_transaction'|_ }}
-                            </a>
-                        </div>
-                    </div>
                 </div>
 
                 <!-- Transaction links -->