CSS sort buttons on /peers

- New icons to avoid conflation of tunnel direction and sort direction
- Active sort columnn now indicated and focused button highlighted

installer/resources/themes/console/classic/console.css

@@ -1751,6 +1751,97 @@ tr:hover th {
      color: #0c153d;
 }
 
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     background: #fff;
+     padding-top: 3px;
+}
+
+#ntcpconnections th {
+     background: #fff;
+}
+
+#peers > #ntcpcon {
+     margin-top: 0 !important;
+}
+
+#upnpstatus + #ntcpcon {
+     margin-top: 10px !important;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #999;
+     border-radius: 2px;
+     margin: 2px 1px 0;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;;
+     opacity: 0.7;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,102,0,0.15);
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin-top: -1px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #fff;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #fff;
+}
+
+/* end peer sort */
+
 table#thresholds, table#profile_defs {
      margin-top: -1px;
      line-height: 150%;

installer/resources/themes/console/dark/console.css

@@ -1139,6 +1139,89 @@ td img {
      padding: 0;
 }
 
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #171;
+     border-radius: 1px;
+     opacity: 0.7;
+     margin: 5px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortup:hover, .sortdown:hover {
+     opacity: 0.9;
+     transition: ease all 0.3s;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #000;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
+     border: 1px solid #f60;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,255,0,0.2);
+     border-radius: 1px;
+     margin-top: -1px;
+     height: 14px;
+     width: 16px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #050;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
+     border: 1px solid #f60;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #050;
+     border: 1px solid #050;
+}
+
+/* end peer sort */
+
 tt {
      font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", Courier, mono;
      color: #FF0;

installer/resources/themes/console/light/console.css

@@ -4530,6 +4530,85 @@ table#profiles tr:hover td, table#floodfills tr:hover td, #ntcpconnections tr:nt
      color: #111;
 }
 
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #999;
+     border-radius: 2px;
+     margin: 3px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
+     opacity: 0.75;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,102,0,0.15);
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin-top: -1px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #fff;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #fff;
+}
+
+/* end peer sort */
+
+
 table#schedjobs {
      margin-top: -11px !important;
 }

installer/resources/themes/console/midnight/console.css

@@ -2688,6 +2688,92 @@ table#ntcpconnections {
      overflow-x: scroll !important;
 }
 
+/* peers - sort icons */
+
+#ntcpconnections th, #udpconnections th {
+     background: #000010 !important;
+}
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #117;
+     border: 1px solid #443da0;
+     border-radius: 1px;
+     margin: 4px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #000;
+     opacity: 0.5;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+     filter: hue-rotate(60deg);
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 2px 2px 1px #000;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
+     border: 1px solid #652787;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(237, 207, 255, 0.2);
+     border-radius: 1px;
+     margin-top: -1px;
+     height: 14px;
+     width: 16px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #005;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
+     border: 1px solid #652787;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #005;
+     border: 1px solid #005;
+}
+
+/* end peer sort */
+
 pre#transports {
      border: 1px solid #443da0;
      padding: 15px 7px 5px 15px;

router/java/src/net/i2p/router/transport/udp/Sorters.java

@@ -285,20 +285,21 @@ class Sorters {
 
     static void appendSortLinks(StringBuilder buf, String urlBase, int sortFlags, String descr, int ascending) {
         if (ascending == FLAG_ALPHA) {  // 0
-            buf.append(" <a href=\"").append(urlBase).append("?sort=0" +
-                       "#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=0" +
+                       "#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>");
         } else if (sortFlags == ascending) {
-            buf.append(" <a href=\"").append(urlBase).append("?sort=").append(0-ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>" +
-                       "<b><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></b>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=").append(0-ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>" +
+                       "<span class=\"sortupactive\"><b><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></b></span>");
         } else if (sortFlags == 0 - ascending) {
-            buf.append(" <b><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></b><a href=\"").append(urlBase).append("?sort=").append(ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a>");
+            buf.append(" <span class=\"sortdownactive\"><b><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></b></span><span class=\"sortup\"><a href=\"")
+               .append(urlBase).append("?sort=").append(ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a></span>");
         } else {
-            buf.append(" <a href=\"").append(urlBase).append("?sort=").append(0-ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>" +
-                       "<a href=\"").append(urlBase).append("?sort=").append(ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=").append(0-ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>" +
+                       "<span class=\"sortup\"><a href=\"").append(urlBase).append("?sort=").append(ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a></span>");
         }
     }
 }