diff --git a/app/styles/base.css b/app/styles/base.css index 33f0f359..009532b6 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -902,6 +902,30 @@ html { #noVNC_bell { display: none; } +/* ---------------------------------------- + * + * Styles for Showing the Clipboard updated +*/ +.notification { + position: fixed; + top: 20px; + right: 20px; + background-color: grey; + color: white; + padding: 10px 20px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + font-family: sans-serif; + font-size: 16px; + opacity: 1; + transition: opacity 0.5s ease; + z-index: 9999; +} + +.fade-out { + opacity: 0; +} + /* ---------------------------------------- * Media sizing diff --git a/app/ui.js b/app/ui.js index 51e57bd3..7c7c49d7 100644 --- a/app/ui.js +++ b/app/ui.js @@ -993,10 +993,25 @@ const UI = { UI.openClipboardPanel(); } }, + showCopiedNotification() { + // This is responsible for showing the notification when text is updated in the clipboard. + const notificationBox = document.createElement("div"); + notificationBox.className = "notification"; + notificationBox.innerText = "Clipboard updated"; + document.body.appendChild(notificationBox); + + setTimeout(() => { + notificationBox.classList.add("fade-out"); + setTimeout(() => { + notificationBox.remove(); + }, 500); // Wait for fade-out transition + }, 3000); // Display for 3 seconds + }, clipboardReceive(e) { Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0, 40) + "..."); document.getElementById('noVNC_clipboard_text').value = e.detail.text; + UI.showCopiedNotification(); Log.Debug("<< UI.clipboardReceive"); },