Added indication in the desktop UI for back-end connectivity (#711)

* Changed the styling of the link that takes a user to the settings page into a button
* added an indicator that shows if a user is connected to the server or not
* made a class name more descriptive and also made the text in first run message more intuitive
* changed the command to install dependencies in the README.md
* changed the class name of the first run message text to be more descriptive
* added icons in the desktop UI that shows if a file is synced successfully or not
* made the link class name in the homepage more descriptive
* fixed the hover issue on status box in the chat header pane
* fixed hovering issue on status box on macOS
This commit is contained in:
Olatoyan George
2024-04-23 12:13:48 +01:00
committed by GitHub
parent 419b044ac5
commit ad59180fb8
8 changed files with 140 additions and 7 deletions

View File

@@ -69,12 +69,15 @@ function makeFileElement(file) {
let buttonContainer = document.createElement("div");
buttonContainer.classList.add("remove-button-container");
let removeFileButton = document.createElement("button");
let fileSyncedImage = document.createElement("img")
fileSyncedImage.classList.add("file-synced-image");
removeFileButton.classList.add("remove-file-button");
removeFileButton.innerHTML = "🗑️";
removeFileButton.addEventListener("click", () => {
removeFile(file.path);
});
buttonContainer.appendChild(removeFileButton);
buttonContainer.insertAdjacentElement("afterbegin",fileSyncedImage);
fileElement.appendChild(buttonContainer);
return fileElement;
}
@@ -150,6 +153,7 @@ async function handleFileOpen(type) {
}
window.updateStateAPI.onUpdateState((event, state) => {
const fileSyncedImage = document.querySelectorAll(".file-synced-image");
console.log("state was updated", state);
loadingBar.style.display = 'none';
let syncStatusElement = document.getElementById("sync-status");
@@ -157,8 +161,19 @@ window.updateStateAPI.onUpdateState((event, state) => {
nextSyncTime = new Date();
nextSyncTime.setMinutes(Math.ceil((nextSyncTime.getMinutes() + 1) / 10) * 10);
if (state.completed == false) {
fileSyncedImage.forEach((image)=> {
image.style.display = "block"
image.src = "./assets/icons/file-not-synced.svg"
})
if (state.error) syncStatusElement.innerHTML = state.error;
return;
} else {
fileSyncedImage.forEach((image)=> {
image.style.display = "block"
image.src = "./assets/icons/file-synced.svg"
})
}
const options = { hour: '2-digit', minute: '2-digit' };
syncStatusElement.innerHTML = `⏱️ Synced at ${currentTime.toLocaleTimeString(undefined, options)}. Next sync at ${nextSyncTime.toLocaleTimeString(undefined, options)}.`;