From 5607f6f6c931d21a9ac2914f3cfbf84c2167205b Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 28 Mar 2021 16:20:08 +0200
Subject: [PATCH] #593 - refactor: generic ids and css classes for image select
---
src/main/resources/static/css/accounts.css | 30 +++++----
src/main/resources/static/css/style.css | 4 --
src/main/resources/static/js/imageSelect.js | 42 ++++++-------
.../templates/accounts/accountFunctions.ftl | 52 ----------------
.../templates/accounts/newAccount.ftl | 3 +-
.../templates/helpers/availableImages.ftl | 2 +-
.../templates/helpers/imageSelect.ftl | 62 +++++++++++++++++--
7 files changed, 97 insertions(+), 98 deletions(-)
delete mode 100644 src/main/resources/templates/accounts/accountFunctions.ftl
diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
index dd05d9e89..d9cd8ff25 100644
--- a/src/main/resources/static/css/accounts.css
+++ b/src/main/resources/static/css/accounts.css
@@ -3,47 +3,51 @@
justify-content: center;
}
-#account-icon-preview {
+#item-icon-preview {
text-align: center;
border: 2px solid var(--color-text);
padding: 1rem;
color: var(--color-text);
}
-#button-remove-account-icon {
+.button-remove-icon-from-item {
margin-left: 1rem;
}
-#button-remove-account-icon i {
+.button-remove-icon-from-item i {
font-size: 1.8rem;
}
-.account-icon-option-column {
+.item-icon-option-column {
text-align: center;
margin-bottom: 1.5rem;
}
-.account-icon-option {
+.item-icon-option {
padding: 0.5rem;
border: 2px solid transparent;
}
-.account-icon-option:hover {
+.item-icon-option:hover {
cursor: pointer;
}
-.account-icon-option.selected {
+.item-icon-option.selected {
border: 2px solid var(--color-text);
}
-.account-icon-preview-icon {
+.item-icon-preview-icon {
height: 5rem;
}
-#account-icon-preview:hover {
+#item-icon-preview:hover {
cursor: pointer;
}
+.item-icon-preview {
+ height: 5rem;
+}
+
.account-select-icon {
height: 34px;
width: 34px;
@@ -54,18 +58,18 @@
line-height: 28px !important;
}
-.account-icon-option-delete span {
+.item-icon-option-delete span {
display: none;
}
-.account-icon-option-delete i.left {
+.item-icon-option-delete i.left {
margin-right: 0;
}
-.account-icon-option-delete-confirm {
+.item-icon-option-delete-confirm {
color: var(--color-red) !important;
}
-.account-icon-option-delete-confirm span {
+.item-icon-option-delete-confirm span {
display: inline-block;
}
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 5a0116ed6..ad5768c8c 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -437,10 +437,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
height: 2.6rem;
}
-.account-icon-preview {
- height: 5rem;
-}
-
.tooltipped:hover {
cursor: pointer;
}
diff --git a/src/main/resources/static/js/imageSelect.js b/src/main/resources/static/js/imageSelect.js
index 148a7a148..4e3827679 100644
--- a/src/main/resources/static/js/imageSelect.js
+++ b/src/main/resources/static/js/imageSelect.js
@@ -1,15 +1,15 @@
$(document).ready(function()
{
- $('#button-remove-account-icon').click(function()
+ $('.button-remove-icon-from-item').click(function()
{
- document.getElementById("account-icon-preview-icon").classList.toggle('hidden', true);
- document.getElementById("account-icon-placeholder").classList.toggle('hidden', false);
- document.getElementById("hidden-input-account-icon").value = '';
+ document.getElementById("item-icon-preview-icon").classList.toggle('hidden', true);
+ document.getElementById("item-icon-placeholder").classList.toggle('hidden', false);
+ document.getElementById("hidden-input-icon").value = '';
});
- $('#button-account-icon-confirm').click(function()
+ $('#button-icon-confirm').click(function()
{
- let icon = document.querySelector('.account-icon-option.selected .account-icon-preview');
+ let icon = document.querySelector('.item-icon-option.selected .item-icon-preview');
if(icon === null)
{
return false;
@@ -18,18 +18,18 @@ $(document).ready(function()
let iconPath = icon.src;
let iconId = icon.dataset.imageId;
- let previewIcon = document.getElementById("account-icon-preview-icon");
+ let previewIcon = document.getElementById("item-icon-preview-icon");
previewIcon.src = iconPath;
- document.getElementById("account-icon-preview-icon").classList.toggle('hidden', false);
- document.getElementById("account-icon-placeholder").classList.toggle('hidden', true);
- document.getElementById("hidden-input-account-icon").value = iconId;
+ document.getElementById("item-icon-preview-icon").classList.toggle('hidden', false);
+ document.getElementById("item-icon-placeholder").classList.toggle('hidden', true);
+ document.getElementById("hidden-input-icon").value = iconId;
});
- if($('#modalAccountIconSelect').length)
+ if($('#modalIconSelect').length)
{
- let modalAccountIconSelect = document.getElementById('modalAccountIconSelect');
- M.Modal.init(modalAccountIconSelect, {
+ let modalIconSelect = document.getElementById('modalIconSelect');
+ M.Modal.init(modalIconSelect, {
onCloseEnd: function f()
{
document.getElementById('account-name').focus();
@@ -37,11 +37,11 @@ $(document).ready(function()
});
}
- $('#account-icon-preview').click(function()
+ $('#item-icon-preview').click(function()
{
getAvailableImages(function()
{
- let modalID = '#modalAccountIconSelect';
+ let modalID = '#modalIconSelect';
$(modalID).modal();
$(modalID).modal('open');
});
@@ -57,20 +57,20 @@ function getAvailableImages(callback)
{
$.ajax({
type: 'GET',
- url: $('#account-icon-preview').attr('data-url'),
+ url: $('#item-icon-preview').attr('data-url'),
data: {},
success: function(data)
{
$('#available-images').html(data);
// select an icon option
- $('.account-icon-option').click(function()
+ $('.item-icon-option').click(function()
{
selectIcon(this);
});
- let classDeleteConfirm = 'account-icon-option-delete-confirm';
- $('.account-icon-option-delete').click(function()
+ let classDeleteConfirm = 'item-icon-option-delete-confirm';
+ $('.item-icon-option-delete').click(function()
{
if(this.classList.contains(classDeleteConfirm))
{
@@ -89,7 +89,7 @@ function getAvailableImages(callback)
function selectIcon(item)
{
- let allIconOptions = document.querySelectorAll('.account-icon-option');
+ let allIconOptions = document.querySelectorAll('.item-icon-option');
for(let i = 0; i < allIconOptions.length; i++)
{
allIconOptions[i].classList.remove('selected');
@@ -100,7 +100,7 @@ function selectIcon(item)
function uploadImage()
{
- let formID = 'form-upload-account-image';
+ let formID = 'form-upload-image';
let form = document.getElementById(formID);
$.ajax({
diff --git a/src/main/resources/templates/accounts/accountFunctions.ftl b/src/main/resources/templates/accounts/accountFunctions.ftl
deleted file mode 100644
index 22d7aa0ea..000000000
--- a/src/main/resources/templates/accounts/accountFunctions.ftl
+++ /dev/null
@@ -1,52 +0,0 @@
-<#import "/spring.ftl" as s>
-<#import "../helpers/header.ftl" as header>
-
-<#macro modalAccountIconSelect>
- <div id="modalAccountIconSelect" class="modal modal-fixed-footer background-color">
- <div class="modal-content center-align">
- <div class="row">
- <div class="col s12">
- <div class="headline">Upload image</div>
- </div>
- </div>
-
- <div class="row">
- <@uploadImageForm/>
- </div>
-
- <hr>
-
- <div class="row">
- <div class="col s12">
- <div class="headline">Available images</div>
- </div>
- </div>
-
- <div class="row" id="available-images">
- </div>
- </div>
- <div class="modal-footer background-color">
- <@header.buttonLink url='' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
- <@header.buttonLink url='' icon='done' id='button-account-icon-confirm' localizationKey='ok' color='green' classes='modal-action modal-close text-white' noUrl=true/>
- </div>
- </div>
-</#macro>
-
-<#macro uploadImageForm>
- <form id="form-upload-account-image" method="post" action="<@s.url '/media/uploadImage'/>" enctype="multipart/form-data">
- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
- <div class="file-field input-field col s12">
- <div class="container">
- <div class="btn background-blue">
- <i class="material-icons left">folder</i>
- ${locale.getString("account.new.icon.upload.choose.file")}
- <input id="inputUploadFile" type="file" accept="${helpers.getValidImageUploadTypes()}" name="file">
- </div>
- <div class="file-path-wrapper">
- <input class="file-path validate" type="text">
- </div>
- <@header.buttonLink url='' icon='upload' localizationKey='account.new.icon.upload' id='button-upload-new-image' classes='right' noUrl=true/>
- </div>
- </div>
- </form>
-</#macro>
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index 67e8f1acd..dfc06f125 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -16,7 +16,6 @@
<#import "../helpers/navbar.ftl" as navbar>
<@navbar.navbar "accounts" settings/>
- <#import "accountFunctions.ftl" as accountFunctions>
<#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
<#import "../helpers/imageSelect.ftl" as imageSelectMacros>
@@ -87,7 +86,7 @@
</div>
</main>
- <@accountFunctions.modalAccountIconSelect/>
+ <@imageSelectMacros.modalIconSelect/>
<!-- Scripts-->
<#import "../helpers/scripts.ftl" as scripts>
diff --git a/src/main/resources/templates/helpers/availableImages.ftl b/src/main/resources/templates/helpers/availableImages.ftl
index 1e454c641..6eba2e39a 100644
--- a/src/main/resources/templates/helpers/availableImages.ftl
+++ b/src/main/resources/templates/helpers/availableImages.ftl
@@ -4,7 +4,7 @@
<@header.globals/>
<#list availableImages as image>
- <@imageOption image 'account-icon'/>
+ <@imageOption image 'item-icon'/>
</#list>
<#macro imageOption image classPrefix>
diff --git a/src/main/resources/templates/helpers/imageSelect.ftl b/src/main/resources/templates/helpers/imageSelect.ftl
index e168ada54..7d7e4a5b2 100644
--- a/src/main/resources/templates/helpers/imageSelect.ftl
+++ b/src/main/resources/templates/helpers/imageSelect.ftl
@@ -1,4 +1,5 @@
<#import "/spring.ftl" as s>
+<#import "../helpers/header.ftl" as header>
<#macro imageSelect id item>
<div class="row">
@@ -7,14 +8,65 @@
<label class="input-label" for="${id}">${locale.getString("account.new.label.icon")}</label>
<div id="${id}" class="valign-wrapper">
- <a id="${id}-preview" data-url="<@s.url '/media/getAvailableImages'/>">
- <img id="${id}-preview-icon" src="<#if item.getIcon()??>${item.getIcon().getBase64EncodedImage()}</#if>" class="${id}-preview <#if item.getIcon()?? == false>hidden</#if>"/>
- <div id="${id}-placeholder" class="<#if item.getIcon()??>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
+ <a id="item-icon-preview" data-url="<@s.url '/media/getAvailableImages'/>">
+ <img id="item-icon-preview-icon" src="<#if item.getIcon()??>${item.getIcon().getBase64EncodedImage()}</#if>" class="item-icon-preview <#if item.getIcon()?? == false>hidden</#if>"/>
+ <div id="item-icon-placeholder" class="<#if item.getIcon()??>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
</a>
- <@header.buttonFlat url='' icon='delete' id='button-remove-${id}' localizationKey='' classes="no-padding text-default" noUrl=true/>
+ <@header.buttonFlat url='' icon='delete' id='' localizationKey='' classes="no-padding text-default button-remove-icon-from-item" noUrl=true/>
- <input id="hidden-input-${id}" type="hidden" name="icon" value="<#if item.getIcon()??>${item.getIcon().getID()?c}</#if>">
+ <input id="hidden-input-icon" type="hidden" name="icon" value="<#if item.getIcon()??>${item.getIcon().getID()?c}</#if>">
</div>
</div>
</div>
+</#macro>
+
+
+<#macro modalIconSelect>
+ <div id="modalIconSelect" class="modal modal-fixed-footer background-color">
+ <div class="modal-content center-align">
+ <div class="row">
+ <div class="col s12">
+ <div class="headline">Upload image</div>
+ </div>
+ </div>
+
+ <div class="row">
+ <@uploadImageForm/>
+ </div>
+
+ <hr>
+
+ <div class="row">
+ <div class="col s12">
+ <div class="headline">Available images</div>
+ </div>
+ </div>
+
+ <div class="row" id="available-images">
+ </div>
+ </div>
+ <div class="modal-footer background-color">
+ <@header.buttonLink url='' icon='clear' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
+ <@header.buttonLink url='' icon='done' id='button-icon-confirm' localizationKey='ok' color='green' classes='modal-action modal-close text-white' noUrl=true/>
+ </div>
+ </div>
+</#macro>
+
+<#macro uploadImageForm>
+ <form id="form-upload-image" method="post" action="<@s.url '/media/uploadImage'/>" enctype="multipart/form-data">
+ <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+ <div class="file-field input-field col s12">
+ <div class="container">
+ <div class="btn background-blue">
+ <i class="material-icons left">folder</i>
+ ${locale.getString("account.new.icon.upload.choose.file")}
+ <input id="inputUploadFile" type="file" accept="${helpers.getValidImageUploadTypes()}" name="file">
+ </div>
+ <div class="file-path-wrapper">
+ <input class="file-path validate" type="text">
+ </div>
+ <@header.buttonLink url='' icon='upload' localizationKey='account.new.icon.upload' id='button-upload-new-image' classes='right' noUrl=true/>
+ </div>
+ </div>
+ </form>
</#macro>
\ No newline at end of file
--
GitLab