From: Raphaël Jakse <raphael.trivabble@jakse.fr>
Date: Mon, 5 Oct 2020 19:35:02 +0000 (+0200)
Subject: Improve the settings dialog
X-Git-Url: https://secure.softndesign.org/git/?a=commitdiff_plain;h=289d87978109ea746973ce7fe31955fe46301bb4;p=trivabble.git

Improve the settings dialog

- Presentation a bit clearer.
- closing with escape now uses an event handler on window instead of body.
  Chromium didn't like the latter.
- Improve the keyboard navigation
---

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index bc9e000..d46f707 100644
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -205,8 +205,8 @@ msgstr "Fenêtre de configuration"
 msgid  "Look at:"
 msgstr "Regardez ici :"
 
-msgid  "Double tap duration"
-msgstr "Durée de la double tape"
+msgid  "Double tap duration:"
+msgstr "Durée de la double tape :"
 
 msgid  "(slow)"
 msgstr "(lent)"
@@ -214,8 +214,8 @@ msgstr "(lent)"
 msgid  "(fast)"
 msgstr "(rapide)"
 
-msgid  "Flash light duration"
-msgstr "Durée du flash laser"
+msgid  "Flash light duration:"
+msgstr "Durée du flash laser :"
 
 msgid  "Flash light color"
 msgstr "Couleur du flash laser"
diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 49ad290..c0d9408 100644
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -204,7 +204,7 @@ msgid  "Configuration window"
 msgid  "Look at:"
 msgstr ""
 
-msgid  "Double tap duration"
+msgid  "Double tap duration:"
 msgstr ""
 
 msgid  "(slow)"
@@ -213,7 +213,7 @@ msgstr ""
 msgid  "(fast)"
 msgstr ""
 
-msgid  "Flash light duration"
+msgid  "Flash light duration:"
 msgstr ""
 
 msgid  "Flash light color"
diff --git a/public/index.html b/public/index.html
index 5735712..cfe7f75 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,7 @@
         <link rel="icon" type="image/png" href="logo/192.png" sizes="192x192" />
     </head>
     <body>
-        <div id="menu">
+        <div id="menu" class="panel">
             <button data-l10n="text-content" id="join-game">Join adversaries</button>
             <p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span><br /><button class="minibutton" id="change-name" data-l10n="text-content">Change</button></p>
             <button id="clear-game" data-l10n="text-content">Put back all the tiles&#10;in the bag</button>
@@ -48,21 +48,46 @@
             </div>
         </div>
 
-        <div class="modal" id="modal-settings-dialog">
+        <section class="modal" id="modal-settings-dialog">
             <div class="modal-content">
-                <h2>
-                    <span data-l10n="text-content">Settings</span>
-                    <span class="modal-button" id="btn-settings-close">&#215;</span>
-        		</h2>
-                <div id="prefs">
+                <div class="modal-header">
+                    <h1 data-l10n="text-content">Settings</h1>
+                    <button class="modal-button" id="btn-settings-close">&#215;</button>
+                </div>
+                <div>
                     <p><label><input type="checkbox" id="tiles-sound" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                     <p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
-		            <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
-		            <p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
-                    <p id="flash-light-color-p"><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
-		        </div>
+                </div>
+                <div>
+                    <p>
+                        <label for="double-tap-duration" data-l10n="text-content">Double tap duration:</label>
+                        <span class="span-range">
+                            <span data-l10n="text-content">(fast)</span>
+                            <input type="range" min="0" max="0" id="double-tap-duration" />
+                            <span data-l10n="text-content">(slow)</span><br/>
+                        </span>
+                    </p>
+                </div>
+                <div>
+                    <p>
+                        <label for="flash-light-duration" data-l10n="text-content">Flash light duration:</label>
+                        <span class="span-range">
+                            <span data-l10n="text-content">(fast)</span>
+                            <input type="range" min="0" max="0" id="flash-light-duration" />
+                            <span data-l10n="text-content">(slow)</span>
+                        </span>
+                    </p>
+                </div>
+                <div>
+                    <p id="flash-light-color-p">
+                        <label>
+                            <input type="color" size="6" id="flash-light-color" />
+                            <span data-l10n="text-content">Flash light color</span>
+                        </label>
+                    </p>
+                </div>
             </div>
-        </div>
+        </section>
 
     	<div id="content">
             <table id="board">
@@ -73,7 +98,7 @@
             </div>
         </div>
 
-        <div id="panel">
+        <div id="panel" class="panel">
             <button id="btn-settings" data-l10n="text-content">Settings</button>
             <div id="bag"></div>
             <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
diff --git a/public/trivabble.css b/public/trivabble.css
index b350a44..960a2ec 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -148,22 +148,26 @@ body {
     flex-direction:column;
 }
 
+
 button {
+    border-radius: 2px;
+}
+
+.panel button {
     margin: 0.25em 0;
     min-height:3em;
     background: #CFC;
     border: 1px solid #8C8;
-    border-radius: 2px;
     cursor: pointer;
     transition: 0.2s;
 }
 
-button:hover {
+.panel button:hover {
     background: #FD7;
     border: 1px solid #CA5;
 }
 
-button[disabled=disabled], button:disabled {
+.panel button[disabled=disabled], .panel button:disabled {
     background:#AFA;
     cursor:not-allowed;
 }
@@ -358,7 +362,7 @@ td.blink {
     font-size:small
 }
 
-.minibutton {
+.panel .minibutton {
     padding:0.25ex 0.5ex;
     min-height:0;
     font-size:small
@@ -414,7 +418,7 @@ td.blink {
     min-width:2.5em;
 }
 
-#participants .score-cell > span:hover, .turn-cell button:hover {
+#participants .score-cell > span:hover, #participants .turn-cell button:hover {
     cursor:pointer;
     background:#FFA
 }
@@ -443,7 +447,7 @@ td.blink {
     font-style:italic;
 }
 
-.turn-cell button {
+#participants .turn-cell button {
     padding:0 2px;
     background:white;
     min-height:1em;
@@ -452,7 +456,7 @@ td.blink {
     display:flex;
 }
 
-.turn-cell img {
+#participants .turn-cell img {
     width:1em;
     vertical-align: middle;
 }
@@ -476,18 +480,15 @@ td.blink {
     }
 }
 
-#prefs {
-    margin:1ex 0 0 0;
-}
-
-#prefs p {
+#modal-settings-dialog p {
     margin:0;
     padding:0;
-    font-size:small
+    font-size:small;
 }
 
-#prefs #lang-selectioninput, #prefs label {
-    vertical-align:middle
+#modal-settings-dialog label span, #modal-settings-dialog label input {
+    display: inline-block;
+    vertical-align: middle;
 }
 
 #lang-selection {
@@ -529,6 +530,16 @@ td.blink {
     transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
     z-index: 1;
 }
+
+.modal-header {
+    display:flex;
+    flex-direction:row;
+}
+
+.modal-header h1 {
+    flex:1;
+}
+
 .modal-content {
     position: absolute;
     top: 50%;
@@ -539,11 +550,19 @@ td.blink {
     width: 24rem;
     border-radius: 0.3rem;
 }
-.modal-content h2 {
+
+#btn-settings-close {
+    font-weight: bold;
+    text-align: center;
+    border: 0;
+}
+
+.modal-content h1 {
     margin: 0px;
     font-weight: bold;
     font-size: large;
 }
+
 .modal-button {
     float: right;
     width: 1.5rem;
@@ -565,11 +584,29 @@ td.blink {
     transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
 }
 
+.modal-content > div:not(:last-child) {
+    margin-bottom: 1ex;
+}
+
+.span-range {
+    display:block;
+    text-align:center;
+}
+
+.span-range > span {
+    font-size:smaller;
+}
+
+.span-range > span, .span-range > input {
+    display:inline-block;
+    vertical-align: middle;
+}
+
 .alert {
     z-index: 2;
 }
 
-#btn-settings {
+#panel #btn-settings {
     background:lightgray;
     color:black;
     font-size:small;
@@ -617,7 +654,7 @@ td.blink {
     align-items:center;
 }
 
-#next-help-msg {
+button#next-help-msg {
     border:0;
     background:none;
     color:#333;
@@ -632,7 +669,7 @@ td.blink {
     padding:0;
 }
 
-#next-help-msg:hover {
+button#next-help-msg:hover {
     background:#CCC;
 }
 
diff --git a/public/trivabble.js b/public/trivabble.js
index 9d77112..e499028 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -2148,7 +2148,9 @@
     }
 
     function showSettings() {
-        document.querySelector(".modal").classList.add("show-modal");
+        const modal = document.querySelector(".modal");
+        modal.classList.add("show-modal");
+        modal.querySelector("button").focus();
     }
 
     function hideSettings() {
@@ -2179,7 +2181,7 @@
         document.getElementById("btn-settings").onclick = showSettings;
         document.getElementById("btn-settings-close").onclick = hideSettings;
         document.getElementById("next-help-msg").onclick = nextHelpMessage;
-        document.body.addEventListener("keydown", function (e) {
+        window.addEventListener("keydown", function (e) {
             if (e.key === 'Escape') {
                 document.querySelector(".modal").classList.remove("show-modal");
             }