/configui: Use larger flags for language selection

apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java

@@ -172,7 +172,7 @@ public class ConfigUIHelper extends HelperBase {
             if (lang.equals(current))
                 buf.append(CHECKED);
             buf.append("value=\"").append(lang).append("\">")
-               .append("<img height=\"11\" width=\"16\" alt=\"\" src=\"/flags.jsp?c=").append(langs[i][1]).append("\">")
+               .append("<img height=\"48\" width=\"48\" alt=\"\" src=\"/flags.jsp?s=48&c=").append(langs[i][1]).append("\">")
                .append("<div class=\"ui_lang\">");
             int under = lang.indexOf('_');
             String slang = (under > 0) ? lang.substring(0, under) : lang;

apps/routerconsole/jsp/flags.jsp

@@ -9,16 +9,22 @@
 
 /**
  *  flags.jsp?c=de => icons/flags/de.png
+ *  flags.jsp?c=de&s=48 => icons/flags48x48/de.png
  *  with headers set so the browser caches.
  */
 String c = request.getParameter("c");
 if (c != null &&
     (c.length() == 2 || c.length() == 7) &&
     c.replaceAll("[a-z0-9_]", "").length() == 0) {
+    String flagSet = "flags";
+    String s = request.getParameter("s");
+    if ("48".equals(s)) {
+        flagSet = "flags48x48";
+    }
     java.io.OutputStream cout = response.getOutputStream();
     String base = net.i2p.I2PAppContext.getGlobalContext().getBaseDir().getAbsolutePath();
     String file = "docs" + java.io.File.separatorChar + "icons" + java.io.File.separatorChar +
-                  "flags" + java.io.File.separatorChar + c + ".png";
+                  flagSet + java.io.File.separatorChar + c + ".png";
     java.io.File ffile = new java.io.File(base, file);
     long lastmod = ffile.lastModified();
     if (lastmod > 0) {

build.xml

@@ -1241,6 +1241,9 @@
         <copy todir="pkg-temp/docs/icons/flags" >
           <fileset dir="installer/resources/icons/flags" />
         </copy>
+        <copy todir="pkg-temp/docs/icons/flags48x48" >
+          <fileset dir="installer/resources/icons/flags48x48" />
+        </copy>
     </target>
 
     <target name="copyjetty" depends="copyjetty-unlesspkg" >
@@ -1396,6 +1399,8 @@
                im.png added in 0.8.12; cw.png added in 0.9.5; ap,bl,bq,ss,sx added in 0.9.21;
                lang_gl added in 0.9.28; a0.png added in 0.9.31 -->
           <fileset dir="installer/resources/" includes="icons/flags/lang_ar.png icons/flags/gg.png icons/flags/je.png icons/flags/eu.png icons/flags/im.png icons/flags/a1.png icons/flags/a2.png icons/flags/cw.png icons/flags/ap.png icons/flags/bl.png icons/flags/bq.png icons/flags/ss.png icons/flags/sx.png icons/flags/lang_gl.png icons/flags/a0.png" />
+          <!-- flags48x48 added in 0.9.32 -->
+          <fileset dir="installer/resources/" includes="icons/flags48x48/*" />
         </copy>
     </target>
 
@@ -2508,6 +2513,9 @@
 			<copy todir="pkg-temp/docs/icons/flags" >
 				<fileset dir="installer/resources/icons/flags/" includes="cn.png,de.png,fr.png,nl.png,ru.png,se.png,us.png" />
 			</copy>
+			<copy todir="pkg-temp/docs/icons/flags48x48" >
+				<fileset dir="installer/resources/icons/flags48x48" />
+			</copy>
 		<mkdir dir="pkg-temp/webapps" />
 			<copy todir="pkg-temp/webapps/">
 				<fileset dir="build/" includes="**.war" />

history.txt

@@ -22,7 +22,9 @@
      - Add additional reachability states for clockskew and vmcomm (with icons)
    - Homepage: Add 'Customize Sidebar' link to signpost the feature now that
      there are more optional sections available (ticket #1996)
-   - /configui: Add option to embed Susimail and I2PSnark in console
+   - /configui:
+     - Add option to embed Susimail and I2PSnark in console
+     - Use larger flags for language selection
  * I2PTunnel: Add hostname / destination (b32) information to server section on
    index page (for parity with client tunnels section)
  * I2PSnark

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

@@ -4680,6 +4680,70 @@ p#helptranslate {
      margin: 0 -5px;
 }
 
+/* large flags */
+
+.langselect img {
+     margin-top: 2px !important;
+     margin-bottom: 34px !important;
+     margin-left: -70px !important;
+     width: 40px;
+     height: 40px;
+     border: none !important;
+     box-shadow: none;
+     opacity: 0.9 !important;
+     transform: none !important;
+     filter: drop-shadow(0 0 1px #77d);
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     margin-top: 6px !important;
+     margin-bottom: 38px !important;
+     width: 32px !important;
+     height: 32px !important;
+     border: none !important;
+     box-shadow: none !important;
+     opacity: 1 !important;
+     transform: none !important;
+     animation: glow 20s 10s infinite;
+}
+
+.langselect input:hover + img {
+     box-shadow: none !important;
+     border: none !important;
+     transition: none !important;
+     filter: drop-shadow(0 0 2px #f60);
+}
+
+/*
+.langselect input[name="lang"]:checked + img + .ui_lang {
+     margin: -24px -4px 0;
+}
+*/
+
+@keyframes glow {
+0% {
+     filter: drop-shadow(0 0 1px rgba(256, 100, 0, 0.1));
+}
+
+20% {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+50% {
+     filter: drop-shadow(0 0 2px #930);
+}
+
+80% {
+     filter: drop-shadow(0 0 1px #d40);
+}
+
+100% {
+     filter: drop-shadow(0 0 1px rgba(256, 100, 0, 0.1));
+}
+}
+
+/* end large flags */
+
 /* configui password*/
 
 #consolepass th:nth-child(2) {

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

@@ -3105,6 +3105,39 @@ td#themeselect {
 }
 }
 
+/* large flags */
+
+.langselect img {
+     width: 40px;
+     height: 40px;
+     border: none !important;
+     margin-top: -6px !important;
+     margin-left: -82px;
+     position: absolute;
+     box-shadow: none;
+     opacity: 0.6;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     width: 32px !important;
+     height: 32px !important;
+     border: none !important;
+     margin-left: -78px;
+     margin-top: -2px !important;
+     margin-bottom: 0;
+     box-shadow: none !important;
+     opacity: 1;
+}
+
+.langselect input:hover + img {
+     box-shadow: none !important;
+     transition: none !important;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+/* end large flags */
+
 /* end flag as radio icons */
 
 div.ui_lang { /* lang text label */

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

@@ -4818,6 +4818,67 @@ div.langselect br {
      display: block;
 }
 
+/* large flags */
+
+.langselect img {
+     margin-top: -60px !important;
+     margin-bottom: 34px !important;
+     width: 40px;
+     height: 40px;
+     border: none !important;
+     box-shadow: none;
+     opacity: 0.9 !important;
+     transform: none !important;
+     filter: drop-shadow(0 0 1px #77d);
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     margin-top: -56px !important;
+     margin-bottom: 30px !important;
+     width: 32px !important;
+     height: 32px !important;
+     border: none !important;
+     box-shadow: none !important;
+     opacity: 1 !important;
+     transform: none !important;
+     animation: glow 20s 10s infinite;
+}
+
+.langselect input:hover + img {
+     box-shadow: none !important;
+     border: none !important;
+     transition: none !important;
+     filter: drop-shadow(0 0 2px #f60);
+}
+
+.langselect input[name="lang"]:checked + img + .ui_lang {
+     margin: -24px -4px 0;
+}
+
+@keyframes glow {
+0% {
+     filter: drop-shadow(0 0 1px rgba(256, 100, 0, 0.1));
+}
+
+20% {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+50% {
+     filter: drop-shadow(0 0 2px #930);
+}
+
+80% {
+     filter: drop-shadow(0 0 1px #d40);
+}
+
+100% {
+     filter: drop-shadow(0 0 1px rgba(256, 100, 0, 0.1));
+}
+}
+
+/* end large flags */
+
 div.ui_lang {
      text-align: center;
      background: #eef url(images/tinytitle.png) center center !important;

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

@@ -3552,6 +3552,38 @@ td#themeselect {
 }
 }
 
+/* large flags */
+
+.langselect img {
+     width: 40px;
+     height: 40px;
+     border: none !important;
+     margin-top: -6px !important;
+     margin-left: -82px;
+     position: absolute;
+     box-shadow: none;
+     opacity: 0.75;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     width: 32px !important;
+     height: 32px !important;
+     border: none !important;
+     margin-left: -78px;
+     margin-top: -2px !important;
+     margin-bottom: 0;
+     box-shadow: none !important;
+     opacity: 1;
+}
+
+.langselect input:hover + img {
+     box-shadow: none !important;
+     transition: none !important;
+     filter: drop-shadow(0 0 2px #652787);
+}
+
+/* end large flags */
 /* end flag as radio icons */
 
 .ui_lang { /* lang text label */