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

Improve looks of color picker button

Browse source
This commit is contained in:
Henrik Giesel 2021-04-14 18:33:46 +02:00
parent 02c8893fc9
commit 49daa2dd01
3 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/editor-toolbar/ColorPicker.svelte
View file

@ -13,19 +13,32 @@
} }
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
let input: HTMLInputElement;
function delegateToInput() {
input.click();
}
</script> </script>
<style lang="scss"> <style lang="scss">
button { button {
padding: 0; padding: 0;
background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
content-box white;
width: calc(var(--toolbar-size) - 0px);
height: calc(var(--toolbar-size) - 0px);
border-width: 5px;
overflow: hidden;
} }
input { input {
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
width: calc(var(--toolbar-size) - 2px);
height: calc(var(--toolbar-size) - 7px);
} }
</style> </style>
@ -36,6 +49,7 @@
class:btn-light={!nightMode} class:btn-light={!nightMode}
class:btn-secondary={nightMode} class:btn-secondary={nightMode}
title={tooltip} title={tooltip}
on:click={delegateToInput}
on:mousedown|preventDefault> on:mousedown|preventDefault>
<span> <input type="color" on:change={onChange} /> </span> <input bind:this={input} type="color" on:change={onChange} />
</button> </button>

10
ts/editor-toolbar/color.scss
View file

@ -5,13 +5,3 @@
.forecolor { .forecolor {
color: var(--foreground-color) !important; color: var(--foreground-color) !important;
} }
.rainbow {
background: content-box
linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box white;
}

1
ts/editor-toolbar/color.ts
View file

@ -38,7 +38,6 @@ export function getColorGroup() {
}); });
const colorpickerButton = colorPicker({ const colorpickerButton = colorPicker({
className: "rainbow",
onChange: ({ currentTarget }) => onChange: ({ currentTarget }) =>
setForegroundColor((currentTarget as HTMLInputElement).value), setForegroundColor((currentTarget as HTMLInputElement).value),
tooltip: tr.editingChangeColourF8(), tooltip: tr.editingChangeColourF8(),