From 9f8be1af93b63acd87c8884a020ca431a93bd45c Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sat, 30 Oct 2021 23:48:37 +0200
Subject: [PATCH] Highlight field badges when toggled to non-default state
 (#1466)

---
 ts/editor/PlainTextBadge.svelte | 9 ++++++---
 ts/editor/RichTextBadge.svelte  | 9 ++++++---
 ts/editor/StickyBadge.svelte    | 9 ++++++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index eff28698b..c3e64e338 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     );
 </script>
 
-<span on:click|stopPropagation={toggle}>
+<span class:highlighted={!off} on:click|stopPropagation={toggle}>
     <Badge
         tooltip="{tr.editingHtmlEditor()} ({getPlatformString(keyCombination)})"
         iconSize={80}>{@html icon}</Badge
@@ -36,10 +36,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     span {
-        opacity: 0.6;
+        opacity: 0.4;
 
-        &:hover {
+        &.highlighted {
             opacity: 1;
         }
+        &:hover {
+            opacity: 0.8;
+        }
     }
 </style>
diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte
index 836a2c343..1ceceec65 100644
--- a/ts/editor/RichTextBadge.svelte
+++ b/ts/editor/RichTextBadge.svelte
@@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: icon = off ? richTextOff : richTextOn;
 </script>
 
-<span on:click|stopPropagation={toggle}>
+<span class:highlighted={off} on:click|stopPropagation={toggle}>
     <Badge iconSize={80}>{@html icon}</Badge>
 </span>
 
 <style lang="scss">
     span {
-        opacity: 0.6;
+        opacity: 0.4;
 
-        &:hover {
+        &.highlighted {
             opacity: 1;
         }
+        &:hover {
+            opacity: 0.8;
+        }
     }
 </style>
diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index 216d2d3b4..195695b8b 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -29,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => registerShortcut(toggleSticky, keyCombination, editorField.element));
 </script>
 
-<span on:click|stopPropagation={toggleSticky}>
+<span class:highlighted={active} on:click|stopPropagation={toggleSticky}>
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
         widthMultiplier={0.7}>{@html icon}</Badge
@@ -38,10 +38,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     span {
-        opacity: 0.6;
+        opacity: 0.4;
 
-        &:hover {
+        &.highlighted {
             opacity: 1;
         }
+        &:hover {
+            opacity: 0.8;
+        }
     }
 </style>