diff --git a/UI/BaseUIElement.ts b/UI/BaseUIElement.ts index a18b259724..80cb7b26e2 100644 --- a/UI/BaseUIElement.ts +++ b/UI/BaseUIElement.ts @@ -45,6 +45,7 @@ export default abstract class BaseUIElement { * Adds all the relevant classes, space separated */ public SetClass(clss: string) { + if(clss == undefined){return } const all = clss.split(" ").map(clsName => clsName.trim()); let recordedChange = false; for (let c of all) { diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index 55cd7504de..be9634b2fa 100644 --- a/UI/Popup/EditableTagRendering.ts +++ b/UI/Popup/EditableTagRendering.ts @@ -16,7 +16,10 @@ export default class EditableTagRendering extends Toggle { constructor(tags: UIEventSource, configuration: TagRenderingConfig, units: Unit [], - editMode = new UIEventSource(false) + options:{ + editMode? : UIEventSource , + innerElementClasses?: string + } ) { // The tagrendering is hidden if: @@ -27,7 +30,12 @@ export default class EditableTagRendering extends Toggle { (configuration?.condition?.matchesProperties(tags) ?? true)) super( - new Lazy(() => EditableTagRendering.CreateRendering(tags, configuration, units, editMode)), + new Lazy(() => { + const editMode = options.editMode ?? new UIEventSource(false) + const rendering = EditableTagRendering.CreateRendering(tags, configuration, units, editMode); + rendering.SetClass(options.innerElementClasses) + return rendering + }), undefined, renderingIsShown ) diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index cfffd0ffe9..58a07cc3a6 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -68,7 +68,8 @@ export default class FeatureInfoBox extends ScrollableFullScreen { const groupName = allGroupNames[i]; const trs = layerConfig.tagRenderings.filter(tr => tr.group === groupName) - const renderingsForGroup: BaseUIElement[] = [] + const renderingsForGroup: (EditableTagRendering | BaseUIElement)[] = [] + const innerClasses = "block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2"; for (const tr of trs) { if (tr.question === null || tr.id === "questions") { // This is a question box! @@ -76,21 +77,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen { questionBoxes.delete(tr.group) renderingsForGroup.push(questionBox) } else { - const etr = new EditableTagRendering(tags, tr, layerConfig.units).SetClass("editable-tag-rendering") - + let classes = innerClasses + if(renderingsForGroup.length === 0 && i > 0){ + // This is the first element of a group! + // It should act as header and be sticky + classes= "sticky top-0" + } + + const etr = new EditableTagRendering(tags, tr, layerConfig.units,{ + innerElementClasses: innerClasses + }) renderingsForGroup.push(etr) } } - let j = 0 - if (i !== 0) { - renderingsForGroup[0]?.SetStyle("position: sticky; top: -5px") - j = 1 - } - for (/* j = 0 or 1 */; j < renderingsForGroup.length; j++) { - renderingsForGroup[j].SetClass("block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2") - } - - allRenderings.push(...renderingsForGroup) }