diff --git a/Resources/Plugins/edit-design/browser.js b/Resources/Plugins/edit-design/browser.js index 1f9ba8dc..888894db 100644 --- a/Resources/Plugins/edit-design/browser.js +++ b/Resources/Plugins/edit-design/browser.js @@ -173,20 +173,26 @@ enabled(){ // SELECTS else if (tag === "SELECT"){ let optionCustom = item.find("option[value^='custom']"); + let optionCustomNew = item.find("option[value^='change-custom']"); let resetMyValue = () => { if (!item.val(me.config[key]).val() && optionCustom.length === 1){ item.val(optionCustom.attr("value")); optionCustom.text(getTextForCustom(key)); + optionCustomNew.show(); + } + else{ + optionCustom.text("Custom"); + optionCustomNew.hide(); } }; resetMyValue(); - item.change(function(){ // TODO change doesn't fire when Custom is already selected + item.change(function(){ let val = item.val(); - if (val === "custom-px"){ + if (val.endsWith("custom-px")){ val = (prompt("Enter custom value (px):") || "").trim(); if (val){ @@ -196,21 +202,17 @@ enabled(){ if (/^[0-9]+$/.test(val)){ updateKey(key, val+"px"); - optionCustom.text(getTextForCustom(key)); } else{ alert("Invalid value, only px values are supported."); - resetMyValue(); } } - else{ - resetMyValue(); - } } else{ updateKey(key, item.val()); - optionCustom.text("Custom"); } + + resetMyValue(); }); } // CUSTOM ELEMENTS diff --git a/Resources/Plugins/edit-design/modal.html b/Resources/Plugins/edit-design/modal.html index 8365e361..fe1dc50c 100644 --- a/Resources/Plugins/edit-design/modal.html +++ b/Resources/Plugins/edit-design/modal.html @@ -41,6 +41,7 @@ <option value="350px">Wide (350px)</option> <option value="400px">Extreme (400px)</option> <option value="custom-px">Custom</option> + <option value="change-custom-px">Change custom value...</option> </optgroup> <option disabled></option> <optgroup label="Dynamic width"> @@ -66,6 +67,7 @@ <option value="15px">Large (15px)</option> <option value="16px">Largest (16px)</option> <option value="custom-px">Custom</option> + <option value="change-custom-px">Change custom value...</option> </select> <label class="checkbox"> <input data-td-key="increaseQuoteTextSize" class="js-theme-checkbox touch-larger-label" type="checkbox">