Implement new ColorPicker

This commit is contained in:
Henrik Giesel 2021-05-30 22:58:40 +02:00
parent ad1a72495f
commit 8e81a79fbf
5 changed files with 38 additions and 113 deletions

View File

@ -3,72 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import { onMount, createEventDispatcher, getContext } from "svelte";
import { nightModeKey } from "./contextKeys";
import { onMount, createEventDispatcher } from "svelte";
export let id: string | undefined = undefined;
let className = "";
export { className as class };
export let tooltip: string | undefined = undefined;
const nightMode = getContext(nightModeKey);
function delegateToInput() {
inputRef.click();
}
let buttonRef: HTMLButtonElement;
let inputRef: HTMLInputElement;
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
onMount(() => dispatch("mount", { input: inputRef }));
</script>
<button
bind:this={buttonRef}
tabindex="-1"
{id}
class={`btn ${className}`}
class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip}
on:click={delegateToInput}
on:mousedown|preventDefault
>
<input tabindex="-1" bind:this={inputRef} type="color" on:change />
</button>
<input tabindex="-1" bind:this={inputRef} type="color" on:change />
<style lang="scss">
@use "ts/sass/button_mixins" as button;
@import "ts/sass/bootstrap/functions";
@import "ts/sass/bootstrap/variables";
button {
width: calc(var(--buttons-size) - 0px);
height: calc(var(--buttons-size) - 0px);
padding: 4px;
overflow: hidden;
border-top-left-radius: var(--border-left-radius);
border-bottom-left-radius: var(--border-left-radius);
border-top-right-radius: var(--border-right-radius);
border-bottom-right-radius: var(--border-right-radius);
}
@include button.btn-day($with-disabled: false) using ($base) {
@include button.rainbow($base);
}
@include button.btn-night($with-disabled: false) using ($base) {
@include button.rainbow($base);
}
input {
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}

View File

@ -38,7 +38,6 @@ compile_sass(
compile_sass(
srcs = [
"color.scss",
"fields.scss",
],
group = "base_css",

View File

@ -8,66 +8,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte";
import ColorPicker from "components/ColorPicker.svelte";
import WithShortcut from "components/WithShortcut.svelte";
import WithColorHelper from "./WithColorHelper.svelte";
import { textColorIcon, highlightColorIcon } from "./icons";
import { appendInParentheses } from "./helpers";
import "./color.css";
export let api = {};
const foregroundColorKeyword = "--foreground-color";
let color = "black";
$: {
document.documentElement.style.setProperty(foregroundColorKeyword, color);
}
const wrapWithForecolor = (color: string) => () => {
document.execCommand("forecolor", false, color);
}
};
const wrapWithBackcolor = (color: string) => () => {
document.execCommand("backcolor", false, color);
}
function setWithCurrentColor({ currentTarget }: Event): void {
color = (currentTarget as HTMLInputElement).value;
}
};
</script>
<ButtonGroup {api}>
<!--
<ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
<IconButton
class="forecolor"
tooltip={appendInParentheses(
tr.editingSetForegroundColor(),
shortcutLabel
)}
on:click={wrapWithForecolor}
on:mount={createShortcut}
>
{@html squareFillIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
<ColorPicker
tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
on:change={setWithCurrentColor}
on:mount={createShortcut}
/>
</WithShortcut>
</ButtonGroupItem>
-->
<WithColorHelper let:colorHelperIcon let:color>
<WithColorHelper let:colorHelperIcon let:color let:setColor>
<ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
<IconButton
@ -83,9 +43,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
<IconButton
tooltip={appendInParentheses(
tr.editingChangeColor(),
shortcutLabel
)}
disables={false}
>
<ColorPicker on:change={setColor} on:mount={createShortcut} />
</IconButton>
</WithShortcut>
</ButtonGroupItem>
</WithColorHelper>
<WithColorHelper let:colorHelperIcon let:color>
<WithColorHelper let:colorHelperIcon let:color let:setColor>
<ButtonGroupItem>
<WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
<IconButton
@ -101,5 +75,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton tooltip={tr.editingChangeColor()} disables={false}>
<ColorPicker on:change={setColor} />
</IconButton>
</ButtonGroupItem>
</WithColorHelper>
</ButtonGroup>

View File

@ -7,8 +7,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let color = "black";
function setColor(newColor: string): void {
color = newColor;
function setColor({ currentTarget }: Event): void {
color = (currentTarget! as HTMLInputElement).value;
}
</script>
@ -17,7 +17,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div>
<style lang="scss">
div :global(#mdi-color-helper) {
fill: var(--color-helper-color);
div {
display: contents;
:global(#mdi-color-helper) {
fill: var(--color-helper-color);
}
}
</style>

View File

@ -1,7 +0,0 @@
:root {
--foreground-color: black;
}
.forecolor {
color: var(--foreground-color) !important;
}