From 87bb79ce921fad463588d143895344b6e9f3bc30 Mon Sep 17 00:00:00 2001
From: skarab42 <skarab@bluewin.ch>
Date: Wed, 3 Mar 2021 16:32:43 +0100
Subject: [PATCH] fix: Color picker (#202)

---
 .../Timeline/Editor/Settings/Input.svelte     | 15 ++--
 .../Editor/Settings/TextShadow.svelte         |  1 -
 .../client/components/App/Connected.svelte    | 18 -----
 .../client/components/UI/ColorPicker.svelte   | 68 +++++++------------
 4 files changed, 31 insertions(+), 71 deletions(-)

diff --git a/front-src/client/components/Anime/Timeline/Editor/Settings/Input.svelte b/front-src/client/components/Anime/Timeline/Editor/Settings/Input.svelte
index 89a7ad00..24de2a9a 100644
--- a/front-src/client/components/Anime/Timeline/Editor/Settings/Input.svelte
+++ b/front-src/client/components/Anime/Timeline/Editor/Settings/Input.svelte
@@ -36,13 +36,14 @@
     {/if}
   </div>
   {#if type === 'colorpicker'}
-    <ColorPicker
-      label="{false}"
-      color="{value}"
-      position="right"
-      on:color="{onChange}"
-      previewClass="h-5 rounded"
-    />
+    <div class="w-1/2">
+      <ColorPicker
+        label="{false}"
+        color="{value}"
+        on:color="{onChange}"
+        previewClass="h-5 rounded"
+      />
+    </div>
   {:else if type === 'fontpicker'}
     <Fontpicker
       font="{value}"
diff --git a/front-src/client/components/Anime/Timeline/Editor/Settings/TextShadow.svelte b/front-src/client/components/Anime/Timeline/Editor/Settings/TextShadow.svelte
index 007ab03e..1e494d67 100644
--- a/front-src/client/components/Anime/Timeline/Editor/Settings/TextShadow.svelte
+++ b/front-src/client/components/Anime/Timeline/Editor/Settings/TextShadow.svelte
@@ -48,7 +48,6 @@
 
   <ColorPicker
     label="{false}"
-    position="right"
     color="{attrs.color}"
     previewClass="h-5 rounded"
     on:color="{onChange.bind(null, 'color')}"
diff --git a/front-src/client/components/App/Connected.svelte b/front-src/client/components/App/Connected.svelte
index f5430059..e2cb5b7b 100644
--- a/front-src/client/components/App/Connected.svelte
+++ b/front-src/client/components/App/Connected.svelte
@@ -2,26 +2,8 @@
   import FirstStart from "./FirstStart.svelte";
   import CheckUpdate from "./CheckUpdate.svelte";
   import Dashboard from "@/components/Dashboard/Main.svelte";
-
-  // import ModalRefacto from "@/components/UI/Modal.svelte";
-
-  // function onClose() {
-  //   console.log("modal closed");
-  // }
-
-  // let modalOpened = false;
-
-  // function openModal() {
-  //   modalOpened = true;
-  // }
 </script>
 
 <Dashboard />
 <FirstStart />
 <CheckUpdate />
-
-<!-- <button on:click="{openModal}">open modal</button>
-
-<ModalRefacto bind:opened="{modalOpened}" title="prout" on:close="{onClose}">
-  <div class="p-2">Prout...</div>
-</ModalRefacto> -->
diff --git a/front-src/client/components/UI/ColorPicker.svelte b/front-src/client/components/UI/ColorPicker.svelte
index 8271858b..11153a72 100644
--- a/front-src/client/components/UI/ColorPicker.svelte
+++ b/front-src/client/components/UI/ColorPicker.svelte
@@ -1,59 +1,37 @@
 <script>
   import { _ } from "@/libs/i18next";
-  import clickoutside from "@/libs/svelte/click-outside";
-  import ChromePicker from "svelte-color/Chrome.svelte";
+
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  export let label = _("words.color");
   export let color = "#fff";
-  export let alpha = false;
-  export let colapsed = true;
-  export let previewClass = "";
-  export let position = "left";
+  export let label = _("words.color");
   export let labelMinWidth = "50%";
+  export let previewClass = "";
 
-  let cls = "flex-auto";
-  export { cls as class };
-
-  let pos = position === "left" ? "left-0" : "right-0";
   $: labelStyle = labelMinWidth ? `min-width:${labelMinWidth}` : "";
 
-  function onColor(event) {
-    color = event.detail.hex;
-    dispatch("color", event.detail);
-  }
-
-  $: hidden = colapsed && "hidden";
-  $: style = `background-color: ${color}`;
-
-  function toggle() {
-    colapsed = !colapsed;
-  }
-
-  function hide() {
-    colapsed = true;
+  function onChange({ target }) {
+    color = target.value;
+    dispatch("color", { hex: color });
   }
 </script>
 
-<div use:clickoutside on:clickoutside="{hide}" class="relative {cls}">
-  <div class="flex cursor-pointer" on:click="{toggle}">
-    {#if label}
-      <div
-        style="{labelStyle}"
-        class="p-2 uppercase font-medium bg-dark-lighter"
-      >
-        {label}
-      </div>
-    {/if}
-    <div class="p-2 text-dark flex-auto {previewClass}" style="{style}"></div>
-  </div>
-  <div class="absolute z-10 text-dark {hidden} {pos}">
-    <ChromePicker
-      on:input="{onColor}"
-      startColor="{color}"
-      disableAlpha="{!alpha}"
-    />
-  </div>
-</div>
+<label class="flex w-full h-full" style="background-color:{color}">
+  {#if label}
+    <div style="{labelStyle}" class="p-2 uppercase font-medium bg-dark-lighter">
+      {label}
+    </div>
+  {/if}
+  {#if previewClass}
+    <div class="{previewClass}"></div>
+  {/if}
+  <input
+    type="color"
+    value="{color}"
+    class="opacity-0"
+    on:input="{onChange}"
+    style="width:1px;height:1px;"
+  />
+</label>