gitproxy/RTLPlayground
1
0
Fork 0
mirror of https://github.com/logicog/RTLPlayground.git synced 2026-08-30 14:52:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

l2: show which column sorts and in which direction

Browse Source 
Clicking a heading sorted the table but nothing said so afterwards - the
only feedback was the rows moving, which is no help when the sort key is a
column you are not looking at.

Give every sortable heading a permanent marker: a neutral double arrow when
it is not the sort key, up or down when it is. The marker sits in its own
span so the i18n pass, which replaces the heading text, does not wipe it.
This commit is contained in:
d00f
2026-08-05 21:35:54 +02:00
parent 5e901fb5c2
commit 4389cfcd8b
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/l2.html
+4 -4
View File
@@ -13,13 +13,13 @@
<p><span data-i18n="l2_shown">Shown:</span> <span id="l2count">-</span></p> <p><span data-i18n="l2_shown">Shown:</span> <span id="l2count">-</span></p>
<table id="l2table"> <table id="l2table">
<tr> <tr>
<th><span class="l2sort" onclick="l2SortBy('port')" data-i18n="l2_col_port">Port</span><br> <th><span class="l2sort" onclick="l2SortBy('port')"><span data-i18n="l2_col_port">Port</span><span id="l2a_port" class="l2arrow"></span></span><br>
<input id="l2f_port" class="l2filter" oninput="l2FilterChanged()" size="5"></th> <input id="l2f_port" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
<th><span class="l2sort" onclick="l2SortBy('mac')">MAC</span><br> <th><span class="l2sort" onclick="l2SortBy('mac')">MAC<span id="l2a_mac" class="l2arrow"></span></span><br>
<input id="l2f_mac" class="l2filter" oninput="l2FilterChanged()" size="14"></th> <input id="l2f_mac" class="l2filter" oninput="l2FilterChanged()" size="14"></th>
<th><span class="l2sort" onclick="l2SortBy('vlan')">VLAN</span><br> <th><span class="l2sort" onclick="l2SortBy('vlan')">VLAN<span id="l2a_vlan" class="l2arrow"></span></span><br>
<input id="l2f_vlan" class="l2filter" oninput="l2FilterChanged()" size="5"></th> <input id="l2f_vlan" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
<th><span class="l2sort" onclick="l2SortBy('type')" data-i18n="l2_col_type">Type</span><br> <th><span class="l2sort" onclick="l2SortBy('type')"><span data-i18n="l2_col_type">Type</span><span id="l2a_type" class="l2arrow"></span></span><br>
<input id="l2f_type" class="l2filter" oninput="l2FilterChanged()" size="8"></th> <input id="l2f_type" class="l2filter" oninput="l2FilterChanged()" size="8"></th>
<th data-i18n="l2_col_remove">Remove Entry</th></tr> <th data-i18n="l2_col_remove">Remove Entry</th></tr>
<script src="/l2.js"></script> <script src="/l2.js"></script>
html/l2.js
+4
View File
@@ -100,6 +100,10 @@ function renderL2() {
var x = l2Key(a, l2SortCol), y = l2Key(b, l2SortCol); var x = l2Key(a, l2SortCol), y = l2Key(b, l2SortCol);
return (x < y ? -1 : x > y ? 1 : 0) * l2SortDir; return (x < y ? -1 : x > y ? 1 : 0) * l2SortDir;
}); });
['port', 'mac', 'vlan', 'type'].forEach(function(c) {
var a = document.getElementById('l2a_' + c);
if (a) a.textContent = (c === l2SortCol) ? (l2SortDir > 0 ? ' \u25b2' : ' \u25bc') : ' \u21c5';
});
paintL2(tbl, rows); paintL2(tbl, rows);
var cnt = document.getElementById('l2count'); var cnt = document.getElementById('l2count');
if (cnt) cnt.textContent = rows.length + ' / ' + l2All.length; if (cnt) cnt.textContent = rows.length + ' / ' + l2All.length;
html/style.css
+1
View File
@@ -168,4 +168,5 @@ option { direction: rtl; font-family: sans-serif}
/* L2 table: sortable headers and per-column filters */ /* L2 table: sortable headers and per-column filters */
.l2sort{cursor:pointer;user-select:none} .l2sort{cursor:pointer;user-select:none}
.l2sort:hover{text-decoration:underline} .l2sort:hover{text-decoration:underline}
.l2arrow{opacity:0.55;font-size:0.85em}
.l2filter{width:100%;box-sizing:border-box;font-weight:normal;font-size:0.9em} .l2filter{width:100%;box-sizing:border-box;font-weight:normal;font-size:0.9em}