Skip to content

Commit c887f0b

Browse files
regsebregseb
committed
fix: Show tooltip in dialog (for mobile).
1 parent a5a375e commit c887f0b

File tree

10 files changed

+254
-82
lines changed

10 files changed

+254
-82
lines changed

‎src/_locales/en/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Remove"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Connecting…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Connection to Kodi successfully established."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Fix address"
316322
},

‎src/_locales/es/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Eliminar"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Conectando…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Conexión a Kodi establecida correctamente."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Fijar la dirección"
316322
},

‎src/_locales/fr/messages.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Supprimer"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Connexion en cours…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Connexion à Kodi établie avec succès."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Corriger l'adresse"
316322
},
@@ -327,7 +333,7 @@
327333
"message": "Popup"
328334
},
329335
"options_popupClipboardInput_textcontent": {
330-
"message": "Pré-remplir le champ de saisie dans la popup avec le contenu du presse-papier"
336+
"message": "Pré-remplir le champ de saisie dans le popup avec le contenu du presse-papier"
331337
},
332338
"options_popupWheelDescription_textcontent": {
333339
"message": "Contrôle du volume avec la molette :"

‎src/_locales/nl/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Verwijderen"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Verbinding wordt gemaakt…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Verbinding met Kodi succesvol tot stand gebracht."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Repareer adres"
316322
},

‎src/_locales/pl/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Usuń"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Łączenie w toku…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Połączenie z Kodi nawiązane pomyślnie."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Popraw adres"
316322
},

‎src/_locales/sk/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,12 @@
311311
"options_serverRemove_alt": {
312312
"message": "Odstrániť"
313313
},
314+
"options_serverResultLoading_title": {
315+
"message": "Pripojenie prebieha…"
316+
},
317+
"options_serverResultConnected_title": {
318+
"message": "Pripojenie k Kodi úspešne nadviazané."
319+
},
314320
"options_serverFix_title": {
315321
"message": "Opravte adresu"
316322
},

‎src/design/style.css‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,19 @@ button.ghost:active:not(:disabled) {
288288
background-color: var(--button-active-background-color);
289289
}
290290

291+
label button {
292+
background-color: transparent;
293+
border-radius: 50%;
294+
min-width: initial;
295+
296+
&:hover:not(:disabled) {
297+
background-color: var(--button-hover-background-color);
298+
}
299+
&:active:not(:disabled) {
300+
background-color: var(--button-active-background-color);
301+
}
302+
}
303+
291304
select {
292305
align-items: center;
293306
appearance: none;
@@ -342,37 +355,42 @@ dialog menu select {
342355
min-width: auto;
343356
}
344357

345-
.error {
358+
dialog.error,
359+
p.error {
346360
background-color: var(--error-background-color);
347361
border-color: var(--error-border-color);
348362
color: var(--error-color);
363+
364+
button,
365+
select {
366+
background-color: color-mix(
367+
in srgb,
368+
var(--error-background-color),
369+
black 20%
370+
);
371+
color: var(--error-color);
372+
}
373+
button:hover:not(:disabled),
374+
button:active:not(:disabled),
375+
select:hover:not(:disabled),
376+
select:active:not(:disabled) {
377+
background-color: color-mix(
378+
in srgb,
379+
var(--error-background-color),
380+
black 30%
381+
);
382+
}
349383
}
350-
.warning {
384+
dialog.warning,
385+
p.warning {
351386
background-color: var(--warning-background-color);
352387
border-color: var(--warning-border-color);
353388
color: var(--warning-color);
354389
}
355-
.error,
356-
.warning {
390+
dialog.error,
391+
p.error,
392+
dialog.warning,
393+
p.warning {
357394
border-style: solid;
358395
border-width: 1px;
359396
}
360-
.error button,
361-
.error select {
362-
background-color: color-mix(
363-
in srgb,
364-
var(--error-background-color),
365-
black 20%
366-
);
367-
color: var(--color);
368-
}
369-
.error button:hover:not(:disabled),
370-
.error button:active:not(:disabled),
371-
.error select:hover:not(:disabled),
372-
.error select:active:not(:disabled) {
373-
background-color: color-mix(
374-
in srgb,
375-
var(--error-background-color),
376-
black 30%
377-
);
378-
}

‎src/options/index.html‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,10 @@ <h3 data-l10n-textcontent="server-title"></h3>
2525
</label>
2626
</summary>
2727
<div id="single">
28-
<label
29-
data-l10n-textcontent="server-address"
30-
data-l10n-title="server-address"
31-
>
28+
<label data-l10n-textcontent="server-address">
3229
{}
33-
<sup
34-
><img src="/design/icon/help-black.svg" alt="help-black"
30+
<sup data-l10n-title="server-address"
31+
><img src="../design/icon/help-black.svg" alt="help-black"
3532
/></sup>
3633
<input
3734
name="address_0"
@@ -42,6 +39,18 @@ <h3 data-l10n-textcontent="server-title"></h3>
4239
spellcheck="false"
4340
data-l10n-placeholder="server-address"
4441
/>
42+
<button class="result field loading" type="button">
43+
<img src="../design/icon/loading-gray.svg" alt="loading-gray" />
44+
<img
45+
src="../design/icon/connected-green.svg"
46+
alt="connected-green"
47+
/>
48+
<img
49+
src="../design/icon/warning-yellow.svg"
50+
alt="warning-yellow"
51+
/>
52+
<img src="../design/icon/invalid-red.svg" alt="invalid-red" />
53+
</button>
4554
</label>
4655
<button class="fix ghost" type="button" data-l10n-title="server-fix">
4756
<img
@@ -82,15 +91,32 @@ <h3 data-l10n-textcontent="server-title"></h3>
8291
<template>
8392
<tr>
8493
<td>
85-
<input
86-
name="address_"
87-
type="text"
88-
required
89-
autocapitalize="off"
90-
autocomplete="off"
91-
spellcheck="false"
92-
data-l10n-placeholder="server-address"
93-
/>
94+
<label>
95+
<input
96+
name="address_"
97+
type="text"
98+
autocapitalize="off"
99+
autocomplete="off"
100+
required
101+
spellcheck="false"
102+
data-l10n-placeholder="server-address"
103+
/>
104+
<button class="result field loading" type="button">
105+
<img
106+
src="../design/icon/loading-gray.svg"
107+
alt="loading-gray"
108+
/>
109+
<img
110+
src="../design/icon/connected-green.svg"
111+
alt="connected-green"
112+
/>
113+
<img
114+
src="../design/icon/warning-yellow.svg"
115+
alt="warning-yellow"
116+
/>
117+
<img src="../design/icon/invalid-red.svg" alt="invalid-red" />
118+
</button>
119+
</label>
94120
<button
95121
class="fix ghost"
96122
type="button"
@@ -104,15 +130,17 @@ <h3 data-l10n-textcontent="server-title"></h3>
104130
</button>
105131
</td>
106132
<td>
107-
<input
108-
name="name_"
109-
type="text"
110-
required
111-
autocapitalize="off"
112-
autocomplete="off"
113-
spellcheck="false"
114-
data-l10n-placeholder="server-name"
115-
/>
133+
<label>
134+
<input
135+
name="name_"
136+
type="text"
137+
autocapitalize="off"
138+
autocomplete="off"
139+
required
140+
spellcheck="false"
141+
data-l10n-placeholder="server-name"
142+
/>
143+
</label>
116144
</td>
117145
<td>
118146
<button
@@ -249,6 +277,10 @@ <h3 data-l10n-textcontent="youtube-title"></h3>
249277
</div>
250278
</form>
251279

280+
<dialog id="dialoghelp" closedby="any">
281+
<p></p>
282+
</dialog>
283+
252284
<script src="script.js" type="module"></script>
253285
</body>
254286
</html>

0 commit comments

Comments
 (0)