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) => () => { const wrapWithBackcolor = (color: string) => () => {
document.execCommand("backcolor", false, color); document.execCommand("backcolor", false, color);
}; };
const initialColor = "black";
let forecolorWrap = wrapWithForecolor(initialColor);
let backcolorWrap = wrapWithForecolor(initialColor);
</script> </script>
<ButtonGroup {api}> <ButtonGroup {api}>
<WithColorHelper let:colorHelperIcon let:color let:setColor> <WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
<OnlyEditable let:disabled> <OnlyEditable let:disabled>
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel> <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 shortcutLabel
)} )}
{disabled} {disabled}
on:click={wrapWithForecolor(color)} on:click={forecolorWrap}
on:mount={createShortcut} on:mount={createShortcut}
> >
{@html textColorIcon} {@html textColorIcon}
@ -58,17 +63,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
widthMultiplier={0.5} widthMultiplier={0.5}
> >
{@html arrowIcon} {@html arrowIcon}
<ColorPicker on:change={setColor} on:mount={createShortcut} /> <ColorPicker
on:change={(event) => {
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
on:mount={createShortcut}
/>
</IconButton> </IconButton>
</WithShortcut> </WithShortcut>
</ButtonGroupItem> </ButtonGroupItem>
</OnlyEditable> </OnlyEditable>
</WithColorHelper> </WithColorHelper>
<WithColorHelper let:colorHelperIcon let:color let:setColor> <WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
<OnlyEditable let:disabled> <OnlyEditable let:disabled>
<ButtonGroupItem> <ButtonGroupItem>
<IconButton on:click={wrapWithBackcolor(color)} {disabled}> <IconButton on:click={backcolorWrap} {disabled}>
{@html highlightColorIcon} {@html highlightColorIcon}
{@html colorHelperIcon} {@html colorHelperIcon}
</IconButton> </IconButton>
@ -81,7 +92,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{disabled} {disabled}
> >
{@html arrowIcon} {@html arrowIcon}
<ColorPicker on:change={setColor} /> <ColorPicker
on:change={(event) => {
backcolorWrap = wrapWithBackcolor(setColor(event));
backcolorWrap();
}}
/>
</IconButton> </IconButton>
</ButtonGroupItem> </ButtonGroupItem>
</OnlyEditable> </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"> <script lang="typescript">
import { colorHelperIcon } from "./icons"; import { colorHelperIcon } from "./icons";
export let color = "black"; export let color: string;
function setColor({ currentTarget }: Event): void { function setColor({ currentTarget }: Event): string {
color = (currentTarget! as HTMLInputElement).value; return (color = (currentTarget! as HTMLInputElement).value);
} }
</script> </script>
<div style={`--color-helper-color: ${color}`}> <div style={`--color-helper-color: ${color}`}>
<slot {colorHelperIcon} {color} {setColor} /> <slot {colorHelperIcon} {setColor} />
</div> </div>
<style lang="scss"> <style lang="scss">