ref: replace browser color picker to svelte-awesome-color-picker

2024-06-10 02:23:13 +09:00
parent 6fea4118d3
commit b53cbba0fa
4 changed files with 66 additions and 17 deletions
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
    "showdown": "^2.1.0",
    "sortablejs": "^1.15.2",
    "streamsaver": "^2.0.6",
+    "svelte-awesome-color-picker": "^3.1.0",
    "three": "^0.154.0",
    "tippy.js": "^6.3.7",
    "uuid": "^9.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -155,6 +155,9 @@ importers:
      streamsaver:
        specifier: ^2.0.6
        version: 2.0.6
+      svelte-awesome-color-picker:
+        specifier: ^3.1.0
+        version: 3.1.0(svelte@4.2.8)
      three:
        specifier: ^0.154.0
        version: 0.154.0
@@ -1386,6 +1389,9 @@ packages:
    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
    engines: {node: '>=12.5.0'}

+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
  combined-stream@1.0.8:
    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
    engines: {node: '>= 0.8'}
@@ -3247,6 +3253,16 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

+  svelte-awesome-color-picker@3.1.0:
+    resolution: {integrity: sha512-na9B9qLaV8XQ6W6eyP6vFyDV2TBF4qvGad6799D4GzbazkiFtoO+lbaFFViAWanz/eECwe/WUAUdg6Jy7LIKFw==}
+    peerDependencies:
+      svelte: ^3.55.1 || ^4.0.0
+
+  svelte-awesome-slider@1.1.0:
+    resolution: {integrity: sha512-MgY6ZdBON42HVZqNWNjq2HOgyDlC35q0TNbV/YO1l1/bcb5yhM8EE97h1AJ/7F6t6sLzXhQ3qPf5nGyCdDSnCg==}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0
+
  svelte-check@3.6.3:
    resolution: {integrity: sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==}
    hasBin: true
@@ -4863,6 +4879,8 @@ snapshots:
      color-convert: 2.0.1
      color-string: 1.9.1

+  colord@2.9.3: {}
+
  combined-stream@1.0.8:
    dependencies:
      delayed-stream: 1.0.0
@@ -6851,6 +6869,16 @@ snapshots:

  supports-preserve-symlinks-flag@1.0.0: {}

+  svelte-awesome-color-picker@3.1.0(svelte@4.2.8):
+    dependencies:
+      colord: 2.9.3
+      svelte: 4.2.8
+      svelte-awesome-slider: 1.1.0(svelte@4.2.8)
+
+  svelte-awesome-slider@1.1.0(svelte@4.2.8):
+    dependencies:
+      svelte: 4.2.8
+
  svelte-check@3.6.3(postcss-load-config@4.0.2(postcss@8.4.33)(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@18.19.7)(typescript@5.3.3)))(postcss@8.4.33)(svelte@4.2.8):
    dependencies:
      '@jridgewell/trace-mapping': 0.3.21
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -10,9 +10,9 @@
    import { updateAnimationSpeed } from "src/ts/gui/animation";
    import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
    import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
-
    import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import ColorInput from "src/lib/UI/GUI/ColorInput.svelte";

    const onSchemeInputChange = (e:Event) => {
        changeColorScheme((e.target as HTMLInputElement).value)
@@ -54,39 +54,39 @@
        <OptionInput value="dark">Dark</OptionInput>
    </SelectInput>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.bgcolor} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
        <span class="ml-2">Background</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbg} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
        <span class="ml-2">Dark Background</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.borderc} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
        <span class="ml-2">Color 1</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.selected} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
        <span class="ml-2">Color 2</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.draculared} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
        <span class="ml-2">Color 3</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkBorderc} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
        <span class="ml-2">Color 4</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbutton} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
        <span class="ml-2">Color 5</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
        <span class="ml-2">Text Color</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor2} on:change={updateColorScheme}>
+        <ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
        <span class="ml-2">Text Color 2</span>
    </div>
    <div class="flex-grow flex justify-end">
@@ -113,27 +113,27 @@

 {#if $DataBase.textTheme === "custom"}
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorStandard} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
        <span class="ml-2">Normal Text</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalic} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
        <span class="ml-2">Italic Text</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorBold} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
        <span class="ml-2">Bold Text</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
        <span class="ml-2">Italic Bold Text</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorQuote1} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
        <span class="ml-2">Single Quote Text</span>
    </div>
    <div class="flex items-center mt-2">
-        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorQuote2} on:change={updateTextTheme}>
+        <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
        <span class="ml-2">Double Quote Text</span>
    </div>
 {/if}
--- a/src/lib/UI/GUI/ColorInput.svelte
+++ b/src/lib/UI/GUI/ColorInput.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import ColorPicker from 'svelte-awesome-color-picker';
+    export let value = '#000000';
+</script>
+
+<div class="cl rounded-full bg-white">
+    <ColorPicker
+        label="" bind:hex={value} on:input
+    />
+</div>
+
+<style>
+    .cl{
+        --cp-bg-color: var(--risu-theme-bgcolor);
+        --cp-border-color: var(--risu-theme-darkborderc);
+        --cp-text-color: var(--risu-theme-textcolor);
+        --cp-input-color: #555;
+        --cp-button-hover-color: #777;
+    }
+</style>