From 0269c97b2e87b083411567ce85aa9d2bef9a89b8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:26:08 +0200
Subject: [PATCH] Rename IconButtonInner to InnerButton, as it does not
 necessarily contain an Icon

---
 ts/editor-toolbar/CommandIconButton.svelte    |  6 ++--
 ts/editor-toolbar/IconButton.svelte           |  6 ++--
 ...nButtonInner.svelte => InnerButton.svelte} | 28 ++++++++++++++++---
 3 files changed, 30 insertions(+), 10 deletions(-)
 rename ts/editor-toolbar/{IconButtonInner.svelte => InnerButton.svelte} (55%)

diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index e5f19189b..6e417fce3 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -27,7 +27,7 @@
 
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
-    import IconButtonInner from "./IconButtonInner.svelte";
+    import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
     export let icon = "";
@@ -51,7 +51,7 @@
 </script>
 
 <ButtonItem>
-    <IconButtonInner {className} {active} {onClick}>
+    <InnerButton {className} {active} {onClick}>
         {@html icon}
-    </IconButtonInner>
+    </InnerButton>
 </ButtonItem>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 443ad0055..5588ddbc7 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
-    import IconButtonInner from "./IconButtonInner.svelte";
+    import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
     export let icon = "";
@@ -8,7 +8,7 @@
 </script>
 
 <ButtonItem>
-    <IconButtonInner {className} active={false} {onClick}>
+    <InnerButton {className} {onClick}>
         {@html icon}
-    </IconButtonInner>
+    </InnerButton>
 </ButtonItem>
diff --git a/ts/editor-toolbar/IconButtonInner.svelte b/ts/editor-toolbar/InnerButton.svelte
similarity index 55%
rename from ts/editor-toolbar/IconButtonInner.svelte
rename to ts/editor-toolbar/InnerButton.svelte
index 23b51c82d..3df207d4c 100644
--- a/ts/editor-toolbar/IconButtonInner.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -1,17 +1,19 @@
 <script lang="typescript">
-    export let className: string;
+    export let className: string = '';
     export let onClick: (event: ClickEvent) => void;
-    export let active: boolean;
+    export let active = false;
+    export let disabled = false;
 </script>
 
 <style lang="scss">
     button {
         display: inline-block;
+
         width: 30px;
         height: 30px;
 
+        background-color: white;
         vertical-align: -webkit-baseline-middle;
-        padding: 2px;
 
         & > :global(svg),
         & > :global(img) {
@@ -27,9 +29,27 @@
         &:active, &.active {
             box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
         }
+
+        &[disabled] {
+            opacity: 0.4;
+
+            &:hover {
+                background-color: white;
+            }
+
+            &:active, &.active {
+                box-shadow: none;
+            }
+        }
     }
 </style>
 
-<button class={className} class:active on:click={onClick} on:mousedown|preventDefault>
+<button
+    class="p-1 {className}"
+    class:active
+    {disabled}
+    on:click={onClick}
+    on:mousedown|preventDefault
+>
     <slot />
 </button>