From ad59180fb81498ad5708f3bdff1d546f5657ed82 Mon Sep 17 00:00:00 2001 From: Olatoyan George <120045252+Olatoyan@users.noreply.github.com> Date: Tue, 23 Apr 2024 12:13:48 +0100 Subject: [PATCH] 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 --- src/interface/desktop/README.md | 10 +++- .../desktop/assets/icons/file-not-synced.svg | 9 +++ .../desktop/assets/icons/file-synced.svg | 9 +++ src/interface/desktop/assets/khoj.css | 30 ++++++++++ src/interface/desktop/chat.html | 55 +++++++++++++++++-- src/interface/desktop/config.html | 8 +++ src/interface/desktop/renderer.js | 15 +++++ src/interface/desktop/utils.js | 11 ++++ 8 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 src/interface/desktop/assets/icons/file-not-synced.svg create mode 100644 src/interface/desktop/assets/icons/file-synced.svg diff --git a/src/interface/desktop/README.md b/src/interface/desktop/README.md index f7a8226d..c2f1be0d 100644 --- a/src/interface/desktop/README.md +++ b/src/interface/desktop/README.md @@ -1,17 +1,25 @@ # Run it locally + ## Prerequisites + Install the runtime dependencies. This command should install all dev dependencies. + ```bash -yarn add +yarn install ``` Run the application + ```bash yarn start ``` + # Deploying the Electron App + ## Prerequisites + Install the ToDesktop CLI. Full documentation can be found here: https://www.npmjs.com/package/@todesktop/cli + ```bash yarn global add @todesktop/cli ``` diff --git a/src/interface/desktop/assets/icons/file-not-synced.svg b/src/interface/desktop/assets/icons/file-not-synced.svg new file mode 100644 index 00000000..227d51d3 --- /dev/null +++ b/src/interface/desktop/assets/icons/file-not-synced.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/interface/desktop/assets/icons/file-synced.svg b/src/interface/desktop/assets/icons/file-synced.svg new file mode 100644 index 00000000..c584a86d --- /dev/null +++ b/src/interface/desktop/assets/icons/file-synced.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/interface/desktop/assets/khoj.css b/src/interface/desktop/assets/khoj.css index ec65ec56..521936b8 100644 --- a/src/interface/desktop/assets/khoj.css +++ b/src/interface/desktop/assets/khoj.css @@ -89,8 +89,38 @@ nav.khoj-nav { grid-auto-flow: column; grid-gap: 32px; justify-self: right; + align-items: center; + } + + .khoj-status-box { + display: flex; + align-items: center; + justify-content: center; + min-width: 52px; + gap: 4px; + -webkit-app-region: no-drag; } + .khoj-status-box .khoj-status-connected { + height: 12px; + width: 12px; + border-radius: 50%; + background-color: rgb(90, 235, 90); + } + .khoj-status-box .khoj-status-not-connected { + height: 12px; + width: 12px; + border-radius: 50%; + background-color: rgb(235, 90, 90); + } + + .khoj-status-box .khoj-status-text { + display: none; +} +.khoj-status-box:hover .khoj-status-text { + display: block; + } + a.khoj-nav { display: flex; align-items: center; diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index d796d930..2835f01d 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -888,10 +888,10 @@ } function renderFirstRunSetupMessage() { - first_run_message = `Hi 👋🏾, to get started: + first_run_message = `

Hi 👋🏾, to get started:

    -
  1. Generate an API token in the Khoj Web settings
    2. -
  2. Paste it into the API Key field in the Khoj Desktop settings
    3. +
  3. Generate an API token Khoj Web settings
    4. +
  4. Paste it into the API Key field Khoj Desktop settings
` .trim() .replace(/(\r\n|\n|\r)/gm, ""); @@ -1715,10 +1715,53 @@ box-shadow: 0 0 16px var(--primary); } + .first-run-message-heading { + font-size: 20px; + font-weight: 300; + line-height: 1.5em; + color: var(--main-text-color); + margin: 0; + padding: 10px; + } + + .first-run-message-text { + font-size: 18px; + font-weight: 300; + line-height: 1.5em; + color: var(--main-text-color); + margin: 0; + padding-bottom: 25px; + } + a.inline-chat-link { - color: #475569; - text-decoration: none; - border-bottom: 1px dotted #475569; + display: block; + text-align: center; + font-size: 14px; + color: #fff; + padding: 6px 15px; + border-radius: 999px; + text-decoration: none; + background-color: rgba(71, 85, 105, 0.6); + transition: background-color 0.3s ease-in-out; + } + + a.inline-chat-link:hover { + background-color: #475569; + } + a.first-run-message-link { + display: block; + text-align: center; + font-size: 14px; + color: #fff; + padding: 6px 15px; + border-radius: 999px; + text-decoration: none; + background-color: rgba(71, 85, 105, 0.6); + transition: background-color 0.3s ease-in-out; + } + + a.first-run-message-link:hover { + background-color: #475569; } a.reference-link { diff --git a/src/interface/desktop/config.html b/src/interface/desktop/config.html index d6a3e702..077ea73d 100644 --- a/src/interface/desktop/config.html +++ b/src/interface/desktop/config.html @@ -316,6 +316,14 @@ div.remove-button-container { text-align: right; + display: flex; + margin-left: auto; + gap: 8px; + } + + .file-synced-image{ + width: 20px; + display: none; } button.remove-folder-button, diff --git a/src/interface/desktop/renderer.js b/src/interface/desktop/renderer.js index 4b4ea3fe..a571bb3d 100644 --- a/src/interface/desktop/renderer.js +++ b/src/interface/desktop/renderer.js @@ -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)}.`; diff --git a/src/interface/desktop/utils.js b/src/interface/desktop/utils.js index df05f1c0..49872dcf 100644 --- a/src/interface/desktop/utils.js +++ b/src/interface/desktop/utils.js @@ -59,6 +59,17 @@ async function populateHeaderPane() {