diff --git a/BudgetMasterServer/src/main/resources/static/css/colors.css b/BudgetMasterServer/src/main/resources/static/css/colors.css index 2139910072d39202cb275bdc31e398104939a3c8..465b7cc4cec0027ca6a67a8c131b814b305971c4 100644 --- a/BudgetMasterServer/src/main/resources/static/css/colors.css +++ b/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*/ diff --git a/BudgetMasterServer/src/main/resources/static/css/transactions.css b/BudgetMasterServer/src/main/resources/static/css/transactions.css index c72fe1b4aa10874d078e57d338c35e39a6775f54..87e22526fb8f2dab0b039104b54a9786fbe56392 100644 --- a/BudgetMasterServer/src/main/resources/static/css/transactions.css +++ b/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; diff --git a/BudgetMasterServer/src/main/resources/static/js/transactions.js b/BudgetMasterServer/src/main/resources/static/js/transactions.js index 498265c0b45eb3f7f5f27fe9c244377a898e659d..f6af763864205a1f35baeb7dab9ccfcfd228d02f 100644 --- a/BudgetMasterServer/src/main/resources/static/js/transactions.js +++ b/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"); diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl index 36de129f534c6ae25e24c0c5b40349112f69a886..57dfd6b4e9807c09a9526b2bdfb45ec7378d88cc 100644 --- a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl +++ b/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>