luci-base: make some tables better searchable

This changes the "name" in specific tables from being painted to
being rendered. This allows the use of "ctrl-f" in browsers to e.g.
search for firewall rule names.

Closes https://github.com/openwrt/luci/issues/7708
Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
Link: https://github.com/openwrt/luci/pull/8191
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
This commit is contained in:
Ramon Van Gorkom
2026-01-04 18:48:47 +01:00
committed by Paul Donald
parent 471ac6b59c
commit 720c96ce5b
5 changed files with 35 additions and 57 deletions

View File

@@ -2601,6 +2601,9 @@ const CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection
if (this.extedit || this.rowcolors)
trEl.classList.add(!(tableEl.childNodes.length % 2)
? 'cbi-rowstyle-1' : 'cbi-rowstyle-2');
if (sectionname && (!this.anonymous || this.sectiontitle)) {
trEl.appendChild(E('td', {'class': 'td cbi-value-field cbi-value-first-field'}, [ (sectionname && (!this.anonymous || this.sectiontitle)) ? sectionname : null ]));
}
for (let j = 0; j < max_cols && nodes[i].firstChild; j++)
trEl.appendChild(nodes[i].firstChild);
@@ -2641,10 +2644,17 @@ const CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection
if (has_titles) {
const trEl = E('tr', {
'class': `tr cbi-section-table-titles ${anon_class}`,
'class': `tr cbi-value-first-field cbi-section-table-titles ${anon_class}`,
'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null,
'click': this.sortable ? ui.createHandlerFn(this, 'handleSort') : null
});
if (!this.anonymous || this.sectiontitle) {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell',
'data-sortable-row': this.sortable ? '' : null
}, (!this.anonymous || this.sectiontitle) ? _('Name') : null
));
}
for (let i = 0, opt; i < max_cols && (opt = this.children[i]) != null; i++) {
if (opt.modalonly)

View File

@@ -2037,12 +2037,7 @@ form.inline { display: inline; margin-bottom: 0; }
.cbi-section-table-titles.named::before,
.cbi-section-table-descr.named::before,
.cbi-section-table-row[data-title]::before {
content: attr(data-title) " ";
display: table-cell;
padding: 10px 10px 9px;
line-height: 18px;
font-weight: bold;
vertical-align: middle;
content: none;
}
.cbi-section-table-titles.named::before,
@@ -2324,6 +2319,10 @@ div.cbi-value var,
color: #0069d6;
}
.cbi-value-first-field {
font-weight: bold;
}
div.cbi-value var[data-tooltip],
.td.cbi-value-field var[data-tooltip],
div.cbi-value var.cbi-tooltip-container,

View File

@@ -1305,12 +1305,7 @@ td > table > tbody > tr > td,
}
.td[data-title]::before {
font-weight: bold;
display: none;
padding: .25rem 0;
content: attr(data-title) ":\20";
text-align: left;
white-space: nowrap;
content: none;
}
.tr.placeholder .td[data-title]::before {
@@ -1319,16 +1314,7 @@ td > table > tbody > tr > td,
.tr[data-title]::before,
.tr.cbi-section-table-titles.named::before {
font-weight: bold;
display: table-cell;
align-self: center;
flex: 1 1 5%;
padding: .25rem;
content: attr(data-title) "\20";
text-align: center;
vertical-align: middle;
white-space: normal;
word-wrap: break-word;
content: none;
}
.cbi-rowstyle-1 {
@@ -2161,6 +2147,10 @@ td.cbi-value-field var,
color: #0069d6;
}
.cbi-value-first-field {
font-weight: bold;
}
.cbi-optionals {
padding: 1rem 1rem 0 1rem;
border-top: thin solid #ccc;

View File

@@ -305,10 +305,7 @@ tr.cbi-section-table-titles[data-title]::before {
}
tr[data-title]::before {
content: attr(data-title);
display: table-cell;
border-top: 1px solid var(--main-dark-color);
padding: .5em;
content: none;
}
th {
@@ -1139,6 +1136,10 @@ textarea {
flex: 1 1 100%;
}
.cbi-value-first-field {
font-weight: bold;
}
.cbi-map-descr,
.cbi-tab-descr,
.cbi-section-descr,
@@ -1794,20 +1795,7 @@ ul.errors {
}
td[data-title]::before {
content: attr(data-title) ": ";
white-space: nowrap;
font-weight: bold;
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: .2em 0;
text-align: left;
display: inline-flex;
align-items: center;
content: none;
}
td[data-title]::after {

View File

@@ -985,12 +985,7 @@ div.cbi-optionals {
}
.td[data-title]::before {
content: attr(data-title) ":\20";
font-weight: bold;
text-align: left;
display: none;
padding: 1px 0;
white-space: nowrap;
content: none;
}
.td[data-description]::after {
@@ -1010,16 +1005,7 @@ div.cbi-optionals {
.tr[data-title]::before,
.tr.cbi-section-table-titles.named::before {
content: attr(data-title) "\20";
font-weight: bold;
text-align: left;
display: table-cell;
align-self: center;
flex: 1 1 5%;
padding: .25em;
white-space: normal;
word-wrap: break-word;
vertical-align: middle;
content: none;
}
.cbi-value-helpicon img {
@@ -1049,6 +1035,11 @@ div.cbi-optionals {
color: #2222FF;
}
.cbi-value-first-field {
font-weight: bold;
}
ul.cbi-tabmenu {
list-style-type: none;
display: flex;