Skip to content
Snippets Groups Projects
Commit a1c7d868 authored by Robert Goldmann's avatar Robert Goldmann
Browse files

#652 - icon preview: show category circle in preview

parent 5454f56a
No related branches found
No related tags found
No related merge requests found
...@@ -40,6 +40,19 @@ ...@@ -40,6 +40,19 @@
margin: 14px 16px; margin: 14px 16px;
} }
.category-circle-preview {
display: flex;
justify-content: center;
align-items: center;
width: 5rem;
height: 5rem;
text-align: center;
font-weight: bold;
border-radius: 50%;
line-height: 5rem !important;
font-size: 2.5rem !important;
}
.category-circle-small .fa, .category-circle-small .fa,
.category-circle-small .fab, .category-circle-small .fab,
.category-circle-small .fad, .category-circle-small .fad,
......
...@@ -23,14 +23,9 @@ ...@@ -23,14 +23,9 @@
width: 7rem; width: 7rem;
text-align: center; text-align: center;
border: 2px solid var(--color-text); border: 2px solid var(--color-text);
padding: 1rem;
color: var(--color-text); color: var(--color-text);
} }
#item-icon-preview i {
font-size: 4rem;
}
.button-remove-icon-from-item { .button-remove-icon-from-item {
margin-left: 1rem; margin-left: 1rem;
} }
......
...@@ -10,6 +10,7 @@ $(document).ready(function() ...@@ -10,6 +10,7 @@ $(document).ready(function()
removeActive(); removeActive();
addClass($(this)[0], "category-color-active"); addClass($(this)[0], "category-color-active");
document.getElementById("categoryColor").value = rgb2hex($(this)[0].style.backgroundColor); document.getElementById("categoryColor").value = rgb2hex($(this)[0].style.backgroundColor);
document.getElementById("item-icon-preview-background").style.backgroundColor = $(this)[0].style.backgroundColor;
}); });
if($("#customColorPickerContainer").length) if($("#customColorPickerContainer").length)
......
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</div> </div>
<#-- icon --> <#-- icon -->
<@iconSelectMacros.iconSelect id="account-icon" item=category/> <@iconSelectMacros.iconSelect id="category-icon" item=category/>
<#-- font color --> <#-- font color -->
<input type="hidden" name="fontColor" id="fontColor" value="${category.getFontColor()}"> <input type="hidden" name="fontColor" id="fontColor" value="${category.getFontColor()}">
......
...@@ -13,8 +13,11 @@ ...@@ -13,8 +13,11 @@
<div id="${id}" class="valign-wrapper item-icon"> <div id="${id}" class="valign-wrapper item-icon">
<div class="item-icon-preview-container"> <div class="item-icon-preview-container">
<a id="item-icon-preview"> <a id="item-icon-preview">
<div id="item-icon-preview-background" class="category-circle category-circle-preview" style="background-color: ${item.getColor()}">
<i id="builtin-icon-preview-icon" class="<#if hasBuiltinIcon>${item.getIconReference().getBuiltinIdentifier()}<#else>hidden</#if>"></i> <i id="builtin-icon-preview-icon" class="<#if hasBuiltinIcon>${item.getIconReference().getBuiltinIdentifier()}<#else>hidden</#if>"></i>
<img id="item-icon-preview-icon" src="<#if hasImageIcon><@s.url "/media/getImageByIconID/" + item.getIconReference().getID()/></#if>" class="item-icon-preview <#if hasImageIcon == false>hidden</#if>"/> <img id="item-icon-preview-icon" src="<#if hasImageIcon><@s.url "/media/getImageByIconID/" + item.getIconReference().getID()/></#if>" class=" item-icon-preview category-icon <#if hasImageIcon == false>hidden</#if>"/>
<span id="item-icon-fallback-name" class="<#if hasBuiltinIcon || hasImageIcon>hidden</#if>"><#if item.getName()??>${item.getName()?capitalize[0]}</#if></span>
</div>
</a> </a>
<@header.buttonFlat url='' icon='delete' id='' localizationKey='' classes="no-padding text-default button-remove-icon-from-item" noUrl=true/> <@header.buttonFlat url='' icon='delete' id='' localizationKey='' classes="no-padding text-default button-remove-icon-from-item" noUrl=true/>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment