zhao/QModem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

luci: refactor progress bar class names and add compatibility check to fix #6

Browse Source
This commit is contained in:
fujr 2024-12-19 16:08:47 +08:00
parent b1eaebd905
commit 2907ba887f
2 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
luci/luci-app-qmodem/files/modem_overview.htm
View File

@ -8,7 +8,7 @@
.cbi-progressbar {
.compat-progressbar {
border: 1px solid var(--border-color-high,var(--progressbarColor,var(--background-color)));
border-radius: 3px;
position: relative;
@ -18,7 +18,7 @@
background: var(--background-color-medium,var(--progressbarColor));
}
.cbi-progressbar > div {
.compat-progressbar > div {
background: var(--progressbar, var(--primary, var(--primary-color-medium)));
height: 100%;
transition: width .25s ease-in;
@ -26,7 +26,7 @@
border-radius: 2px;
}
.cbi-progressbar::before {
.compat-progressbar::before {
position: absolute;
top: -1.4em;
left: 0;
@ -38,7 +38,26 @@
</style>
<script>
function hasCssClass(className) {
// 获取所有样式表
const styleSheets = document.styleSheets;
// 遍历每个样式表
for (let i = 0; i < styleSheets.length; i++) {
const rules = styleSheets[i].cssRules || styleSheets[i].rules; // 兼容不同浏览器
// 遍历每个样式规则
for (let j = 0; j < rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText.includes(className)) {
return true; // 找到定义，返回 true
}
}
}
return false; // 没有找到定义，返回 false
}
const progressbar_className = hasCssClass('.cbi-progressbar') ? 'cbi-progressbar' : 'compat-progressbar';
class LuciTable{
constructor(){
this.rows = [];
@ -99,7 +118,7 @@
precentage = (data.value - min) / (max - min) * 100;
this.rows[index].left.innerHTML = full_name;
var progress_bar = document.createElement('div')
progress_bar.className = "cbi-progressbar"
progress_bar.className = progressbar_className
progress_bar.title = title;
var progress_bar_bar = document.createElement('div')
progress_bar_bar.setAttribute("style","width:"+precentage+"%")

28
luci/luci-app-qmodem/luasrc/view/qmodem/modem_info.htm
View File

@ -9,7 +9,7 @@
.cbi-progressbar {
.compat-progressbar {
border: 1px solid var(--border-color-high,var(--progressbarColor,var(--background-color)));
border-radius: 3px;
position: relative;
@ -19,7 +19,7 @@
background: var(--background-color-medium,var(--progressbarColor));
}
.cbi-progressbar > div {
.compat-progressbar > div {
background: var(--progressbar, var(--primary, var(--primary-color-medium)));
height: 100%;
transition: width .25s ease-in;
@ -27,7 +27,7 @@
border-radius: 2px;
}
.cbi-progressbar::before {
.compat-progressbar::before {
position: absolute;
top: -1.4em;
left: 0;
@ -39,6 +39,26 @@
</style>
<script>
function hasCssClass(className) {
// 获取所有样式表
const styleSheets = document.styleSheets;
// 遍历每个样式表
for (let i = 0; i < styleSheets.length; i++) {
const rules = styleSheets[i].cssRules || styleSheets[i].rules; // 兼容不同浏览器
// 遍历每个样式规则
for (let j = 0; j < rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText.includes(className)) {
return true; // 找到定义，返回 true
}
}
}
return false; // 没有找到定义，返回 false
}
const progressbar_className = hasCssClass('.cbi-progressbar') ? 'cbi-progressbar' : 'compat-progressbar';
class LuciTable{
constructor(){
@ -100,7 +120,7 @@ class LuciTable{
precentage = (data.value - min) / (max - min) * 100;
this.rows[index].left.innerHTML = full_name;
var progress_bar = document.createElement('div')
progress_bar.className = "cbi-progressbar"
progress_bar.className = progressbar_className;
progress_bar.title = title;
var progress_bar_bar = document.createElement('div')
progress_bar_bar.setAttribute("style","width:"+precentage+"%")