#722 - added new dropdown button for editing repeating transactions

BudgetMasterServer/src/main/resources/static/css/colors.css

@@ -29,6 +29,7 @@
 
     --color-background: var(--color-white);
     --color-background-light: #FAFAFA;
+    --color-background-light-transparent: rgba(250, 250, 250, 0.5);
 }
 
 [data-theme="dark"] {
@@ -46,6 +47,7 @@
 
     --color-background: #444444;
     --color-background-light: #666666;
+    --color-background-light-transparent: rgba(102, 102, 102, 0.5);
 }
 
 /* background colors*/

BudgetMasterServer/src/main/resources/static/css/transactions.css

@@ -47,7 +47,7 @@
 }
 
 .transaction-row-transparent {
-    opacity: 0.5;
+    background-color: var(--color-background-light-transparent) !important;
 }
 
 .transaction-row-highlighted {
@@ -109,6 +109,41 @@
     border-radius: 0;
 }
 
+.edit-transaction-button {
+    position: relative;
+    display: inline-block;
+    left: 0;
+    top: 0;
+    padding: 0 !important;
+}
+
+.edit-transaction-button-link {
+    height: 36px;
+    width: auto;
+    border-radius: 0;
+    line-height: 36px;
+    padding: 0 16px;
+    font-size: 1.3rem;
+}
+
+.edit-transaction-button-link i {
+    line-height: 36px;
+    font-size: 1.3rem;
+}
+
+.edit-transaction-button-link:hover {
+    background-color: transparent;
+}
+
+.edit-transaction-button ul {
+    right: 30px !important;
+    top: -16px !important;
+}
+
+.edit-transaction-button li {
+    display: block !important;
+}
+
 .mobile-fab-tip {
     position: absolute;
     padding: 0 0.5rem;
@@ -120,6 +155,10 @@
     width: auto;
 }
 
+.edit-transaction-button .mobile-fab-tip {
+    position: relative;
+}
+
 #transaction-actions-button .mobile-fab-tip {
     margin-right: 4rem;
     right: 0;

BudgetMasterServer/src/main/resources/static/js/transactions.js

@@ -249,6 +249,11 @@ $(document).ready(function()
         hoverEnabled: false
     });
 
+    M.FloatingActionButton.init(document.querySelectorAll('.edit-transaction-button'), {
+        direction: 'left',
+        hoverEnabled: false
+    });
+
     // scroll to highlighted transaction
     let highlightedSmall = document.getElementById("highlighted-small");
     let highlightedLarge = document.getElementById("highlighted-large");

BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl

@@ -51,7 +51,7 @@
 <#macro transactionButtons transaction classes>
         <div class="col ${classes} transaction-buttons no-wrap">
             <#if transaction.isEditable()>
-                <@header.buttonFlat url='/transactions/' + transaction.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default button-edit"/>
+                <@transactionEditButton transaction/>
                 <@header.buttonFlat url='/transactions/' + transaction.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-transaction" isDataUrl=true/>
             </#if>
             <#if transaction.isAllowedToFillNewTransaction()>
@@ -60,6 +60,28 @@
         </div>
 </#macro>
 
+<#macro transactionEditButton transaction>
+    <#if transaction.isRepeating()>
+        <div class="fixed-action-btn edit-transaction-button">
+            <a class="btn-floating btn-flat waves-effect waves-light no-padding text-default edit-transaction-button-link">
+                <i class="material-icons">edit</i>
+            </a>
+            <ul class="new-transaction-button-list">
+                <li>
+                    <a href="<@s.url '/transactions/' + transaction.ID?c + '/edit'/>" class="btn-floating btn mobile-fab-tip no-wrap">${locale.getString("title.transaction.edit", locale.getString("title.transaction.new.normal"))}</a>
+                    <a href="<@s.url '/transactions/' + transaction.ID?c + '/edit'/>" class="btn-floating btn background-green-dark"><i class="material-icons">edit</i></a>
+                </li>
+                <li>
+                    <a href="<@s.url '/transactions/' + transaction.ID?c + '/editFutureRepetitions'/>" class="btn-floating btn mobile-fab-tip no-wrap">${locale.getString("repeating.button.edit.future")}</a>
+                    <a href="<@s.url '/transactions/' + transaction.ID?c + '/editFutureRepetitions'/>" class="btn-floating btn background-orange"><i class="material-icons">move_up</i></a>
+                </li>
+            </ul>
+        </div>
+    <#else>
+        <@header.buttonFlat url='/transactions/' + transaction.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default button-edit"/>
+    </#if>
+</#macro>
+
 <#macro transactionAccountIcon transaction>
     <#if helpers.getCurrentAccount().getType().name() == "ALL" && transaction.getAccount()??>
         <#import "../helpers/customSelectMacros.ftl" as customSelectMacros>