monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 15:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use form and button type submit in simple popups to improve tab navigation

Browse source
This commit is contained in:
Miodec 2023-09-26 17:14:39 +01:00
parent 2aad78d262
commit bebf7b6f52
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/styles/popups.scss
View file

@ -415,10 +415,13 @@
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
width: 400px;
form {
display: grid;
gap: 1rem;
}
.title {
font-size: 1.5rem;
color: var(--sub-color);

25
frontend/src/ts/popups/simple-popups.ts
View file

@ -101,10 +101,12 @@ class SimplePopup {
}
reset(): void {
this.element.html(`
<form>
<div class="title"></div>
<div class="inputs"></div>
<div class="text"></div>
<div class="button"></div>`);
<button type="submit" class="submitButton"></button>
</form>`);
}
init(): void {
@ -119,9 +121,9 @@ class SimplePopup {
this.initInputs();
if (this.buttonText === "") {
el.find(".button").remove();
el.find(".submitButton").remove();
} else {
el.find(".button").text(this.buttonText);
el.find(".submitButton").text(this.buttonText);
}
if (this.text === "") {
@ -247,16 +249,16 @@ class SimplePopup {
disableInputs(): void {
$("#simplePopup input").prop("disabled", true);
$("#simplePopup button").prop("disabled", true);
$("#simplePopup textarea").prop("disabled", true);
$("#simplePopup .checkbox").addClass("disabled");
$("#simplePopup .button").addClass("disabled");
}
enableInputs(): void {
$("#simplePopup input").prop("disabled", false);
$("#simplePopup button").prop("disabled", false);
$("#simplePopup textarea").prop("disabled", false);
$("#simplePopup .checkbox").removeClass("disabled");
$("#simplePopup .button").removeClass("disabled");
}
show(parameters: string[] = [], noAnimation = false): void {
@ -332,19 +334,12 @@ $("#simplePopupWrapper").on("mousedown", (e) => {
}
});
$("#popups").on("click", "#simplePopupWrapper .button", () => {
$("#popups").on("submit", "#simplePopupWrapper form", (e) => {
e.preventDefault();
const id = $("#simplePopup").attr("popupId") ?? "";
list[id].exec();
});
$("#popups").on("keyup", "#simplePopupWrapper input", (e) => {
if (e.key === "Enter") {
e.preventDefault();
const id = $("#simplePopup").attr("popupId") ?? "";
list[id].exec();
}
});
type ReauthMethod = "passwordOnly" | "passwordFirst";
interface ReauthSuccess {
@ -1813,3 +1808,5 @@ $(document).on("keydown", (event) => {
});
Skeleton.save(wrapperId);
console.log(list);