From bede28c920353f836fd40ecca4a24daa444789cf Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Mon, 14 Jun 2021 22:25:40 +0200
Subject: [PATCH] #622 - renamed classes + moved to imageSelect.css
---
.../resources/languages/base_de.properties | 2 +-
.../resources/languages/base_en.properties | 2 +-
src/main/resources/static/css/categories.css | 50 -------------------
src/main/resources/static/css/imageSelect.css | 24 +++++++--
src/main/resources/static/js/imageSelect.js | 20 ++++----
.../templates/helpers/imageSelect.ftl | 18 +++----
6 files changed, 41 insertions(+), 75 deletions(-)
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 8f98ba346..7a0b70265 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 4c7f5f0a7..c19901b61 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 a67f029e2..f143bd54b 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 8d3d947f0..11e6a09c6 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 3efbf81ba..20c870b0c 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 3c5dfe665..627d5113b 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>
--
GitLab