feat(web-core): add focus on console

vatesfr · Jan 22, 2025 · 89dd4ae · 89dd4ae
1 parent fe52762
commit 89dd4ae
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/@xen-orchestra/lite/CHANGELOG.md b/@xen-orchestra/lite/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix persistent scrollbar on the right (PR [#8191](https://github.com/vatesfr/xen-orchestra/pull/8191))
 - [Console]: Displays a loader when the console is loading (PR [#8226](https://github.com/vatesfr/xen-orchestra/pull/8226))
 - [i18n] Add Spanish translation (contribution made by [@DSJ2](https://github.com/DSJ2)) (PR [#8220](https://github.com/vatesfr/xen-orchestra/pull/8220))
+- [Console]: Adding a border when console is focused (PR [#8235](https://github.com/vatesfr/xen-orchestra/pull/8235))
 
 ## **0.6.0** (2024-11-29)
 

diff --git a/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
@@ -84,6 +84,18 @@ async function createVncConnection() {
 
   vncClient.addEventListener('disconnect', handleDisconnectionEvent)
   vncClient.addEventListener('connect', handleConnectionEvent)
+  const canvas = consoleContainer.value?.querySelector('canvas') as HTMLCanvasElement | null
+  if (canvas !== null) {
+    // Todo: See with Clémence to specify the desired focus behavior
+    canvas.setAttribute('tabindex', '0')
+    canvas.addEventListener('focus', () => {
+      canvas.classList.add('focused')
+    })
+
+    canvas.addEventListener('blur', () => {
+      canvas.classList.remove('focused')
+    })
+  }
 }
 
 watchEffect(() => {
@@ -124,6 +136,12 @@ defineExpose({
   /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
   :deep(canvas) {
     margin: 0 auto !important;
+    cursor: default !important;
+    border: 6px solid transparent;
+
+    &.focused {
+      border: var(--color-success-txt-base) 6px solid;
+    }
   }
 }
 </style>
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -15,10 +15,9 @@
   - [Console]: Displays a loader when the console is loading (PR [#8226](https://github.com/vatesfr/xen-orchestra/pull/8226))
   - [i18n] Add Spanish translation (contribution made by [@DSJ2](https://github.com/DSJ2)) (PR [#8220](https://github.com/vatesfr/xen-orchestra/pull/8220))
   - [Console]: Add Ctrl+Alt+Del functionality to console (PR [#8239](https://github.com/vatesfr/xen-orchestra/pull/8239))
+  - [Console]: Adding a border when console is focused (PR [#8235](https://github.com/vatesfr/xen-orchestra/pull/8235))
 - [Backup] New [ChaCha20-Poly1305](https://en.wikipedia.org/wiki/ChaCha20-Poly1305) encryption for remotes, allow encrypted files larger than 64GB (PR [#8237](https://github.com/vatesfr/xen-orchestra/pull/8237))
 
-> Users must be able to say: “Nice enhancement, I'm eager to test it”
-
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”