mirror of
https://github.com/openwrt/luci.git
synced 2026-04-15 19:01:56 +00:00
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:
committed by
Paul Donald
parent
471ac6b59c
commit
720c96ce5b
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user