langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display .active:active as :hover buttons

Browse Source
This commit is contained in:
Henrik Giesel 2021-03-30 04:38:02 +02:00
parent 4280bf28f8
commit 9340d20c20
5 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ts/editor-toolbar/ColorPicker.svelte
View File

@ -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;
}
}

12
ts/editor-toolbar/CommandIconButton.svelte
View File

@ -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">

8
ts/editor-toolbar/InnerButton.svelte
View File

@ -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] {

2
ts/editor-toolbar/LabelButton.svelte
View File

@ -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>

4
ts/editor-toolbar/format.ts
View File

@ -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);