linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS curves settings fix

Browse Source
This commit is contained in:
l_samenv
2024-09-04 10:40:36 +02:00
parent 345a231bdd
commit 2cb81cde58
3 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/curves_settings_popup/color_selector/color_selector.css
View File

@ -1,3 +1,3 @@
.color-selector-select{
width:57px;
width:100%;
}

31
client/components/curves_settings_popup/curves_settings_popup.css
View File

@ -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;

26
client/components/curves_settings_popup/curves_settings_popup.js
View File

@ -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)
}