Highlight field badges when toggled to non-default state (#1466)

This commit is contained in:
Matthias Metelka 2021-10-30 23:48:37 +02:00 committed by GitHub
parent abd671d4cd
commit 9f8be1af93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 9 deletions

View file

@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
); );
</script> </script>
<span on:click|stopPropagation={toggle}> <span class:highlighted={!off} on:click|stopPropagation={toggle}>
<Badge <Badge
tooltip="{tr.editingHtmlEditor()} ({getPlatformString(keyCombination)})" tooltip="{tr.editingHtmlEditor()} ({getPlatformString(keyCombination)})"
iconSize={80}>{@html icon}</Badge 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"> <style lang="scss">
span { span {
opacity: 0.6; opacity: 0.4;
&:hover { &.highlighted {
opacity: 1; opacity: 1;
} }
&:hover {
opacity: 0.8;
}
} }
</style> </style>

View file

@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: icon = off ? richTextOff : richTextOn; $: icon = off ? richTextOff : richTextOn;
</script> </script>
<span on:click|stopPropagation={toggle}> <span class:highlighted={off} on:click|stopPropagation={toggle}>
<Badge iconSize={80}>{@html icon}</Badge> <Badge iconSize={80}>{@html icon}</Badge>
</span> </span>
<style lang="scss"> <style lang="scss">
span { span {
opacity: 0.6; opacity: 0.4;
&:hover { &.highlighted {
opacity: 1; opacity: 1;
} }
&:hover {
opacity: 0.8;
}
} }
</style> </style>

View file

@ -29,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onMount(() => registerShortcut(toggleSticky, keyCombination, editorField.element)); onMount(() => registerShortcut(toggleSticky, keyCombination, editorField.element));
</script> </script>
<span on:click|stopPropagation={toggleSticky}> <span class:highlighted={active} on:click|stopPropagation={toggleSticky}>
<Badge <Badge
tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})" tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
widthMultiplier={0.7}>{@html icon}</Badge 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"> <style lang="scss">
span { span {
opacity: 0.6; opacity: 0.4;
&:hover { &.highlighted {
opacity: 1; opacity: 1;
} }
&:hover {
opacity: 0.8;
}
} }
</style> </style>