From 2d14ecdf65b1b3ec676fc86ac0a7f621f07df51f Mon Sep 17 00:00:00 2001
From: Justin Golden <justingolden21@gmail.com>
Date: Wed, 3 Apr 2024 00:08:59 -0700
Subject: [PATCH] Show "CapsLock On" text when CapsLock is on

---
 src/app/app.component.html |  3 +++
 src/app/app.component.scss | 11 +++++++++++
 src/app/app.component.ts   |  2 ++
 3 files changed, 16 insertions(+)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 184595d3..3c8af16e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -338,6 +338,9 @@
         </button>
 
         <div class="scene-top-actions">
+          <label class="caps-lock"
+                [class.displayed]="isCapsLock"
+            >CapsLock On</label>
             <button mat-mini-fab
                 color="primary"
                 matTooltip="Undo"
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ed83df4e..d9fe622e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -214,3 +214,14 @@ label.cursor-position {
     border-radius: 4px;
     pointer-events: none;
 }
+
+.caps-lock {
+  padding: 4px;
+  background-color: #383838;
+  color: white;
+  opacity: 0;
+  margin-right: 24px;
+  &.displayed {
+    opacity: 1;
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1e210101..8f885a8f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -78,6 +78,7 @@ export class AppComponent implements AfterViewInit {
   isLeftPanelOpened = true;
   isContextualMenuOpened = false;
   isEditingImages = false;
+  isCapsLock = false;
 
   // Utility functions:
   max = Math.max;
@@ -98,6 +99,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   @HostListener('document:keydown', ['$event']) onKeyDown($event: KeyboardEvent) {
+    this.isCapsLock = $event.getModifierState('CapsLock');
     const tag = $event.target instanceof Element ? $event.target.tagName : null;
     if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
       if ($event.shiftKey && ($event.metaKey || $event.ctrlKey) && $event.key.toLowerCase() === 'z') {