When entering fullscreen presentation mode, invert terminal colors if…

… shift pressed.
educates · May 1, 2023 · 3d5be83 · 3d5be83
1 parent d7cf39c
commit 3d5be83
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/workshop-images/base-environment/opt/gateway/src/frontend/scripts/educates.ts b/workshop-images/base-environment/opt/gateway/src/frontend/scripts/educates.ts
@@ -683,7 +683,7 @@ class TerminalSession {
         this.terminal.scrollToBottom()
     }
 
-    async paste(text: string, bracketed: boolean=true) {
+    async paste(text: string, bracketed: boolean = true) {
         if (!this.blocked) {
             if (this.terminal.modes.bracketedPasteMode && !bracketed) {
                 await this.write("\x1b[?2004l").then(_ => {
@@ -696,7 +696,7 @@ class TerminalSession {
                 await this.terminal.paste(text)
             }
         } else
-            this.buffer.push({text: text, bracketed: bracketed})
+            this.buffer.push({ text: text, bracketed: bracketed })
     }
 
     close() {
@@ -762,6 +762,10 @@ class TerminalSession {
             this.reconnecting = true
         }
     }
+
+    set_option(name: string, value: any) {
+        this.terminal.setOption(name, value)
+    }
 }
 
 class Terminals {
@@ -895,6 +899,12 @@ class Terminals {
         for (let id in this.sessions)
             this.sessions[id].reconnect()
     }
+
+    set_option_all_terminals(name: string, value: any) {
+        for (let id in this.sessions) {
+            this.sessions[id].set_option(name, value)
+        }
+    }
 }
 
 class Dashboard {
@@ -1090,12 +1100,21 @@ class Dashboard {
             $("#fullscreen-button").on("click", (event) => {
                 let $button = $("#fullscreen-button")
                 if ($button.hasClass("fa-expand-arrows-alt")) {
-                    if (document.documentElement.requestFullscreen)
+                    if (document.documentElement.requestFullscreen) {
                         document.documentElement.requestFullscreen()
+                        if (event.shiftKey) {
+                            terminals.set_option_all_terminals("theme", {
+                                background: '#fafafa',
+                                foreground: '#000000',
+                                cursor: '#000000'
+                            })
+                        }
+                    }
                 }
                 else if ($button.hasClass("fa-compress-arrows-alt")) {
-                    if (document.exitFullscreen)
+                    if (document.exitFullscreen) {
                         document.exitFullscreen()
+                    }
                 }
             })
 
@@ -1108,6 +1127,11 @@ class Dashboard {
                 else {
                     $button.addClass("fa-expand-arrows-alt")
                     $button.removeClass("fa-compress-arrows-alt")
+                    terminals.set_option_all_terminals("theme", {
+                        background: '#000000',
+                        foreground: '#ffffff',
+                        cursor: '#ffffff'
+                    })
                 }
             })
         }

diff --git a/workshop-images/base-environment/opt/gateway/src/frontend/styles/educates.css b/workshop-images/base-environment/opt/gateway/src/frontend/styles/educates.css
@@ -159,6 +159,10 @@ li.nav-item>span>button {
 	content: "3"
 }
 
+.xterm {
+	border: 1px solid #E9E9E9
+}
+
 .modal-body.preview-image-body {
 	text-align: center
 }