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
This commit is contained in:
Raphaël Jakse
parent
f77cf3197e
commit
289d879781
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 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">×</span>
|
||||
</h2>
|
||||
<div id="prefs">
|
||||
<div class="modal-header">
|
||||
<h1 data-l10n="text-content">Settings</h1>
|
||||
<button class="modal-button" id="btn-settings-close">×</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue