#681 - show hotkey number ins account select

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

@@ -353,9 +353,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
 .global-account-select-option {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     background-color: var(--color-background);
     border: 3px solid transparent;
+    padding: 0;
 }
 
 .global-account-select-option:hover {
@@ -367,6 +368,23 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     margin-left: 2rem;
 }
 
+.global-account-select-option-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 24px;
+    width: 95%;
+}
+
+.global-account-select-option-key,
+.global-account-select-option-key-hidden {
+    margin: 0 !important;
+}
+
+.global-account-select-option-key-hidden {
+    background-color: transparent !important;
+}
+
 .login-button {
     text-transform: none;
 }

BudgetMasterServer/src/main/resources/templates/globalAccountSelectModal.ftl

@@ -29,9 +29,16 @@
                 <div class="col s12 m6 xl6">
                     <a href="<@s.url '/accounts/${account.getID()?c}/select'/>" class="text-default">
                         <div class="card-panel global-account-select-option">
+                            <#if account?index < 10>
+                                <div class="keyboard-key bold global-account-select-option-key">${account?index}</div>
+                            <#else>
+                                <div class="keyboard-key bold global-account-select-option-key-hidden">&nbsp;</div>
+                            </#if>
+                            <div class="global-account-select-option-content">
                                 <@customSelectMacros.accountIcon account accountName "category-circle-preview account-icon-big"/>
                                 <div class="global-account-select-option-name truncate">${accountName}</div>
                             </div>
+                        </div>
                     </a>
                 </div>
             </#list>

BudgetMasterServer/src/main/resources/templates/helpers/header.ftl

@@ -30,6 +30,7 @@
     <@style "categories"/>
     <@style "accounts"/>
     <@style "customSelect"/>
+    <@style "hotkeys"/>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 

BudgetMasterServer/src/main/resources/templates/hotkeys.ftl

@@ -3,7 +3,6 @@
         <#import "helpers/header.ftl" as header>
         <@header.globals/>
         <@header.header "BudgetMaster - ${locale.getString('menu.hotkeys')}"/>
-        <@header.style "hotkeys"/>
     </head>
     <@header.body>
         <#import "helpers/navbar.ftl" as navbar>