From 6c67d3aaa8fed577c186a86a94af2bc471e857a7 Mon Sep 17 00:00:00 2001
From: themancalledjakob <jrkb@jrkb.land>
Date: Mon, 1 Apr 2024 11:47:41 +0200
Subject: [PATCH] more css classes in side panel

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18
---
 bin/em/variabletime/web/js/layer.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/bin/em/variabletime/web/js/layer.js b/bin/em/variabletime/web/js/layer.js
index 1efc457..9419dd5 100644
--- a/bin/em/variabletime/web/js/layer.js
+++ b/bin/em/variabletime/web/js/layer.js
@@ -523,12 +523,12 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                                     const inputElement = panelPropContainer
                                                             .querySelector('input');
                                     if (inputElement !== null) {
-                                    inputElement
-                                        .classList
-                                        .add(`${propKey}Input`);
-                                    inputElement
-                                        .classList
-                                        .add(`propInput`);
+                                        inputElement
+                                            .classList
+                                            .add(`${propKey}Input`);
+                                        inputElement
+                                            .classList
+                                            .add(`propInput`);
                                     }
                                 }
                             } else {
@@ -564,6 +564,20 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                                 panelPropTitles[unfriendlyName].innerHTML = friendlyName;
                                 panelPropTitles[unfriendlyName].classList.add('propTitle');
                                 panelPropTitles[unfriendlyName].classList.add(`${unfriendlyName}Title`);
+
+                                let panelPropContainer = panelPropContainers[unfriendlyName];
+
+                                for (let i = 0; i < panelPropContainer.children.length; i++) {
+                                    const child = panelPropContainer.children[i];
+                                    if (child.querySelector('input') !== null) {
+                                        child.classList.add(`${unfriendlyName}InputWrapper`);
+                                        child.classList.add('propInputWrapper');
+                                    }
+                                    if (child.contains(panelPropTitles[unfriendlyName])) {
+                                        child.classList.add(`${unfriendlyName}TitleWrapper`);
+                                        child.classList.add('propTitleWrapper');
+                                    }
+                                };
                             }
                         }
                     });