From 7de815bd90e73a848f311a4c4b3bb387bc2d93b8 Mon Sep 17 00:00:00 2001
From: str4d <str4d@mail.i2p>
Date: Sun, 14 May 2017 05:39:51 +0000
Subject: [PATCH] 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
---
.../themes/console/classic/console.css | 91 ++++++++++++++++++
.../console/classic/images/sort_down.png | Bin 0 -> 261 bytes
.../themes/console/classic/images/sort_up.png | Bin 0 -> 275 bytes
.../resources/themes/console/dark/console.css | 83 ++++++++++++++++
.../themes/console/dark/images/sort_down.png | Bin 0 -> 195 bytes
.../themes/console/dark/images/sort_up.png | Bin 0 -> 195 bytes
.../themes/console/light/console.css | 79 +++++++++++++++
.../themes/console/light/images/sort_down.png | Bin 0 -> 261 bytes
.../themes/console/light/images/sort_up.png | Bin 0 -> 275 bytes
.../themes/console/midnight/console.css | 86 +++++++++++++++++
.../console/midnight/images/sort_down.png | Bin 0 -> 195 bytes
.../console/midnight/images/sort_up.png | Bin 0 -> 195 bytes
.../net/i2p/router/transport/udp/Sorters.java | 23 ++---
13 files changed, 351 insertions(+), 11 deletions(-)
create mode 100644 installer/resources/themes/console/classic/images/sort_down.png
create mode 100644 installer/resources/themes/console/classic/images/sort_up.png
create mode 100644 installer/resources/themes/console/dark/images/sort_down.png
create mode 100644 installer/resources/themes/console/dark/images/sort_up.png
create mode 100644 installer/resources/themes/console/light/images/sort_down.png
create mode 100644 installer/resources/themes/console/light/images/sort_up.png
create mode 100644 installer/resources/themes/console/midnight/images/sort_down.png
create mode 100644 installer/resources/themes/console/midnight/images/sort_up.png
diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css
index e3300ed819..bbfd7b5a46 100644
--- a/installer/resources/themes/console/classic/console.css
+++ b/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%;
diff --git a/installer/resources/themes/console/classic/images/sort_down.png b/installer/resources/themes/console/classic/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..42879e6ed7ea928745136174539f2fa5b9814869
GIT binary patch
literal 261
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3-p0j(#}}q(TCGLR^6~7-%yvI5036GccGi
zFlaI`*fKC!GccGlFc^XvRtyZL3{18ROjZm`77UDb42+fxj8<TVH3Op!m~9W{0!at<
zOI#j6L#0ZB{DK)+cmzarjLa-zk_w7@rq7(ScHM@vckjOX`12%V3D8&uH%}MGkcwNr
zryZGG3`7oGI3ogd+539`rC<MUKdr>G`&v@i_sD+%5hs-oXP?{dEmwTzpZKjDBlewp
mpNj<kUKikYeW7ab9DU96>|38?$^c!@z~JfX=d#Wzp$Pzh0!B>$
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/classic/images/sort_up.png b/installer/resources/themes/console/classic/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a374f68f25068da0f59bb1920748ff00fa3007
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3-p0j(#}}q!I#rLR^6~1A_wtLnxR8GOQRF
zY#10U7#NHh7;G6B>=+nK!6N1$DJEM6CLjq$j5Z96whU0x8qBss5&^R985kXQik92}
z+8|pJ<QL4q!p0$^tfr~!?H3jq)7n32*6fpK&YnB}?!(7Ve@h%M8vzx%db&7<aLBSA
zY-c=Rz{9Mt=$+v1|MAfr3;YxgeE!PBv`s3#*`exrtzrPbn=HpW&TV{&YZ=0Y7xOn*
ky541Qd%H7@A>ucC+b_n$ED?4`fCe&ny85}Sb4q9e0NtZP*#H0l
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css
index c7029dc933..124d26af83 100644
--- a/installer/resources/themes/console/dark/console.css
+++ b/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;
diff --git a/installer/resources/themes/console/dark/images/sort_down.png b/installer/resources/themes/console/dark/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..74250ec7a431e6b1c44a136a45b672146fc27684
GIT binary patch
literal 195
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3-q-owxf3q;vy(LR^9L|4=Y0WcZ)O@IRg5
ze=5WOG%y0Pfea*4K;hIkpa#B@AirP+W;RZq33HaNShs!efinUk(|!SE%spKkLpZMc
z9zQO~pdirTaOUSP{p*IOyO(ZR-!xgD{ohGuEg9CM1yNqX3qA*2d*dUzvTb(n#d9xt
X6qwtW6=h8X8o}V{>gTe~DWM4f4tqw@
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/dark/images/sort_up.png b/installer/resources/themes/console/dark/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..60cf6c95add71764f8e196675773876d756177d3
GIT binary patch
literal 195
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3-q-owxf3q;vy(LR^9L|4=Y0WcZ)O@IRg5
ze=5WOG%y0Pfea*4K;hIkpa#B@AirP+W;RZq33HaNShs!efinUk(|!SE%spKkLn?0h
z9^cByV93K_u(^5r|83_5N*8rcHTm^|p>5w}HU{5!g-4fu+ImF!JiDFalL(8iJ6~AO
Xwr6hZTG3MvG=jm?)z4*}Q$iB}Crn45
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css
index 1fc77c372e..768c6af500 100644
--- a/installer/resources/themes/console/light/console.css
+++ b/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;
}
diff --git a/installer/resources/themes/console/light/images/sort_down.png b/installer/resources/themes/console/light/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..42879e6ed7ea928745136174539f2fa5b9814869
GIT binary patch
literal 261
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3-p0j(#}}q(TCGLR^6~7-%yvI5036GccGi
zFlaI`*fKC!GccGlFc^XvRtyZL3{18ROjZm`77UDb42+fxj8<TVH3Op!m~9W{0!at<
zOI#j6L#0ZB{DK)+cmzarjLa-zk_w7@rq7(ScHM@vckjOX`12%V3D8&uH%}MGkcwNr
zryZGG3`7oGI3ogd+539`rC<MUKdr>G`&v@i_sD+%5hs-oXP?{dEmwTzpZKjDBlewp
mpNj<kUKikYeW7ab9DU96>|38?$^c!@z~JfX=d#Wzp$Pzh0!B>$
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/light/images/sort_up.png b/installer/resources/themes/console/light/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a374f68f25068da0f59bb1920748ff00fa3007
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3-p0j(#}}q!I#rLR^6~1A_wtLnxR8GOQRF
zY#10U7#NHh7;G6B>=+nK!6N1$DJEM6CLjq$j5Z96whU0x8qBss5&^R985kXQik92}
z+8|pJ<QL4q!p0$^tfr~!?H3jq)7n32*6fpK&YnB}?!(7Ve@h%M8vzx%db&7<aLBSA
zY-c=Rz{9Mt=$+v1|MAfr3;YxgeE!PBv`s3#*`exrtzrPbn=HpW&TV{&YZ=0Y7xOn*
ky541Qd%H7@A>ucC+b_n$ED?4`fCe&ny85}Sb4q9e0NtZP*#H0l
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css
index 95ca32d10b..ba1b16323a 100644
--- a/installer/resources/themes/console/midnight/console.css
+++ b/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;
diff --git a/installer/resources/themes/console/midnight/images/sort_down.png b/installer/resources/themes/console/midnight/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..74250ec7a431e6b1c44a136a45b672146fc27684
GIT binary patch
literal 195
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3-q-owxf3q;vy(LR^9L|4=Y0WcZ)O@IRg5
ze=5WOG%y0Pfea*4K;hIkpa#B@AirP+W;RZq33HaNShs!efinUk(|!SE%spKkLpZMc
z9zQO~pdirTaOUSP{p*IOyO(ZR-!xgD{ohGuEg9CM1yNqX3qA*2d*dUzvTb(n#d9xt
X6qwtW6=h8X8o}V{>gTe~DWM4f4tqw@
literal 0
HcmV?d00001
diff --git a/installer/resources/themes/console/midnight/images/sort_up.png b/installer/resources/themes/console/midnight/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..60cf6c95add71764f8e196675773876d756177d3
GIT binary patch
literal 195
zcmeAS@N?(olHy`uVBq!ia0vp^d_c^>!3-q-owxf3q;vy(LR^9L|4=Y0WcZ)O@IRg5
ze=5WOG%y0Pfea*4K;hIkpa#B@AirP+W;RZq33HaNShs!efinUk(|!SE%spKkLn?0h
z9^cByV93K_u(^5r|83_5N*8rcHTm^|p>5w}HU{5!g-4fu+ImF!JiDFalL(8iJ6~AO
Xwr6hZTG3MvG=jm?)z4*}Q$iB}Crn45
literal 0
HcmV?d00001
diff --git a/router/java/src/net/i2p/router/transport/udp/Sorters.java b/router/java/src/net/i2p/router/transport/udp/Sorters.java
index 21ea5ec7af..ba9d3497f3 100644
--- a/router/java/src/net/i2p/router/transport/udp/Sorters.java
+++ b/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>");
}
}
}
--
GitLab