Skip to content

Commit

Permalink
impr(settings): optimise preset section for keyboard navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miodec
Miodec committed Oct 18, 2023
1 parent 8b9ff44 commit 894ff4b
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 48 deletions.
3 changes: 2 additions & 1 deletion frontend/src/styles/popups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1573,7 +1573,8 @@
}
}

#tagsEdit form {
#tagsEdit form,
#presetEdit form {
display: grid;
gap: 1rem;
}
Expand Down
18 changes: 8 additions & 10 deletions frontend/src/ts/pages/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,16 +824,14 @@ function refreshPresetsSettingsSection(): void {
const presetsEl = $(".pageSettings .section.presets .presetsList").empty();
DB.getSnapshot()?.presets?.forEach((preset: MonkeyTypes.Preset) => {
presetsEl.append(`
<div class="buttons preset" id="${preset._id}">
<div class="button presetButton">
<div class="title">${preset.display}</div>
</div>
<div class="editButton button">
<div class="buttons preset" data-id="${preset._id}" data-name="${preset.name}" data-display="${preset.display}">
<button class="presetButton">${preset.display}</button>
<button class="editButton">
<i class="fas fa-pen fa-fw"></i>
</div>
<div class="removeButton button">
</button>
<button class="removeButton">
<i class="fas fa-trash fa-fw"></i>
</div>
</button>
</div>
`);
Expand Down Expand Up @@ -1032,7 +1030,7 @@ $(".pageSettings .section.tags").on(
".tagsList .tag .tagButton",
(e) => {
const target = e.currentTarget;
const tagid = $(target).parent(".tag").attr("id") as string;
const tagid = $(target).parent(".tag").attr("data-id") as string;
TagController.toggle(tagid);
$(target).toggleClass("active");
}
Expand All @@ -1043,7 +1041,7 @@ $(".pageSettings .section.presets").on(
".presetsList .preset .presetButton",
(e) => {
const target = e.currentTarget;
const presetid = $(target).parent(".preset").attr("id") as string;
const presetid = $(target).parent(".preset").attr("data-id") as string;
console.log("Applying Preset");
configEventDisabled = true;
PresetController.apply(presetid);
Expand Down
37 changes: 22 additions & 15 deletions frontend/src/ts/popups/edit-preset-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ export function show(action: string, id?: string, name?: string): void {
if (action === "add") {
$("#presetWrapper #presetEdit").attr("action", "add");
$("#presetWrapper #presetEdit .title").html("Add new preset");
$("#presetWrapper #presetEdit .button").html(`add`);
$("#presetWrapper #presetEdit button").html(`add`);
$("#presetWrapper #presetEdit input.text").val("");
$("#presetWrapper #presetEdit input.text").removeClass("hidden");
$("#presetWrapper #presetEdit label").addClass("hidden");
} else if (action === "edit" && id && name) {
$("#presetWrapper #presetEdit").attr("action", "edit");
$("#presetWrapper #presetEdit").attr("presetid", id);
$("#presetWrapper #presetEdit .title").html("Edit preset");
$("#presetWrapper #presetEdit .button").html(`save`);
$("#presetWrapper #presetEdit button").html(`save`);
$("#presetWrapper #presetEdit input.text").val(name);
$("#presetWrapper #presetEdit input.text").removeClass("hidden");
$("#presetWrapper #presetEdit label input").prop("checked", false);
Expand All @@ -39,7 +39,7 @@ export function show(action: string, id?: string, name?: string): void {
$("#presetWrapper #presetEdit").attr("action", "remove");
$("#presetWrapper #presetEdit").attr("presetid", id);
$("#presetWrapper #presetEdit .title").html("Delete preset " + name);
$("#presetWrapper #presetEdit .button").html("Delete");
$("#presetWrapper #presetEdit button").html("Delete");
$("#presetWrapper #presetEdit input.text").addClass("hidden");
$("#presetWrapper #presetEdit label").addClass("hidden");
}
Expand All @@ -50,7 +50,12 @@ export function show(action: string, id?: string, name?: string): void {
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 125, () => {
$("#presetWrapper #presetEdit input").trigger("focus");
const input = $("#presetWrapper #presetEdit input");
if (!input.hasClass("hidden")) {
$("#presetWrapper #presetEdit input").trigger("focus");
} else {
$("#presetWrapper").trigger("focus");
}
});
}
}
Expand Down Expand Up @@ -169,30 +174,32 @@ $("#presetWrapper").on("click", (e) => {
}
});

$("#presetWrapper #presetEdit .button").on("click", () => {
$("#presetWrapper #presetEdit form").on("submit", (e) => {
e.preventDefault();
apply();
});

$("#presetWrapper #presetEdit input").on("keypress", (e) => {
if (e.key === "Enter") {
apply();
}
});

$(".pageSettings .section.presets").on("click", ".addPresetButton", () => {
show("add");
});

$(".pageSettings .section.presets").on("click", ".editButton", (e) => {
const presetid = $(e.currentTarget).parent(".preset").attr("id");
const name = $(e.currentTarget).siblings(".button").children(".title").text();
const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
const name = $(e.currentTarget).parent(".preset").attr("data-display");
show("edit", presetid, name);
});

$(".pageSettings .section.presets").on("click", ".removeButton", (e) => {
const presetid = $(e.currentTarget).parent(".preset").attr("id");
const name = $(e.currentTarget).siblings(".button").children(".title").text();
const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
const name = $(e.currentTarget).parent(".preset").attr("data-display");
show("remove", presetid, name);
});

$(document).on("keydown", (event) => {
if (event.key === "Escape" && isPopupVisible(wrapperId)) {
hide();
event.preventDefault();
}
});

Skeleton.save(wrapperId);
16 changes: 2 additions & 14 deletions frontend/static/html/pages/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,20 +106,8 @@
edit your preset if you make any changes - they don't save on their own.
</div>
<div class="presetsListAndButton">
<div class="presetsList">
<div class="buttons preset" id="0">
<div class="presetButton button">
<div class="title">staggered</div>
</div>
<div class="editButton button">
<i class="fas fa-pen"></i>
</div>
<div class="removeButton button">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="button addPresetButton fullWidth">add preset</div>
<div class="presetsList"></div>
<button class="addPresetButton fullWidth">add preset</button>
</div>
</div>
<div class="section">
Expand Down
18 changes: 10 additions & 8 deletions frontend/static/html/popups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -817,15 +817,17 @@
<div class="button confirmButton"><i class="fas fa-check"></i></div>
</div>
</div>
<div id="presetWrapper" class="popupWrapper hidden">
<div id="presetWrapper" class="popupWrapper hidden" tabindex="-1">
<div id="presetEdit" action="" presetid="">
<div class="title"></div>
<input type="text" class="text" title="presets" />
<label class="checkbox">
<input type="checkbox" />
Change preset to current settings
</label>
<div class="button"><i class="fas fa-plus"></i></div>
<form>
<div class="title"></div>
<input type="text" class="text" title="presets" />
<label class="checkbox">
<input type="checkbox" />
Change preset to current settings
</label>
<button type="submit">add</button>
</form>
</div>
</div>
<div id="shareCustomThemeWrapper" class="popupWrapper hidden">
Expand Down

0 comments on commit 894ff4b

Please sign in to comment.