0026506543
- prettier's formatting has changed, so files needed to be reformatted
- dart is spitting out deprecation warnings like:
254 │ 2: $spacer / 2,
│ ^^^^^^^^^^^
╵
bazel-out/darwin-fastbuild/bin/ts/sass/bootstrap/_variables.scss 254:6 @import
ts/sass/button_mixins.scss 2:9 @use
ts/components/ColorPicker.svelte 2:5 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($grid-gutter-width, 2)
64 lines
2.0 KiB
Svelte
64 lines
2.0 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="typescript">
|
|
import * as tr from "lib/i18n";
|
|
|
|
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 { squareFillIcon } 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);
|
|
}
|
|
|
|
function wrapWithForecolor(): void {
|
|
document.execCommand("forecolor", 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>
|
|
</ButtonGroup>
|