From 9340d20c20a7f7db62cde42a57e7840ce5a88bed Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 04:38:02 +0200
Subject: [PATCH] Display .active:active as :hover buttons

---
 ts/editor-toolbar/ColorPicker.svelte       |  3 ++-
 ts/editor-toolbar/CommandIconButton.svelte | 12 ++++++++++--
 ts/editor-toolbar/InnerButton.svelte       |  8 +++++++-
 ts/editor-toolbar/LabelButton.svelte       |  2 +-
 ts/editor-toolbar/format.ts                |  4 ++--
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 42ac0931e..7e0358574 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -17,7 +17,8 @@
         }
 
         &:active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
         }
     }
 
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 2513c04bf..633d824c8 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -10,19 +10,27 @@
         );
     }
 
-    export function updateButtons() {
+    function updateButtons(callback: (key: string) => boolean): void {
         commandMap.update(
             (map: Map<string, boolean>): Map<string, boolean> => {
                 const newMap = new Map<string, boolean>();
 
                 for (const key of map.keys()) {
-                    newMap.set(key, document.queryCommandState(key));
+                    newMap.set(key, callback(key));
                 }
 
                 return newMap;
             }
         );
     }
+
+    export function updateButtonActive() {
+        updateButtons((key: string): boolean => document.queryCommandState(key));
+    }
+
+    export function clearButtonActive() {
+        updateButtons((): boolean => false);
+    }
 </script>
 
 <script lang="typescript">
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index ca9181fec..8848de6f0 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -27,7 +27,13 @@
 
         &:active,
         &.active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
+        }
+
+        &.active:active {
+            box-shadow: none;
+            border-color: var(--border);
         }
 
         &[disabled] {
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 8b429e753..9428dd568 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -13,7 +13,7 @@
         margin: 0 3px;
 
         &:focus {
-            box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
         }
     }
 </style>
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index ddf656fca..5205399b0 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import CommandIconButton, { updateButtons } from "./CommandIconButton.svelte";
+import CommandIconButton, { updateButtonActive } from "./CommandIconButton.svelte";
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -45,4 +45,4 @@ export const eraserButton = {
 };
 
 // TODO
-setInterval(updateButtons, 2000);
+setInterval(updateButtonActive, 2000);