Implement new ColorPicker
This commit is contained in:
parent
ad1a72495f
commit
8e81a79fbf
@ -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;
|
||||
}
|
||||
|
@ -38,7 +38,6 @@ compile_sass(
|
||||
|
||||
compile_sass(
|
||||
srcs = [
|
||||
"color.scss",
|
||||
"fields.scss",
|
||||
],
|
||||
group = "base_css",
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--foreground-color: black;
|
||||
}
|
||||
|
||||
.forecolor {
|
||||
color: var(--foreground-color) !important;
|
||||
}
|
Loading…
Reference in New Issue
Block a user