From 5e43915ff74de91752ef84c748a9cb15f9cb06a0 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Thu, 30 May 2024 17:22:06 +0700
Subject: [PATCH] Add a Disable button in the MKB dialog

---
 src/assets/css/button.styl     |  2 +-
 src/assets/css/mkb.styl        | 32 +++++++++++++++++++++-----------
 src/modules/mkb/mkb-handler.ts | 34 ++++++++++++++++++++++++----------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/assets/css/button.styl b/src/assets/css/button.styl
index 5365798..caa485d 100644
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@@ -74,7 +74,7 @@
         height: var(--bx-button-height);
         line-height: var(--bx-button-height);
         vertical-align: middle;
-        vertical-align: -webkit-baseline-middle;
+        /* vertical-align: -webkit-baseline-middle; */
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
diff --git a/src/assets/css/mkb.styl b/src/assets/css/mkb.styl
index 25d46a0..e031c82 100644
--- a/src/assets/css/mkb.styl
+++ b/src/assets/css/mkb.styl
@@ -16,7 +16,6 @@
 }
 
 .bx-mkb-pointer-lock-msg {
-    display: flex;
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
@@ -41,16 +40,7 @@
         background: #151515;
     }
 
-    button {
-        margin-right: 12px;
-        height: 60px;
-    }
-
-    svg {
-        width: 32px;
-    }
-
-    div {
+    > div:first-of-type {
         display: flex;
         flex-direction: column;
         text-align: left;
@@ -69,6 +59,26 @@
             font-style: italic;
         }
     }
+
+    > div:last-of-type {
+        display: flex;
+        flex-flow: row;
+        margin-top: 10px;
+
+        button {
+            flex: 1;
+
+            &:first-of-type {
+                margin-right: 5px;
+            }
+
+            &:last-of-type {
+                margin-left: 5px;
+            }
+        }
+
+        button
+    }
 }
 
 .bx-mkb-preset-tools {
diff --git a/src/modules/mkb/mkb-handler.ts b/src/modules/mkb/mkb-handler.ts
index 3f287a1..470ba29 100644
--- a/src/modules/mkb/mkb-handler.ts
+++ b/src/modules/mkb/mkb-handler.ts
@@ -464,20 +464,34 @@ export class MkbHandler {
         window.addEventListener('keydown', this.#onKeyboardEvent);
 
         this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
-                createButton({
-                    icon: BxIcon.MOUSE_SETTINGS,
-                    style: ButtonStyle.PRIMARY,
-                    onClick: e => {
-                        e.preventDefault();
-                        e.stopPropagation();
-
-                        showStreamSettings('mkb');
-                    },
-                }),
                 CE('div', {},
                     CE('p', {}, t('mkb-click-to-activate')),
                     CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
                 ),
+
+                CE('div', {},
+                    createButton({
+                        icon: BxIcon.MOUSE_SETTINGS,
+                        label: t('edit'),
+                        style: ButtonStyle.PRIMARY,
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            showStreamSettings('mkb');
+                        },
+                    }),
+
+                    createButton({
+                        label: t('disable'),
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle();
+                        },
+                    }),
+                ),
             );
 
         this.#$message.addEventListener('click', this.start.bind(this));