GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-21 07:22:23 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Merge pull request #1244 from hgiesel/colorpickersetcolor

Browse source 
Make Color Pickers also format with colors
This commit is contained in:
Damien Elmes 2021-06-20 15:58:58 +10:00 committed by GitHub
commit c6c3b8af4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ts/editor/ColorButtons.svelte
View file

@ -25,10 +25,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const wrapWithBackcolor = (color: string) => () => {
document.execCommand("backcolor", false, color);
};
const initialColor = "black";
let forecolorWrap = wrapWithForecolor(initialColor);
let backcolorWrap = wrapWithForecolor(initialColor);
</script>
<ButtonGroup {api}>
<WithColorHelper let:colorHelperIcon let:color let:setColor>
<WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
<OnlyEditable let:disabled>
<ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
@ -38,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcutLabel
)}
{disabled}
on:click={wrapWithForecolor(color)}
on:click={forecolorWrap}
on:mount={createShortcut}
>
{@html textColorIcon}
@ -58,17 +63,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
widthMultiplier={0.5}
>
{@html arrowIcon}
<ColorPicker on:change={setColor} on:mount={createShortcut} />
<ColorPicker
on:change={(event) => {
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
on:mount={createShortcut}
/>
</IconButton>
</WithShortcut>
</ButtonGroupItem>
</OnlyEditable>
</WithColorHelper>
<WithColorHelper let:colorHelperIcon let:color let:setColor>
<WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
<OnlyEditable let:disabled>
<ButtonGroupItem>
<IconButton on:click={wrapWithBackcolor(color)} {disabled}>
<IconButton on:click={backcolorWrap} {disabled}>
{@html highlightColorIcon}
{@html colorHelperIcon}
</IconButton>
@ -81,7 +92,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{disabled}
>
{@html arrowIcon}
<ColorPicker on:change={setColor} />
<ColorPicker
on:change={(event) => {
backcolorWrap = wrapWithBackcolor(setColor(event));
backcolorWrap();
}}
/>
</IconButton>
</ButtonGroupItem>
</OnlyEditable>

8
ts/editor/WithColorHelper.svelte
View file

@ -5,15 +5,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="typescript">
import { colorHelperIcon } from "./icons";
export let color = "black";
export let color: string;
function setColor({ currentTarget }: Event): void {
color = (currentTarget! as HTMLInputElement).value;
function setColor({ currentTarget }: Event): string {
return (color = (currentTarget! as HTMLInputElement).value);
}
</script>
<div style={`--color-helper-color: ${color}`}>
<slot {colorHelperIcon} {color} {setColor} />
<slot {colorHelperIcon} {setColor} />
</div>
<style lang="scss">