echelon/i2p.i2p
1
0
Fork 0
forked from I2P_Developers/i2p.i2p
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Backend HTML changes:

Browse Source 
- Labels for radio/checkbox icons to increase surface area for clicks, improving
  UI for touchscreen use
- Standardized configuration labels: bold text for leading options, standard
  weight for trailing descriptions
- Remove some hard-coded table layouts
- Additional ids and classes for theming
This commit is contained in:
str4d
2017-05-14 05:30:13 +00:00
parent 48661361fa
commit 6b056ce6e0
35 changed files with 327 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/routerconsole/java/src/net/i2p/router/web/ConfigClientsHelper.java
View File

@ -327,7 +327,7 @@ public class ConfigClientsHelper extends HelperBase {
boolean showEditButton, boolean showUpdateButton, boolean showStopButton,
boolean showDeleteButton, boolean showStartButton) {
String escapedName = DataHelper.escapeHTML(name);
buf.append("<tr><td class=\"mediumtags\" align=\"right\" width=\"25%\">");
buf.append("<tr><td align=\"right\">");
if (urlify && enabled) {
String link = "/";
if (! RouterConsoleRunner.ROUTERCONSOLE.equals(name))
@ -340,15 +340,15 @@ public class ConfigClientsHelper extends HelperBase {
buf.append("\" >");
} else {
if (name.length() > 0)
buf.append(_t(escapedName));
buf.append("<label for=\"").append(index).append("\">").append(_t(escapedName)).append("</label>");
}
buf.append("</td><td align=\"center\" width=\"10%\"><input type=\"checkbox\" class=\"optbox\" name=\"").append(index).append(".enabled\"");
buf.append("</td><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"").append(index).append("\" name=\"").append(index).append(".enabled\"");
if (enabled) {
buf.append(CHECKED);
if (ro || preventDisable)
buf.append("disabled=\"disabled\" ");
}
buf.append("></td><td align=\"center\" width=\"15%\">");
buf.append("></td><td align=\"center\">");
if (showStartButton && (!ro) && !edit) {
buf.append("<button type=\"submit\" title=\"").append(_t("Start")).append("\" class=\"control accept\" name=\"action\" value=\"Start ").append(index).append("\" >")
@ -373,7 +373,7 @@ public class ConfigClientsHelper extends HelperBase {
.append("')) { return false; }\">")
.append(_t("Delete")).append("<span class=hide> ").append(index).append("</span></button>");
}
buf.append("</td><td align=\"left\" width=\"50%\">");
buf.append("</td><td align=\"left\">");
if (edit && !ro) {
buf.append("<input type=\"text\" size=\"80\" spellcheck=\"false\" name=\"nofilter_desc").append(index).append("\" value=\"");
buf.append(escapedDesc);

6
apps/routerconsole/java/src/net/i2p/router/web/ConfigLoggingHelper.java
View File

@ -42,9 +42,9 @@ public class ConfigLoggingHelper extends HelperBase {
buf.append(prefix).append('=').append(level).append('\n');
}
buf.append("</textarea><br>\n");
buf.append("<p style=\"margin: 0px 12px\"><i>").append(_t("Add additional logging statements above. Example: net.i2p.router.tunnel=WARN")).append("</i><br>");
buf.append("<i>").append(_t("Or put entries in the logger.config file. Example: logger.record.net.i2p.router.tunnel=WARN")).append("</i><br>");
buf.append("<i>").append(_t("Valid levels are DEBUG, INFO, WARN, ERROR, CRIT")).append("</i></p>\n");
buf.append("<p>").append(_t("Add additional logging statements above. Example: net.i2p.router.tunnel=WARN")).append("<br>");
buf.append(_t("Or put entries in the logger.config file. Example: logger.record.net.i2p.router.tunnel=WARN")).append("<br>");
buf.append(_t("Valid levels are DEBUG, INFO, WARN, ERROR, CRIT")).append("</p>\n");
/****
// this is too big and ugly

12
apps/routerconsole/java/src/net/i2p/router/web/ConfigTunnelsHelper.java
View File

@ -94,7 +94,7 @@ public class ConfigTunnelsHelper extends HelperBase {
// tunnel depth
int maxLength = advanced ? MAX_ADVANCED_LENGTH : MAX_LENGTH;
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Length") + ":</td>\n");
buf.append("<tr><td align=\"right\"><b>" + _t("Length") + ":</b></td>\n");
buf.append("<td align=\"center\"><select name=\"").append(index).append(".depthInbound\">\n");
int now = in.getLength();
renderOptions(buf, 0, maxLength, now, "", HOP);
@ -111,7 +111,7 @@ public class ConfigTunnelsHelper extends HelperBase {
buf.append("</tr>\n");
// tunnel depth variance
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Randomization") + ":</td>\n");
buf.append("<tr><td align=\"right\"><b>" + _t("Randomization") + ":</b></td>\n");
buf.append("<td align=\"center\"><select name=\"").append(index).append(".varianceInbound\">\n");
now = in.getLengthVariance();
renderOptions(buf, 0, 0, now, "", HOP);
@ -136,7 +136,7 @@ public class ConfigTunnelsHelper extends HelperBase {
// tunnel quantity
int maxQuantity = advanced ? MAX_ADVANCED_QUANTITY : MAX_QUANTITY;
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Quantity") + ":</td>\n");
buf.append("<tr><td align=\"right\"><b>" + _t("Quantity") + ":</b></td>\n");
buf.append("<td align=\"center\"><select name=\"").append(index).append(".quantityInbound\">\n");
now = in.getQuantity();
renderOptions(buf, 1, maxQuantity, now, "", TUNNEL);
@ -154,7 +154,7 @@ public class ConfigTunnelsHelper extends HelperBase {
// tunnel backup quantity
int maxBQuantity = advanced ? MAX_ADVANCED_BACKUP_QUANTITY : MAX_BACKUP_QUANTITY;
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Backup quantity") + ":</td>\n");
buf.append("<tr><td align=\"right\"><b>" + _t("Backup quantity") + ":</b></td>\n");
buf.append("<td align=\"center\"><select name=\"").append(index).append(".backupInbound\">\n");
now = in.getBackupQuantity();
renderOptions(buf, 0, maxBQuantity, now, "", TUNNEL);
@ -176,7 +176,7 @@ public class ConfigTunnelsHelper extends HelperBase {
// And let's not display them at all unless they have contents, which should be rare.
Properties props = in.getUnknownOptions();
if (!props.isEmpty()) {
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Inbound options") + ":</td>\n" +
buf.append("<tr><td align=\"right\"><b>" + _t("Inbound options") + ":</b></td>\n" +
"<td colspan=\"2\" align=\"center\"><input name=\"").append(index);
buf.append(".inboundOptions\" type=\"text\" size=\"32\" disabled=\"disabled\" " +
"value=\"");
@ -188,7 +188,7 @@ public class ConfigTunnelsHelper extends HelperBase {
}
props = out.getUnknownOptions();
if (!props.isEmpty()) {
buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Outbound options") + ":</td>\n" +
buf.append("<tr><td align=\"right\"><b>" + _t("Outbound options") + ":</b></td>\n" +
"<td colspan=\"2\" align=\"center\"><input name=\"").append(index);
buf.append(".outboundOptions\" type=\"text\" size=\"32\" disabled=\"disabled\" " +
"value=\"");

22
apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java
View File

@ -26,24 +26,24 @@ public class ConfigUIHelper extends HelperBase {
}
boolean universalTheming = _context.getBooleanProperty(CSSHelper.PROP_UNIVERSAL_THEMING);
buf.append("</div><div id=\"themeoptions\">");
buf.append("<input type=\"checkbox\" name=\"universalTheming\" ");
buf.append("<label><input type=\"checkbox\" name=\"universalTheming\" ");
if (universalTheming)
buf.append(CHECKED);
buf.append("value=\"1\">")
.append(_t("Set theme universally across all apps"))
.append("<br>\n");
.append("</label><br>\n");
return buf.toString();
}
public String getForceMobileConsole() {
StringBuilder buf = new StringBuilder(256);
boolean forceMobileConsole = _context.getBooleanProperty(CSSHelper.PROP_FORCE_MOBILE_CONSOLE);
buf.append("<input type=\"checkbox\" name=\"forceMobileConsole\" ");
buf.append("<label><input type=\"checkbox\" name=\"forceMobileConsole\" ");
if (forceMobileConsole)
buf.append(CHECKED);
buf.append("value=\"1\">")
.append(_t("Force the mobile console to be used"))
.append("</div>\n");
.append("</label></div>\n");
return buf.toString();
}
@ -190,17 +190,23 @@ public class ConfigUIHelper extends HelperBase {
buf.append(_t("Add a user and password to enable."));
buf.append("</td></tr>");
} else {
buf.append("<tr><th>")
buf.append("<tr><th title=\"")
.append(_t("Mark for deletion"))
.append("\">")
.append(_t("Remove"))
.append("</th><th>")
.append(_t("Username"))
.append("</th><th>&nbsp;</th></tr>\n");
for (String name : userpw.keySet()) {
buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"")
.append(name)
.append("\"></td><td colspan=\"2\">")
.append("\" name=\"delete_")
.append(name)
.append("</td></tr>\n");
.append("\"></td><td colspan=\"2\"><label for=\"")
.append(name)
.append("\">")
.append(name)
.append("</label></td></tr>\n");
}
}
buf.append("<tr><td id=\"pw_adduser\" align=\"left\" colspan=\"3\">")

12
apps/routerconsole/java/src/net/i2p/router/web/ConfigUpdateHelper.java
View File

@ -76,27 +76,27 @@ public class ConfigUpdateHelper extends HelperBase {
public String getUpdateThroughProxy() {
if (_context.getProperty(ConfigUpdateHandler.PROP_SHOULD_PROXY, ConfigUpdateHandler.DEFAULT_SHOULD_PROXY))
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" checked=\"checked\" >";
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" id=\"updateThroughProxy\" checked=\"checked\" >";
else
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" >";
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" id=\"updateThroughProxy\" >";
}
/** @since 0.9.9 */
public String getNewsThroughProxy() {
if (_context.getProperty(ConfigUpdateHandler.PROP_SHOULD_PROXY_NEWS, ConfigUpdateHandler.DEFAULT_SHOULD_PROXY_NEWS))
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" checked=\"checked\" >";
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" id=\"newsThroughProxy\" checked=\"checked\" >";
else
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" >";
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" id=\"newsThroughProxy\" >";
}
public String getUpdateUnsigned() {
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateUnsigned\" " +
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateUnsigned\" id=\"updateUnsigned\" " +
getChecked(ConfigUpdateHandler.PROP_UPDATE_UNSIGNED) + '>';
}
/** @since 0.9.20 */
public String getUpdateDevSU3() {
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateDevSU3\" " +
return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateDevSU3\" id=\"updateDevSU3\" " +
getChecked(ConfigUpdateHandler.PROP_UPDATE_DEV_SU3) + '>';
}

8
apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java
View File

@ -102,13 +102,13 @@ public class EventLogHelper extends FormHandler {
_out.write("<br><h3 id=\"displayevents\">" + _t("Display Events") + "</h3>");
_out.write("<form action=\"events\" method=\"POST\">\n" +
"<input type=\"hidden\" name=\"action\" value=\"save\">\n" +
"<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n");
_out.write(_t("Events since") + ": <select name=\"from\">");
"<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n<b>");
_out.write(_t("Events since") + ":</b> <select name=\"from\">");
for (int i = 0; i < _times.length; i++) {
writeOption(_times[i]);
}
_out.write("</select>&nbsp;");
_out.write(_t("Event type") + ": <select name=\"type\">");
_out.write("</select>&nbsp;<b>");
_out.write(_t("Event type") + ":</b> <select name=\"type\">");
// sorted by translated display string
Map<String, String> events = new TreeMap<String, String>(Collator.getInstance());
for (int i = 0; i < _events.length; i += 2) {

8
apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java
View File

@ -360,8 +360,8 @@ public class GraphHelper extends FormHandler {
"<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n");
_out.write(_t("Display period") + ":</td><td colspan=\"2\"><input size=\"5\" style=\"text-align: right;\" type=\"text\" name=\"periodCount\" value=\"" + _periodCount + "\">" + _t("minutes") + "</td></tr><tr><td>\n");
_out.write(_t("Plot type") + ":</td><td colspan=\"2\">");
_out.write("<input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"false\" " + (_showEvents ? "" : HelperBase.CHECKED) + ">" + _t("Averages") + "&nbsp;&nbsp;&nbsp;");
_out.write ("<input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"true\" "+ (_showEvents ? HelperBase.CHECKED : "") + ">" + _t("Events") + "</td></tr><tr><td>\n");
_out.write("<label><input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"false\" " + (_showEvents ? "" : HelperBase.CHECKED) + ">" + _t("Averages") + "</label>&nbsp;&nbsp;&nbsp;");
_out.write ("<label><input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"true\" "+ (_showEvents ? HelperBase.CHECKED : "") + ">" + _t("Events") + "</label></td></tr><tr><td>\n");
_out.write(_t("Graph size") + ":</td><td><input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"width\" value=\"" + _width
+ "\">" + _t("pixels wide") + "&nbsp;&nbsp;&nbsp;<input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"height\" value=\"" + _height
+ "\">" + _t("pixels high") + "</td><td class=\"infohelp\">" + _t("Note: Dimensions are for graph only (excludes title, labels and legend).") + "</td></tr><tr><td>\n");
@ -380,11 +380,11 @@ public class GraphHelper extends FormHandler {
_out.write("</option>\n");
}
_out.write("</select></td></tr><tr><td>\n" + _t("Persistence") +
":</td><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"persistent\"");
":</td><td colspan=\"2\"><label><input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"persistent\"");
boolean persistent = _context.getBooleanPropertyDefaultTrue(SummaryListener.PROP_PERSISTENT);
if (persistent)
_out.write(HelperBase.CHECKED);
_out.write(">" + _t("Store graph data on disk") + "</td></tr></table>" +
_out.write(">" + _t("Store graph data on disk") + "</label></td></tr></table>" +
"<hr><div class=\"formaction\" id=\"graphing\"><input type=\"submit\" class=\"accept\" value=\"" + _t("Save settings and redraw graphs") + "\"></div></form>");
} catch (IOException ioe) {
ioe.printStackTrace();

10
apps/routerconsole/java/src/net/i2p/router/web/HomeHelper.java
View File

@ -212,7 +212,9 @@ public class HomeHelper extends HelperBase {
private String renderConfig(Collection<App> apps) {
StringBuilder buf = new StringBuilder(1024);
buf.append("<table class=\"homelinkedit\"><tr><th title=\"Mark for deletion\">")
buf.append("<table class=\"homelinkedit\"><tr><th title=\"")
.append(_t("Mark for deletion"))
.append("\">")
.append(_t("Remove"))
.append("</th><th></th><th>")
.append(_t("Name"))
@ -221,12 +223,16 @@ public class HomeHelper extends HelperBase {
.append("</th></tr>\n");
for (App app : apps) {
buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
.append(app.name)
.append("\" id=\"")
.append(app.name)
.append("\"></td><td align=\"center\">");
if (app.icon != null) {
buf.append("<img height=\"16\" alt=\"\" src=\"").append(app.icon).append("\">");
}
buf.append("</td><td align=\"left\">")
buf.append("</td><td align=\"left\"><label for=\"")
.append(app.name)
.append("\">")
.append(DataHelper.escapeHTML(app.name))
.append("</td><td align=\"left\"><a href=\"");
String url = DataHelper.escapeHTML(app.url);

2
apps/routerconsole/java/src/net/i2p/router/web/NetDbHelper.java
View File

@ -258,7 +258,7 @@ public class NetDbHelper extends HelperBase {
"<tr><td>Router Version:</td><td><input type=\"text\" name=\"v\"></td><td></td></tr>\n" +
"<tr><td colspan=\"3\" class=\"subheading\"><b>Add Sybil analysis (must pick one above):</b></td></tr>\n" +
"<tr><td>Sybil close to:</td><td><input type=\"text\" name=\"sybil2\"></td><td>Router hash, dest hash, b32, or from address book</td>\n" +
"<tr><td>or Sybil close to this router:</td><td><input type=\"checkbox\" class=\"optbox\" value=\"1\" name=\"sybil\"></td><td></td></tr>\n" +
"<tr><td><label for=\"closetorouter\">or Sybil close to this router:</label></td><td><input type=\"checkbox\" class=\"optbox\" value=\"1\" name=\"sybil\" id=\"closetorouter\"></td><td></td></tr>\n" +
"<tr><td colspan=\"3\" class=\"optionsave\"><button type=\"submit\" class=\"search\" value=\"Lookup\">Lookup</button></td></tr>\n" +
"</table>\n</form>\n");
}

8
apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java
View File

@ -85,7 +85,7 @@ class ProfileOrganizerRenderer {
if (standard > 0)
buf.append("<a href=\"/profiles?f=1\">").append(ngettext("Hiding 1 standard profile.", "Hiding {0} standard profiles.", standard)).append("</a>\n");
buf.append("</p>");
buf.append("<table id=\"profiles\">");
buf.append("<div class=\"widescroll\"><table id=\"profilelist\">");
buf.append("<tr>");
buf.append("<th>").append(_t("Peer")).append("</th>");
buf.append("<th>").append(_t("Groups")).append("</th>");
@ -191,7 +191,7 @@ class ProfileOrganizerRenderer {
out.write(buf.toString());
buf.setLength(0);
}
buf.append("</table>");
buf.append("</table></div>");
////
//// don't bother reindenting
@ -312,8 +312,8 @@ class ProfileOrganizerRenderer {
buf.append("<tr><td>&nbsp;</td>")
.append("<td><b>X:</b></td><td>").append(_t("Over {0} shared bandwidth", "2000KBps")).append("</td>")
.append("<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
buf.append("<tr><td>&nbsp;</td><td colspan=\"4\">").append(_t("Note: For P and X bandwidth capabilities, O is included for the purpose of backward compatibility in the NetDB."))
.append("<td>&nbsp;</td></tr>");
buf.append("<tr><td>&nbsp;</td><td colspan=\"5\">").append(_t("Note: For P and X bandwidth tiers, O is included for the purpose of backward compatibility in the NetDB."))
.append("</tr>");
buf.append("</tbody></table></td></tr>"); // profile_defs
buf.append("<tr><td><b>")
.append(_t("speed"))

10
apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java
View File

@ -939,11 +939,15 @@ public class SummaryHelper extends HelperBase {
.append("</th></tr>\n");
for (String section : sections) {
int i = sections.indexOf(section);
buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"")
.append(sectionNames.get(section))
.append("\" name=\"delete_")
.append(i)
.append("\"></td><td align=\"left\">")
.append("\"></td><td align=\"left\"><label for=\"")
.append(sectionNames.get(section))
.append("\">")
.append(_t(sectionNames.get(section)))
.append("</td><td align=\"right\"><input type=\"hidden\" name=\"order_")
.append("</label></td><td align=\"right\"><input type=\"hidden\" name=\"order_")
.append(i).append('_').append(section)
.append("\" value=\"")
.append(i)

5
apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java
View File

@ -67,7 +67,7 @@ class TunnelRenderer {
out.write("<h3 class=\"tabletitle\"><a name=\"participating\"></a>" + _t("Participating tunnels") + "</h3>\n");
if (!participating.isEmpty()) {
Collections.sort(participating, new TunnelComparator());
out.write("<table class=\"tunneldisplay\"><tr><th>" + _t("Receive on") + "</th><th>" + _t("From") + "</th><th>"
out.write("<table class=\"tunneldisplay tunnels_participating\"><tr><th>" + _t("Receive on") + "</th><th>" + _t("From") + "</th><th>"
+ _t("Send on") + "</th><th>" + _t("To") + "</th><th>" + _t("Expiration") + "</th>"
+ "<th>" + _t("Usage") + "</th><th>" + _t("Rate") + "</th><th>" + _t("Role") + "</th></tr>\n");
}
@ -163,7 +163,8 @@ class TunnelRenderer {
if (info.getLength() > maxLength)
maxLength = info.getLength();
}
out.write("<table class=\"tunneldisplay\"><tr><th>" + _t("In/Out") + "</th><th>" + _t("Expiry") + "</th><th>" + _t("Usage") + "</th><th>" + _t("Gateway") + "</th>");
out.write("<table class=\"tunneldisplay tunnels_client\"><tr><th title=\"" + _t("Inbound or outbound?") + ("\">") + _t("In/Out")
+ "</th><th>" + _t("Expiry") + "</th><th>" + _t("Usage") + "</th><th>" + _t("Gateway") + "</th>");
if (maxLength > 3) {
out.write("<th align=\"center\" colspan=\"" + (maxLength - 2));
out.write("\">" + _t("Participants") + "</th>");