Skip to content

Commit

Permalink
impr(settings): optimised tags 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 b8e6f8d commit 8b9ff44
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 60 deletions.
5 changes: 5 additions & 0 deletions frontend/src/styles/popups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1573,6 +1573,11 @@
}
}

#tagsEdit form {
display: grid;
gap: 1rem;
}

#editProfilePopup {
width: 100%;
max-width: 600px;
Expand Down
22 changes: 12 additions & 10 deletions frontend/src/ts/pages/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -792,21 +792,23 @@ function refreshTagsSettingsSection(): void {
// }
tagsEl.append(`
<div class="buttons tag" id="${tag._id}">
<div class="button tagButton ${tag.active ? "active" : ""}" active="${
<div class="buttons tag" data-id="${tag._id}" data-name="${
tag.name
}" data-display="${tag.display}">
<button class="tagButton ${tag.active ? "active" : ""}" active="${
tag.active
}">
<div class="title">${tag.display}</div>
</div>
<div class="clearPbButton button">
${tag.display}
</button>
<button class="clearPbButton">
<i class="fas fa-crown fa-fw"></i>
</div>
<div class="editButton button">
</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
53 changes: 25 additions & 28 deletions frontend/src/ts/popups/edit-tags-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,27 @@ export function show(action: string, id?: string, name?: string): void {
if (action === "add") {
$("#tagsWrapper #tagsEdit").attr("action", "add");
$("#tagsWrapper #tagsEdit .title").html("Add new tag");
$("#tagsWrapper #tagsEdit .button").html(`add`);
$("#tagsWrapper #tagsEdit button").html(`add`);
$("#tagsWrapper #tagsEdit input").val("");
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
} else if (action === "edit" && id && name) {
$("#tagsWrapper #tagsEdit").attr("action", "edit");
$("#tagsWrapper #tagsEdit").attr("tagid", id);
$("#tagsWrapper #tagsEdit .title").html("Edit tag name");
$("#tagsWrapper #tagsEdit .button").html(`save`);
$("#tagsWrapper #tagsEdit button").html(`save`);
$("#tagsWrapper #tagsEdit input").val(name);
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
} else if (action === "remove" && id && name) {
$("#tagsWrapper #tagsEdit").attr("action", "remove");
$("#tagsWrapper #tagsEdit").attr("tagid", id);
$("#tagsWrapper #tagsEdit .title").html("Delete tag " + name);
$("#tagsWrapper #tagsEdit .button").html(`delete`);
$("#tagsWrapper #tagsEdit button").html(`delete`);
$("#tagsWrapper #tagsEdit input").addClass("hidden");
} else if (action === "clearPb" && id && name) {
$("#tagsWrapper #tagsEdit").attr("action", "clearPb");
$("#tagsWrapper #tagsEdit").attr("tagid", id);
$("#tagsWrapper #tagsEdit .title").html("Clear PB for tag " + name);
$("#tagsWrapper #tagsEdit .button").html(`clear`);
$("#tagsWrapper #tagsEdit button").html(`clear`);
$("#tagsWrapper #tagsEdit input").addClass("hidden");
}

Expand All @@ -52,8 +52,12 @@ export function show(action: string, id?: string, name?: string): void {
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 125, () => {
console.log("focusing");
$("#tagsWrapper #tagsEdit input").trigger("focus");
const input = $("#tagsWrapper #tagsEdit input");
if (!input.hasClass("hidden")) {
$("#tagsWrapper #tagsEdit input").trigger("focus");
} else {
$("#tagsWrapper").trigger("focus");
}
});
}
}
Expand Down Expand Up @@ -170,16 +174,11 @@ $("#tagsWrapper").on("click", (e) => {
}
});

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

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

$(".pageSettings .section.tags").on("click", ".addTagButton", () => {
show("add");
});
Expand All @@ -188,11 +187,8 @@ $(".pageSettings .section.tags").on(
"click",
".tagsList .tag .editButton",
(e) => {
const tagid = $(e.currentTarget).parent(".tag").attr("id");
const name = $(e.currentTarget)
.siblings(".tagButton")
.children(".title")
.text();
const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
const name = $(e.currentTarget).parent(".tag").attr("data-display");
show("edit", tagid, name);
}
);
Expand All @@ -201,11 +197,8 @@ $(".pageSettings .section.tags").on(
"click",
".tagsList .tag .clearPbButton",
(e) => {
const tagid = $(e.currentTarget).parent(".tag").attr("id");
const name = $(e.currentTarget)
.siblings(".tagButton")
.children(".title")
.text();
const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
const name = $(e.currentTarget).parent(".tag").attr("data-display");
show("clearPb", tagid, name);
}
);
Expand All @@ -214,13 +207,17 @@ $(".pageSettings .section.tags").on(
"click",
".tagsList .tag .removeButton",
(e) => {
const tagid = $(e.currentTarget).parent(".tag").attr("id");
const name = $(e.currentTarget)
.siblings(".tagButton")
.children(".title")
.text();
const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
const name = $(e.currentTarget).parent(".tag").attr("data-display");
show("remove", tagid, name);
}
);

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

Skeleton.save(wrapperId);
25 changes: 7 additions & 18 deletions frontend/static/html/pages/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,25 +59,25 @@
give you a role.
</div>
<div class="buttons">
<div class="button getLinkAndGoToOauth">Link with Discord</div>
<button class="getLinkAndGoToOauth">link</button>
</div>
<div class="info hidden">
<div>
<i class="fas fa-check"></i>
Your accounts are linked!
</div>
<div id="discordButtonGroup">
<div
<button
id="updateDiscordAvatarButton"
class="textButton getLinkAndGoToOauth"
>
<i class="fas fa-sync-alt" aria-hidden="true"></i>
Update avatar
</div>
<div id="unlinkDiscordButton" class="textButton">
</button>
<button id="unlinkDiscordButton" class="textButton">
<i class="fas fa-unlink" aria-hidden="true"></i>
Unlink
</div>
</button>
</div>
</div>
</div>
Expand All @@ -92,19 +92,8 @@
remain active until you deactivate them, or refresh the page.
</div>
<div class="tagsListAndButton">
<div class="tagsList">
<div class="tag" id="0">
<div class="active">
<i class="fas fa-check-square"></i>
</div>
<div class="title">staggered</div>
<div class="editButton"><i class="fas fa-pen"></i></div>
<div class="removeButton">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="button addTagButton fullWidth">add tag</div>
<div class="tagsList"></div>
<button class="addTagButton fullWidth">add tag</button>
</div>
</div>
<div class="section presets">
Expand Down
10 changes: 6 additions & 4 deletions frontend/static/html/popups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -783,11 +783,13 @@
<div class="quotes"></div>
</div>
</div>
<div id="tagsWrapper" class="popupWrapper hidden">
<div id="tagsWrapper" class="popupWrapper hidden" tabindex="-1">
<div id="tagsEdit" action="" tagid="">
<div class="title"></div>
<input type="text" title="tag" />
<div class="button"><i class="fas fa-plus"></i></div>
<form>
<div class="title"></div>
<input type="text" title="tag" />
<button type="submit"></button>
</form>
</div>
</div>
<div id="streakHourOffsetPopupWrapper" class="popupWrapper hidden">
Expand Down

0 comments on commit 8b9ff44

Please sign in to comment.