From 2cb81cde583e3bceaf8a7ad204c527a2414fc0e5 Mon Sep 17 00:00:00 2001
From: l_samenv <l_samenv@pc16392>
Date: Wed, 4 Sep 2024 10:40:36 +0200
Subject: [PATCH] CSS curves settings fix

---
 .../color_selector/color_selector.css         |  2 +-
 .../curves_settings_popup.css                 | 31 +++++++++++--------
 .../curves_settings_popup.js                  | 26 ++++++++++------
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/client/components/curves_settings_popup/color_selector/color_selector.css b/client/components/curves_settings_popup/color_selector/color_selector.css
index d8c25d4..a7ceef5 100644
--- a/client/components/curves_settings_popup/color_selector/color_selector.css
+++ b/client/components/curves_settings_popup/color_selector/color_selector.css
@@ -1,3 +1,3 @@
 .color-selector-select{
-    width:57px;
+    width:100%;
 }
\ No newline at end of file
diff --git a/client/components/curves_settings_popup/curves_settings_popup.css b/client/components/curves_settings_popup/curves_settings_popup.css
index d5ad891..052082b 100644
--- a/client/components/curves_settings_popup/curves_settings_popup.css
+++ b/client/components/curves_settings_popup/curves_settings_popup.css
@@ -11,7 +11,7 @@
 }
 
 #curves-settings-popup-container{
-    width: 380px;
+    width: 100%;
     height: 100%;
     border: 2px solid black;
     margin: auto;
@@ -44,6 +44,8 @@
 #curves-settings-popup-content{
     padding: 10px;
     height: calc(100% - 80px);
+    display: flex;
+    flex-direction: column;
 }
 
 .button-center-wrapper{
@@ -62,7 +64,7 @@
 }
 
 #curves-settings-popup-table{
-    width: 335px;
+    width: 100%;
 }
 #curves-settings-popup-table,
 #curves-settings-popup-table tr th,
@@ -77,9 +79,23 @@
     text-align: left;
 }
 
+#curves-settings-popup-table tbody tr td:not(.bin-cell){
+   position: relative; 
+}
+
+#curves-settings-popup-table tbody tr td:not(.bin-cell) div{
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+} 
+
 .text-input{
     padding: 0;
     border: 0;
+    width: 100%;
 }
 
 .bin-cell{
@@ -91,17 +107,6 @@ td img{
     height: 15px;
 }
 
-.variable-cell, .parameter-cell, .cat-cell{
-    width: 73px;
-}
-.color-cell{
-    width: 57px;
-}
-
-.unit-cell{
-    width: 37px;
-}
-
 #curves-settings-popup-footer{
     height: 40px;
     display: flex;
diff --git a/client/components/curves_settings_popup/curves_settings_popup.js b/client/components/curves_settings_popup/curves_settings_popup.js
index 32f12f3..b5fda4d 100644
--- a/client/components/curves_settings_popup/curves_settings_popup.js
+++ b/client/components/curves_settings_popup/curves_settings_popup.js
@@ -77,11 +77,14 @@ class CurvesSettingsPopup extends HTMLElement{
 
         for(let cell of row.children){
             let content = cell.children[0]; //there is only one child per cell
-            if(content.nodeName == "INPUT" && content.value !== ""){
-                configuration[content.name] = content.value;
-            }
-            else if (content.nodeName == "SEA-COLOR-SELECTOR" && content.getValue() !== ""){
-                configuration["color"] = content.getValue();
+            if(content.nodeName == "DIV"){ //we skip the first cell which is the bin
+                content = content.children[0];
+                if(content.nodeName == "INPUT" && content.value !== ""){
+                    configuration[content.name] = content.value;
+                }
+                else if (content.nodeName == "SEA-COLOR-SELECTOR" && content.getValue() !== ""){
+                    configuration["color"] = content.getValue();
+                }
             }
         }
         return configuration;
@@ -158,7 +161,6 @@ class CurvesSettingsPopup extends HTMLElement{
 
         let binImg = document.createElement("img");
         binImg.src = "res/bin.png";
-        binImg.classList.add("bin-cell");
         binImg.onclick = () => {
             binImg.parentNode.parentNode.remove();
             this.addNewRowIfEmpty();
@@ -173,9 +175,11 @@ class CurvesSettingsPopup extends HTMLElement{
         this.createTextInput(row, lineConfiguration, "cat")
 
         let colorCell = document.createElement("td");
+        let colorDiv = document.createElement("div");
         let seaColorSelector = new ColorSelector();
-        row.append(colorCell)
-        colorCell.appendChild(seaColorSelector); //need to first append it before calling setValue
+        row.append(colorCell);
+        colorCell.append(colorDiv);
+        colorDiv.appendChild(seaColorSelector); //need to first append it before calling setValue
         seaColorSelector.setValue("");
         if(lineConfiguration != null && lineConfiguration.hasOwnProperty('color')){
             seaColorSelector.setValue(lineConfiguration['color']);
@@ -188,17 +192,19 @@ class CurvesSettingsPopup extends HTMLElement{
 
     createTextInput(row, lineConfiguration, type){
         let cell = document.createElement("td");
+        let div = document.createElement("div");
         let input = document.createElement("input");
         input.type = "text";
         input.spellcheck = false
         input.autocorrect = "off"
         input.name = type;
-        input.classList.add(`${type}-cell`, "text-input");
+        input.classList.add("text-input");
         input.value = "";
         if(lineConfiguration != null && lineConfiguration.hasOwnProperty(type)){
             input.value = lineConfiguration[type];
         }
-        cell.appendChild(input);
+        div.appendChild(input)
+        cell.appendChild(div);
         row.append(cell)
     }