New color pickers

src/locales/en.json

@@ -437,6 +437,20 @@
  "context": "Prompt to confirm user wants to reset settings"
  }
  },
+ "color": {
+ "color": {
+ "string": "Color",
+ "context": "Refers to the hue of a color"
+ },
+ "saturation": {
+ "string": "Saturation",
+ "context": "Refers to the saturation of a color"
+ },
+ "brightness": {
+ "string": "Brightness",
+ "context": "Refers to the brightness of a color"
+ }
+ },
  "preview": {
  "loading": {
  "string": "Loading Preview"

src/p4/PackagerOptions.svelte

@@ -7,7 +7,7 @@
  import ImageInput from './ImageInput.svelte';
  import CustomExtensions from '../p4/CustomExtensions.svelte';
  import LearnMore from './LearnMore.svelte';
- import ColorPicker from './ColorPicker.svelte';
+ import ColorPicker from './colors/ColorPicker.svelte';
  import writablePersistentStore from './persistent-store';
  import fileStore from './file-store';
  import {progress, currentTask} from './stores';
@@ -175,6 +175,11 @@
  .group {
  margin: 12px 0;
  }
+ .color {
+ display: flex;
+ align-items: center;
+ margin-bottom: 4px;
+ }
  p {
  margin: 8px 0;
  }
@@ -403,21 +408,18 @@
  <p>{$_('options.controlsHelp')}</p>
 
  <h3>{$_('options.colors')}</h3>
- <!-- svelte-ignore a11y-label-has-associated-control -->
- <label class="option">
- <ColorPicker bind:value={$options.appearance.background} />
+ <div class="option color">
+ <ColorPicker bind:value={$options.appearance.background} defaultColor={defaultOptions.appearance.background} />
  {$_('options.backgroundColor')}
- </label>
- <!-- svelte-ignore a11y-label-has-associated-control -->
- <label class="option">
- <ColorPicker bind:value={$options.appearance.foreground} />
+ </div>
+ <div class="option color">
+ <ColorPicker bind:value={$options.appearance.foreground} defaultColor={defaultOptions.appearance.foreground} />
  {$_('options.foregroundColor')}
- </label>
- <!-- svelte-ignore a11y-label-has-associated-control -->
- <label class="option">
- <ColorPicker bind:value={$options.appearance.accent} />
+ </div>
+ <div class="option color">
+ <ColorPicker bind:value={$options.appearance.accent} defaultColor={defaultOptions.appearance.accent} />
  {$_('options.accentColor')}
- </label>
+ </div>
 
  <h3>{$_('options.monitors')}</h3>
  <label class="option">

src/p4/ResetButton.svelte

@@ -3,10 +3,12 @@
  import {_} from '../locales/';
  import icon from './reset.svg';
 
+ export let confirm = true;
+
  const dispatch = createEventDispatcher();
 
  const click = () => {
- if (confirm($_('reset.confirm'))) {
+ if (!confirm || window.confirm($_('reset.confirm'))) {
  dispatch('click');
  }
  };

src/p4/colors/ColorPicker.svelte

@@ -0,0 +1,238 @@
+<script>
+ import ColorSlider from './ColorSlider.svelte';
+ import ResetButton from '../ResetButton.svelte';
+ import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb, normalizeHex} from './color-utils';
+ import {_} from '../../locales';
+
+ export let value;
+ export let defaultColor;
+
+ let internalHex;
+ let internalHsv;
+
+ const updateExternalHex = () => {
+ value = internalHex;
+ };
+ const setHsv = (hsv) => {
+ const rgb = hsvToRgb(...hsv);
+ const hex = rgbToHex(...rgb);
+ internalHex = hex;
+ internalHsv = hsv;
+ updateExternalHex();
+ };
+ const setInternalHex = (hex) => {
+ const valueAsRgb = hexToRgb(hex);
+ internalHex = hex;
+ internalHsv = rgbToHsv(...valueAsRgb);
+ };
+ const setHex = (hex) => {
+ setInternalHex(hex);
+ updateExternalHex();
+ };
+ const reset = () => {
+ setHex(defaultColor);
+ };
+ $: setInternalHex(value);
+
+ let open = false;
+ let editorElement;
+
+ const handleOpen = () => {
+ open = !open;
+ };
+ const checkClickedOutside = (e) => {
+ if (open && editorElement && !editorElement.contains(e.target)) {
+ open = false;
+ }
+ };
+
+ const updateHsvChannelFactory = (index) => (e) => {
+ const newColor = [...internalHsv];
+ newColor[index] = e.detail;
+ setHsv(newColor);
+ };
+
+ const generateHueSteps = (hsv) => {
+ const result = [];
+ for (let i = 0; i < 1; i += 0.1) {
+ result.push(rgbToHex(...hsvToRgb(i, hsv[1], hsv[2])));
+ }
+ return result;
+ };
+ const generateSaturationSteps = (hsv) => {
+ const result = [];
+ for (let i = 0; i < 1; i += 0.1) {
+ result.push(rgbToHex(...hsvToRgb(hsv[0], i, hsv[2])));
+ }
+ return result;
+ };
+ const generateBrightnessSteps = (hsv) => {
+ const result = [];
+ for (let i = 0; i < 1; i += 0.1) {
+ result.push(rgbToHex(...hsvToRgb(hsv[0], hsv[1], i)));
+ }
+ return result;
+ };
+</script>
+
+<style>
+ .container {
+ position: relative;
+ margin-right: 4px;
+ }
+ .button, .editor {
+ border: 1px solid rgb(160, 160, 160);
+ }
+ .button {
+ background-color: #eee;
+ width: 40px;
+ height: 2em;
+ border-radius: 2px;
+ margin: 0;
+ padding: 3px;
+ box-sizing: border-box;
+ }
+ .button:hover {
+ background-color: #ddd;
+ }
+ .button:active {
+ background-color: #ccc;
+ }
+ .color-preview {
+ width: 100%;
+ height: 100%;
+ }
+
+ .editor {
+ background: white;
+ position: absolute;
+ z-index: 10;
+ top: 100%;
+ border-radius: 4px;
+ padding: 8px;
+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+ }
+
+ :global([theme="dark"]) .button,
+ :global([theme="dark"]) .editor {
+ background-color: #333;
+ border-color: #888;
+ }
+ :global([theme="dark"]) .button:hover {
+ background-color: #444;
+ }
+ :global([theme="dark"]) .button:active {
+ background-color: #555;
+ }
+
+ .slider-section {
+ margin-bottom: 12px;
+ }
+ .label {
+ display: flex;
+ font-weight: bold;
+ }
+ .value {
+ font-weight: normal;
+ margin-left: 12px;
+ }
+
+ .bottom-section {
+ display: flex;
+ align-items: center;
+ height: 24px;
+ }
+ .native-input {
+ width: 40px;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ border: none;
+ }
+ .hex-input {
+ width: 60px;
+ }
+ .native-input, .hex-input {
+ height: 100%;
+ margin-right: 8px;
+ box-sizing: border-box;
+ }
+</style>
+
+<svelte:body on:mousedown={checkClickedOutside} />
+
+<div class="container" bind:this={editorElement}>
+ <button class="button" on:click={handleOpen}>
+ <div class="color-preview" style={`background-color: ${normalizeHex(internalHex)}`}></div>
+ </button>
+
+ {#if open}
+ <div class="editor">
+ <div class="slider-section">
+ <div class="label">
+ {$_('color.color')}
+ <div class="value">{Math.round(internalHsv[0] * 100)}</div>
+ </div>
+ <div class="slider">
+ <ColorSlider
+ value={internalHsv[0]}
+ steps={generateHueSteps(internalHsv)}
+ on:change={updateHsvChannelFactory(0)}
+ />
+ </div>
+ </div>
+
+ <div class="slider-section">
+ <div class="label">
+ {$_('color.saturation')}
+ <div class="value">{Math.round(internalHsv[1] * 100)}</div>
+ </div>
+ <div class="slider">
+ <ColorSlider
+ value={internalHsv[1]}
+ steps={generateSaturationSteps(internalHsv)}
+ on:change={updateHsvChannelFactory(1)}
+ />
+ </div>
+ </div>
+
+ <div class="slider-section">
+ <div class="label">
+ {$_('color.brightness')}
+ <div class="value">{Math.round(internalHsv[2] * 100)}</div>
+ </div>
+ <div class="slider">
+ <ColorSlider
+ value={internalHsv[2]}
+ steps={generateBrightnessSteps(internalHsv)}
+ on:change={updateHsvChannelFactory(2)}
+ />
+ </div>
+ </div>
+
+ <div class="bottom-section">
+ <input
+ class="native-input"
+ type="color"
+ value={normalizeHex(internalHex)}
+ on:input={(e) => {
+ setHex(e.target.value);
+ }}
+ />
+ <input
+ class="hex-input"
+ type="text"
+ value={internalHex}
+ on:input={(e) => {
+ setInternalHex(e.target.value);
+ }}
+ on:change={updateExternalHex}
+ />
+ <ResetButton
+ on:click={reset}
+ confirm={false}
+ />
+ </div>
+ </div>
+ {/if}
+</div>