From 7104831d2f5e0fbe36bbd90c6d66a4e60be57dfb Mon Sep 17 00:00:00 2001 From: sbwml Date: Sat, 8 Feb 2025 13:05:42 +0800 Subject: [PATCH] =?UTF-8?q?luci-app-argon-config:=20=E5=88=9B=E5=BB=BA?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E7=9A=84=20`createColorPicker`=20=E5=87=BD?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: sbwml --- .../resources/view/argon-config.js | 72 ++++++------------- .../po/zh_Hans/argon-config.po | 4 +- 2 files changed, 25 insertions(+), 51 deletions(-) diff --git a/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js b/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js index 73de619..2e011ae 100644 --- a/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js +++ b/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js @@ -30,6 +30,25 @@ var bg_path = '/www/luci-static/argon/background/'; var trans_set = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 ]; +function createColorPicker(textInput) { + const colorPicker = document.createElement('input'); + colorPicker.type = 'color'; + colorPicker.value = textInput.value; + colorPicker.style.width = '24px'; + colorPicker.style.height = '24px'; + colorPicker.style.padding = '0px'; + colorPicker.style.marginLeft = '5px'; + colorPicker.style.borderRadius = '4px'; + colorPicker.style.border = '1px solid #d9d9d9'; + textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling); + colorPicker.addEventListener('input', function() { + textInput.value = colorPicker.value; + }); + textInput.addEventListener('input', function() { + colorPicker.value = textInput.value; + }); +} + return view.extend({ load: function() { return Promise.all([ @@ -77,22 +96,7 @@ return view.extend({ var el = form.Value.prototype.render.apply(this, arguments); setTimeout(function() { const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".primary"]'); - const colorPicker = document.createElement('input'); - colorPicker.type = 'color'; - colorPicker.value = textInput.value; - colorPicker.style.width = '24px'; - colorPicker.style.height = '24px'; - colorPicker.style.padding = '0px'; - colorPicker.style.marginLeft = '5px'; - colorPicker.style.borderRadius = '4px'; - colorPicker.style.border = '1px solid #d9d9d9'; - textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling); - colorPicker.addEventListener('input', function() { - textInput.value = colorPicker.value; - }); - textInput.addEventListener('input', function() { - colorPicker.value = textInput.value; - }); + createColorPicker(textInput); }, 0); return el; }; @@ -124,22 +128,7 @@ return view.extend({ var el = form.Value.prototype.render.apply(this, arguments); setTimeout(function() { const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".dark_primary"]'); - const colorPicker = document.createElement('input'); - colorPicker.type = 'color'; - colorPicker.value = textInput.value; - colorPicker.style.width = '24px'; - colorPicker.style.height = '24px'; - colorPicker.style.padding = '0px'; - colorPicker.style.marginLeft = '5px'; - colorPicker.style.borderRadius = '4px'; - colorPicker.style.border = '1px solid #d9d9d9'; - textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling); - colorPicker.addEventListener('input', function() { - textInput.value = colorPicker.value; - }); - textInput.addEventListener('input', function() { - colorPicker.value = textInput.value; - }); + createColorPicker(textInput); }, 0); return el; }; @@ -157,7 +146,7 @@ return view.extend({ o.default = '10'; o.rmempty = false; - o = s.option(form.Value, 'progressbar_font', _('Progress bar Font Color'), _('A HEX color (default: #2e2b60).')) + o = s.option(form.Value, 'progressbar_font', _('[Light mode] Progress bar Font Color'), _('A HEX color (default: #2e2b60).')) o.default = '#2e2b60'; o.rmempty = false; o.validate = function(section_id, value) { @@ -170,22 +159,7 @@ return view.extend({ var el = form.Value.prototype.render.apply(this, arguments); setTimeout(function() { const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".progressbar_font"]'); - const colorPicker = document.createElement('input'); - colorPicker.type = 'color'; - colorPicker.value = textInput.value; - colorPicker.style.width = '24px'; - colorPicker.style.height = '24px'; - colorPicker.style.padding = '0px'; - colorPicker.style.marginLeft = '5px'; - colorPicker.style.borderRadius = '4px'; - colorPicker.style.border = '1px solid #d9d9d9'; - textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling); - colorPicker.addEventListener('input', function() { - textInput.value = colorPicker.value; - }); - textInput.addEventListener('input', function() { - colorPicker.value = textInput.value; - }); + createColorPicker(textInput); }, 0); return el; }; diff --git a/luci-app-argon-config/po/zh_Hans/argon-config.po b/luci-app-argon-config/po/zh_Hans/argon-config.po index 8006b56..e77883d 100644 --- a/luci-app-argon-config/po/zh_Hans/argon-config.po +++ b/luci-app-argon-config/po/zh_Hans/argon-config.po @@ -193,8 +193,8 @@ msgid "valid HEX color value" msgstr "有效十六进制颜色值" #: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160 -msgid "Progress bar Font Color" -msgstr "进度条字体颜色" +msgid "[Light mode] Progress bar Font Color" +msgstr "[亮色模式] 进度条字体颜色" #: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160 msgid "A HEX color (default: #2e2b60)."