diff --git a/solara/lib/core/dashboard/brand/BrandDetailController.js b/solara/lib/core/dashboard/brand/BrandDetailController.js index 52edbe8..9e4276f 100644 --- a/solara/lib/core/dashboard/brand/BrandDetailController.js +++ b/solara/lib/core/dashboard/brand/BrandDetailController.js @@ -114,6 +114,7 @@ class BrandDetailController { try { this.view.updateAppNameTitle(`${configuraationsResult.brand.key} (${configuraationsResult.brand.name})`); await this.showSections(configuraationsResult); + this.view.showIndex(); } catch (error) { console.error('Error initializing app:', error); alert(error.message); @@ -145,7 +146,7 @@ class BrandDetailController { if (sectionInfo.key === 'theme') { this.createThemeSections(sectionInfo) } else { - this.createSection(sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType) + this.createSection(sectionInfo.key, sectionInfo, sectionInfo.content, sectionInfo.name, sectionInfo.inputType) } } } catch (error) { @@ -155,15 +156,39 @@ class BrandDetailController { } createThemeSections(sectionInfo) { - this.createSection(sectionInfo, sectionInfo.content.colors, 'Theme Colors', 'color', 'colors') - this.createSection(sectionInfo, sectionInfo.content.typography, 'Theme Typography', 'text', 'typography') - this.createSection(sectionInfo, sectionInfo.content.spacing, 'Theme Spacing', 'text', 'spacing') - this.createSection(sectionInfo, sectionInfo.content.borderRadius, 'Theme Border Radius', 'text', 'borderRadius') - this.createSection(sectionInfo, sectionInfo.content.elevation, 'Theme Elevation', 'text', 'elevation') + this.createSection(`${sectionInfo.key}_colors`, + sectionInfo, + sectionInfo.content.colors, + 'Theme Colors', + 'color', + 'colors') + this.createSection(`${sectionInfo.key}_typography`, + sectionInfo, sectionInfo.content.typography, + 'Theme Typography', + 'text', + 'typography') + this.createSection(`${sectionInfo.key}_spacing`, + sectionInfo, sectionInfo.content.spacing, + 'Theme Spacing', 'text', + 'spacing') + this.createSection( + `${sectionInfo.key}_borderRadius`, + sectionInfo, sectionInfo.content.borderRadius, + 'Theme Border Radius', + 'text', + 'borderRadius') + this.createSection( + `${sectionInfo.key}_elevation`, + sectionInfo, + sectionInfo.content.elevation, + 'Theme Elevation', + 'text', + 'elevation') } - createSection(sectionInfo, content, sectionName, inputType, propertiesGroupName = null) { + createSection(id, sectionInfo, content, sectionName, inputType, propertiesGroupName = null) { const sectionElement = this.view.createSection(sectionInfo.key, sectionName, inputType); + sectionElement.id = id; sectionElement.dataset.propertiesGroupName = propertiesGroupName this.view.sectionsContainer.appendChild(sectionElement); diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js index e6e225c..9fc3233 100644 --- a/solara/lib/core/dashboard/brand/BrandDetailView.js +++ b/solara/lib/core/dashboard/brand/BrandDetailView.js @@ -236,6 +236,22 @@ class BrandDetailView { this.onboardSheet.show('Brand Details', 'Add Brand', onSubmit); } + showIndex() { + const sectionsContainer = this.sectionsContainer; + const sectionElements = Array.from(sectionsContainer.querySelectorAll('.section')); + + const indexElement = document.getElementById('index'); + + // Clear existing items if needed + indexElement.innerHTML = ''; + + sectionElements.forEach(sectionElement => { + const newItem = document.createElement('li'); + newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`; + indexElement.appendChild(newItem); + }); + } + async hideOnboardBrandForm() { this.onboardSheet.hide(); }