diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties index 8f98ba346594043f1ebeab8c47ec83f9855e894a..7a0b702653f813d07dc9fe40fd134da24a576d5c 100644 --- a/src/main/resources/languages/base_de.properties +++ b/src/main/resources/languages/base_de.properties @@ -154,6 +154,7 @@ upload.image.headline=Bild hochladen available.images=Verfügbare Bilder icons.images=Eigene Bilder icons.builtin=Mitgelieferte Icons +icons.numberOf=Icons notification.transaction.add.warning=Konto mit Sichtbarkeit "{0}" erlaubt keine neuen Buchungen! @@ -207,7 +208,6 @@ category.new.label.name=Name category.new.label.icon=Icon category.new.icon.remove=Entfernen category.new.icon.placeholder=Hier klicken um ein Icon auszuwählen -category.new.icons=Icons categories.usages=Verweise categories.actions=Aktionen diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties index 4c7f5f0a7bd726246426864e0a77dfbdf7c55cc1..c19901b6109228dfb5729fcaccff08711a5747eb 100644 --- a/src/main/resources/languages/base_en.properties +++ b/src/main/resources/languages/base_en.properties @@ -155,6 +155,7 @@ upload.image.headline=Upload image available.images=Available Images icons.images=Custom Images icons.builtin=Built-in Icons +icons.numberOf=Icons notification.transaction.add.warning=Account with visibility "{0}" does not allow new transactions! @@ -208,7 +209,6 @@ category.new.label.name=Name category.new.label.icon=Icon category.new.icon.remove=Remove category.new.icon.placeholder=Click here to select an icon -category.new.icons=Icons categories.usages=Usages categories.actions=Actions diff --git a/src/main/resources/static/css/categories.css b/src/main/resources/static/css/categories.css index a67f029e2561c89473ff0d4aa60edbf1744319fd..f143bd54bee7b68424b9b4384ab1369c04f7aedd 100644 --- a/src/main/resources/static/css/categories.css +++ b/src/main/resources/static/css/categories.css @@ -67,56 +67,6 @@ overflow-y: visible !important; } -#category-icon { - margin-top: 3rem; - justify-content: center; -} - -#category-icon-preview { - text-align: center; - border: 2px solid var(--color-text); - padding: 1rem; - color: var(--color-text); -} - -#category-icon-preview i { - font-size: 3rem; -} - -#button-remove-category-icon { - margin-left: 1rem; -} - -#button-remove-category-icon i { - font-size: 1.8rem; -} - -.category-icon-option-column { - text-align: center; - margin-bottom: 1.5rem; -} - -.category-icon-option { - padding: 0.5rem; - border: 2px solid transparent; -} - -.category-icon-option:hover { - cursor: pointer; -} - -.category-icon-option.selected { - border: 2px solid var(--color-text); -} - -.category-icon-option-icon { - font-size: 2rem; -} - -#numberOfIcons { - font-size: 1.1rem; -} - /*style spectrum color picker*/ /*hide spectrum color picker arrow*/ diff --git a/src/main/resources/static/css/imageSelect.css b/src/main/resources/static/css/imageSelect.css index 8d3d947f05d5b2863bf9b7cacd323fc0b07f8e35..11e6a09c6cbdfa55384bbbafa6545fd6e3b5b950 100644 --- a/src/main/resources/static/css/imageSelect.css +++ b/src/main/resources/static/css/imageSelect.css @@ -10,6 +10,10 @@ color: var(--color-text); } +#item-icon-preview i { + font-size: 3rem; +} + .button-remove-icon-from-item { margin-left: 1rem; } @@ -18,24 +22,36 @@ font-size: 1.8rem; } -.item-icon-option-column { +.item-icon-option-column, +.builtin-icon-option-column { text-align: center; margin-bottom: 1.5rem; } -.item-icon-option { +.item-icon-option, +.builtin-icon-option { padding: 0.5rem; border: 2px solid transparent; } -.item-icon-option:hover { +.item-icon-option:hover, +.builtin-icon-option:hover { cursor: pointer; } -.item-icon-option.selected { +.item-icon-option.selected, +.builtin-icon-option.selected { border: 2px solid var(--color-text); } +.builtin-icon-option-icon { + font-size: 2rem; +} + +#numberOfIcons { + font-size: 1.1rem; +} + .item-icon-preview-icon { height: 5rem; } diff --git a/src/main/resources/static/js/imageSelect.js b/src/main/resources/static/js/imageSelect.js index 3efbf81ba1779cdc931fb1f45ea089cb50ee34b6..20c870b0c0408b60bbda5eb2e7d101e20f01df2b 100644 --- a/src/main/resources/static/js/imageSelect.js +++ b/src/main/resources/static/js/imageSelect.js @@ -5,7 +5,7 @@ $(document).ready(function() document.getElementById("item-icon-preview-icon").classList.toggle('hidden', true); document.getElementById("item-icon-placeholder").classList.toggle('hidden', false); document.getElementById("hidden-input-icon-image-id").value = null; - document.getElementById("category-icon-preview-icon").classList.toggle('hidden', true); + document.getElementById("builtin-icon-preview-icon").classList.toggle('hidden', true); document.getElementById("hidden-input-icon-builtin-identifier").value = null; }); @@ -63,9 +63,9 @@ $(document).ready(function() } // select a built-in icon option - $('.category-icon-option').click(function() + $('.builtin-icon-option').click(function() { - selectIcon(this, '.category-icon-option'); + selectIcon(this, '.builtin-icon-option'); }); }); @@ -197,7 +197,7 @@ function confirmImageIcon() previewIcon.src = iconPath; document.getElementById("item-icon-preview-icon").classList.toggle('hidden', false); - document.getElementById("category-icon-preview-icon").classList.toggle('hidden', true); + document.getElementById("builtin-icon-preview-icon").classList.toggle('hidden', true); document.getElementById("item-icon-placeholder").classList.toggle('hidden', true); document.getElementById("hidden-input-icon-image-id").value = iconId; document.getElementById("hidden-input-icon-builtin-identifier").value = null; @@ -205,7 +205,7 @@ function confirmImageIcon() function confirmBuiltinIcon() { - let icon = document.querySelector('.category-icon-option.selected .category-icon-option-name'); + let icon = document.querySelector('.builtin-icon-option.selected .builtin-icon-option-name'); if(icon === null) { return false; @@ -213,7 +213,7 @@ function confirmBuiltinIcon() let iconIdentifier = icon.textContent; - let previewIcon = document.getElementById("category-icon-preview-icon"); + let previewIcon = document.getElementById("builtin-icon-preview-icon"); previewIcon.className = ''; // clear class list iconIdentifier.split(' ').forEach(function(cssClass) @@ -222,21 +222,21 @@ function confirmBuiltinIcon() }); document.getElementById("item-icon-preview-icon").classList.toggle('hidden', true); - document.getElementById("category-icon-preview-icon").classList.toggle('hidden', false); + document.getElementById("builtin-icon-preview-icon").classList.toggle('hidden', false); document.getElementById("item-icon-placeholder").classList.toggle('hidden', true); document.getElementById("hidden-input-icon-image-id").value = null; document.getElementById("hidden-input-icon-builtin-identifier").value = iconIdentifier; } -function searchCategoryIcons() +function searchBuiltinIcons() { let searchWord = document.getElementById('searchIcons').value.toLowerCase(); - let allIcons = document.querySelectorAll('.category-icon-option-column'); + let allIcons = document.querySelectorAll('.builtin-icon-option-column'); let numberOfMatchingIcons = 0; for(let i = 0; i < allIcons.length; i++) { - let iconName = allIcons[i].querySelector('.category-icon-option-name').textContent; + let iconName = allIcons[i].querySelector('.builtin-icon-option-name').textContent; if(iconName.toLowerCase().includes(searchWord)) { allIcons[i].classList.toggle('hidden', false); diff --git a/src/main/resources/templates/helpers/imageSelect.ftl b/src/main/resources/templates/helpers/imageSelect.ftl index 3c5dfe6653a81df7d7736cfd0bdf309aace5cb37..627d5113bca5cdb5f1193b201cb647d9aa93da38 100644 --- a/src/main/resources/templates/helpers/imageSelect.ftl +++ b/src/main/resources/templates/helpers/imageSelect.ftl @@ -9,7 +9,7 @@ <div id="${id}" class="valign-wrapper item-icon"> <a id="item-icon-preview" data-url="<@s.url '/media/getAvailableImages'/>"> - <i id="category-icon-preview-icon" class="<#if item.getIconReference()?? && item.getIconReference().getBuiltinIdentifier()??>${item.getIconReference().getBuiltinIdentifier()}<#else>hidden</#if>"></i> + <i id="builtin-icon-preview-icon" class="<#if item.getIconReference()?? && item.getIconReference().getBuiltinIdentifier()??>${item.getIconReference().getBuiltinIdentifier()}<#else>hidden</#if>"></i> <img id="item-icon-preview-icon" src="<#if item.getIconReference()?? && item.getIconReference().getImage()??>${item.getIconReference().getImage().getBase64EncodedImage()}</#if>" class="item-icon-preview <#if item.getIconReference()?? == false || item.getIconReference().getImage()?? == false>hidden</#if>"/> <div id="item-icon-placeholder" class="<#if item.getIconReference()?? && (item.getIconReference().getImage()?? || item.getIconReference().getBuiltinIdentifier()??)>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div> </a> @@ -71,28 +71,28 @@ <div class="row no-margin-bottom"> <div class="input-field col s12 m12 l8 offset-l2"> <i class="material-icons prefix">search</i> - <input id="searchIcons" type="text" onchange="searchCategoryIcons();" onkeypress="searchCategoryIcons();" onpaste="searchCategoryIcons()" oninput="searchCategoryIcons();"> + <input id="searchIcons" type="text" onchange="searchBuiltinIcons();" onkeypress="searchBuiltinIcons();" onpaste="searchBuiltinIcons()" oninput="searchBuiltinIcons();"> <label for="searchIcons">${locale.getString("search")}</label> </div> </div> <div class="row"> - <div class="col s12 center-align" id="numberOfIcons"><span id="numberOfMatchingIcons">${fontawesomeIcons?size?c}</span>/${fontawesomeIcons?size?c} ${locale.getString("category.new.icons")}</div> + <div class="col s12 center-align" id="numberOfIcons"><span id="numberOfMatchingIcons">${fontawesomeIcons?size?c}</span>/${fontawesomeIcons?size?c} ${locale.getString("icons.numberOf")}</div> </div> <hr> <div class="row"> <#list fontawesomeIcons as icon> - <@categoryIconOption icon/> + <@builtinIconOption icon/> </#list> </div> </#macro> -<#macro categoryIconOption icon> - <div class="col s4 m2 l2 category-icon-option-column"> - <div class="category-icon-option"> - <i class="category-icon-option-icon ${icon}"></i> - <div class="category-icon-option-name truncate">${icon}</div> +<#macro builtinIconOption icon> + <div class="col s4 m2 l2 builtin-icon-option-column"> + <div class="builtin-icon-option"> + <i class="builtin-icon-option-icon ${icon}"></i> + <div class="builtin-icon-option-name truncate">${icon}</div> </div> </div> </#macro>