diff --git a/app/styles/base.css b/app/styles/base.css index 009532b6..33f0f359 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -902,30 +902,6 @@ 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 623c4d3b..1afba879 100644 --- a/app/ui.js +++ b/app/ui.js @@ -185,6 +185,7 @@ const UI = { UI.initSetting('bell', 'on'); UI.initSetting('view_only', false); UI.initSetting('show_dot', false); + UI.initSetting('notify_clipboard_received', false); UI.initSetting('path', 'websockify'); UI.initSetting('repeaterID', ''); UI.initSetting('reconnect', false); @@ -371,6 +372,8 @@ const UI = { UI.addSettingChangeHandler('view_only', UI.updateViewOnly); UI.addSettingChangeHandler('show_dot'); UI.addSettingChangeHandler('show_dot', UI.updateShowDotCursor); + UI.addSettingChangeHandler('notify_clipboard_received'); + UI.addSettingChangeHandler('notify_clipboard_received', UI.updateNotifyClipboardReceived); UI.addSettingChangeHandler('host'); UI.addSettingChangeHandler('port'); UI.addSettingChangeHandler('path'); @@ -892,6 +895,7 @@ const UI = { UI.updateSetting('logging'); UI.updateSetting('reconnect'); UI.updateSetting('reconnect_delay'); + UI.updateSetting('notify_clipboard_received'); document.getElementById('noVNC_settings') .classList.add("noVNC_open"); @@ -993,25 +997,17 @@ 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 + notifyClipboardReceived() { + // When enabled with setting 'notify_clipboard_received', shows + // notification when a 'clipboard-received'-event is fired by + // the RFB instance. + UI.showStatus(_('Clipboard updated'), 3000); }, 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"); }, @@ -1119,6 +1115,7 @@ const UI = { UI.updateViewOnly(); // requires UI.rfb UI.updateClipboard(); + UI.updateNotifyClipboardReceived(); }, disconnect() { @@ -1824,6 +1821,14 @@ const UI = { UI.rfb.showDotCursor = UI.getSetting('show_dot'); }, + updateNotifyClipboardReceived() { + if (!UI.rfb) return; + UI.rfb.removeEventListener('clipboardreceived', UI.notifyClipboardReceived); + if (UI.getSetting('notify_clipboard_received')) { + UI.rfb.addEventListener('clipboardreceived', UI.notifyClipboardReceived); + } + }, + updateLogging() { WebUtil.initLogging(UI.getSetting('logging')); }, diff --git a/vnc.html b/vnc.html index 82cacd58..080f8adf 100644 --- a/vnc.html +++ b/vnc.html @@ -296,6 +296,13 @@ Show dot when no cursor +
  • + +