Automatically place the label below the icon
This commit is contained in:
parent
a50913a094
commit
b6b22526dd
3 changed files with 8 additions and 5 deletions
|
@ -325,7 +325,7 @@ export default class LayerConfig {
|
|||
const weight = rendernum(this.width, 5);
|
||||
|
||||
const iconW = num(iconSize[0]);
|
||||
const iconH = num(iconSize[1]);
|
||||
let iconH = num(iconSize[1]);
|
||||
const mode = iconSize[2] ?? "center"
|
||||
|
||||
let anchorW = iconW / 2;
|
||||
|
@ -375,7 +375,7 @@ export default class LayerConfig {
|
|||
const rotation = render(self.rotation, "0deg");
|
||||
|
||||
let htmlParts: UIElement[] = [];
|
||||
let sourceParts = iconUrl.split(";").filter(prt => prt != "");
|
||||
let sourceParts = Utils.NoNull(iconUrl.split(";").filter(prt => prt != ""));
|
||||
for (const sourcePart of sourceParts) {
|
||||
htmlParts.push(genHtmlFromString(sourcePart))
|
||||
}
|
||||
|
@ -410,8 +410,11 @@ export default class LayerConfig {
|
|||
htmlParts.push(badgesComponent)
|
||||
}
|
||||
|
||||
if(sourceParts.length ==0){iconH = 0}
|
||||
|
||||
const label = self.label.GetRenderValue(tgs)?.Subs(tgs).SetClass("block w-min text-center")
|
||||
const label = self.label.GetRenderValue(tgs)?.Subs(tgs)
|
||||
.SetClass("block w-min text-center")
|
||||
.SetStyle("margin-top: "+(iconH + 2) +"px")
|
||||
console.log("Generating label gave ", label, " source: ", self.label, "tags: ", tgs)
|
||||
if (label !== undefined) {
|
||||
htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center"))
|
||||
|
|
|
@ -131,7 +131,7 @@ export interface LayerConfigJson {
|
|||
rotation?: string | TagRenderingConfigJson;
|
||||
/**
|
||||
* A HTML-fragment that is shown at the center of the icon, for example:
|
||||
* <div style="margin-top: 50px; background: white; display: block">{name}</div>
|
||||
* <div style="background: white; display: block">{name}</div>
|
||||
*/
|
||||
label?: string | TagRenderingConfigJson ;
|
||||
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
"mappings": [
|
||||
{
|
||||
"if": "name~*",
|
||||
"then": "<div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
|
||||
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue