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 <redacted>
Link: https://github.com/openwrt/luci/pull/8191
Signed-off-by: Paul Donald <redacted>

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index b0d855c56faaa97b83d8eed1e546e4c040471f75..e7c68b21e0202690514a66d446631820e6d3671f 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -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)

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index d4d83f73dd376243f27b3acffb414813adcec5ae..7d8922e6fc7a25165fdabd4f7e5ac262b13148fd 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -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,

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 0251e4b050ef0b431837bab394880dca5d2c7e2c..27b598de046e9b999c1b8d49b6a2af02c52bd1a1 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -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;

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
index 89155238509366e62ceba908af1b649c801fd29a..66841eee4a23ee0efd675eab105f4e96d48714c6 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
@@ -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 {

diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index 889f1205319a4e8f1336a67d8fc90e91de81f6b3..fb05910e3637910c74846dfebcd13a2ac3d367a0 100644 (file)
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -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;