diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 51a73e2e..2ce1a1e8 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -167,6 +167,14 @@ function handleEntryStatus(item, element, setToRead) {
}
}
+// Add a span-icon with a `label` to `element` as a child
+function addIcon(element, label) {
+ const span = document.createElement('span');
+ span.classList.add('icon-label');
+ span.textContent = label;
+ element.appendChild(span);
+}
+
// Change the entry status to the opposite value.
function toggleEntryStatus(element, toasting) {
const entryID = parseInt(element.dataset.id, 10);
@@ -193,7 +201,8 @@ function toggleEntryStatus(element, toasting) {
}
}
- link.innerHTML = iconElement.innerHTML + '' + label + '';
+ link.innerHTML = iconElement.innerHTML;
+ addIcon(link, label);
link.dataset.value = newStatus;
if (element.classList.contains("item-status-" + currentStatus)) {
@@ -258,11 +267,13 @@ function saveEntry(element, toasting) {
return;
}
- element.innerHTML = '' + element.dataset.labelLoading + '';
+ element.textContent = "";
+ addIcon(element, element.dataset.labelLoading);
const request = new RequestBuilder(element.dataset.saveUrl);
request.withCallback(() => {
- element.innerHTML = '' + element.dataset.labelDone + '';
+ element.textContent = "";
+ addIcon(element, element.dataset.labelDone);
element.dataset.completed = true;
if (toasting) {
const iconElement = document.querySelector("template#icon-save");
@@ -288,7 +299,8 @@ function toggleBookmark(parentElement, toasting) {
return;
}
- element.innerHTML = '' + element.dataset.labelLoading + '';
+ element.textContent = "";
+ addIcon(element, element.dataset.labelLoading);
const request = new RequestBuilder(element.dataset.bookmarkUrl);
request.withCallback(() => {
@@ -310,7 +322,8 @@ function toggleBookmark(parentElement, toasting) {
}
}
- element.innerHTML = iconElement.innerHTML + '' + label + '';
+ element.innerHTML = iconElement.innerHTML;
+ addIcon(element, label);
element.dataset.value = newStarStatus;
});
request.execute();
@@ -328,7 +341,7 @@ function handleFetchOriginalContent() {
}
const previousElement = element.cloneNode(true);
- element.innerHTML = '' + element.dataset.labelLoading + '';
+ addIcon(element, element.dataset.labelLoading);
const request = new RequestBuilder(element.dataset.fetchContentUrl);
request.withCallback((response) => {
@@ -615,7 +628,8 @@ function showToast(label, iconElement) {
const toastMsgElement = document.getElementById("toast-msg");
if (toastMsgElement) {
- toastMsgElement.innerHTML = iconElement.innerHTML + '' + label + '';
+ toastMsgElement.innerHTML = iconElement.innerHTML;
+ addIcon(toastMsgElement, label);
const toastElementWrapper = document.getElementById("toast-wrapper");
if (toastElementWrapper) {