zhao/luci-theme-argon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

luci-app-argon-config: 创建独立的 createColorPicker 函数

Browse Source 
Signed-off-by: sbwml <admin@cooluc.com>
This commit is contained in:
sbwml 2025-02-08 13:05:42 +08:00
parent 9c2a721ab5
commit 7104831d2f
2 changed files with 25 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js
View File

@ -30,6 +30,25 @@ var bg_path = '/www/luci-static/argon/background/';
var trans_set = [0, 0.1, 0.2, 0.3, 0.4, var trans_set = [0, 0.1, 0.2, 0.3, 0.4,
0.5, 0.6, 0.7, 0.8, 0.9, 1 ]; 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({ return view.extend({
load: function() { load: function() {
return Promise.all([ return Promise.all([
@ -77,22 +96,7 @@ return view.extend({
var el = form.Value.prototype.render.apply(this, arguments); var el = form.Value.prototype.render.apply(this, arguments);
setTimeout(function() { setTimeout(function() {
const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".primary"]'); const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".primary"]');
const colorPicker = document.createElement('input'); createColorPicker(textInput);
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;
});
}, 0); }, 0);
return el; return el;
}; };
@ -124,22 +128,7 @@ return view.extend({
var el = form.Value.prototype.render.apply(this, arguments); var el = form.Value.prototype.render.apply(this, arguments);
setTimeout(function() { setTimeout(function() {
const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".dark_primary"]'); const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".dark_primary"]');
const colorPicker = document.createElement('input'); createColorPicker(textInput);
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;
});
}, 0); }, 0);
return el; return el;
}; };
@ -157,7 +146,7 @@ return view.extend({
o.default = '10'; o.default = '10';
o.rmempty = false; 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.default = '#2e2b60';
o.rmempty = false; o.rmempty = false;
o.validate = function(section_id, value) { o.validate = function(section_id, value) {
@ -170,22 +159,7 @@ return view.extend({
var el = form.Value.prototype.render.apply(this, arguments); var el = form.Value.prototype.render.apply(this, arguments);
setTimeout(function() { setTimeout(function() {
const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".progressbar_font"]'); const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".progressbar_font"]');
const colorPicker = document.createElement('input'); createColorPicker(textInput);
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;
});
}, 0); }, 0);
return el; return el;
}; };

4
luci-app-argon-config/po/zh_Hans/argon-config.po
View File

@ -193,8 +193,8 @@ msgid "valid HEX color value"
msgstr "有效十六进制颜色值" msgstr "有效十六进制颜色值"
#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160 #: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160
msgid "Progress bar Font Color" msgid "[Light mode] Progress bar Font Color"
msgstr "进度条字体颜色" msgstr "[亮色模式] 进度条字体颜色"
#: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160 #: applications/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js:160
msgid "A HEX color (default: #2e2b60)." msgid "A HEX color (default: #2e2b60)."