From e8720345fee8dd09d33c2fab047a15ef1028dcbf Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 7 Apr 2024 11:36:13 +0300
Subject: [PATCH] Refactored ColorPicker

---
 components/lib/colorpicker/ColorPicker.vue    | 84 -----------------
 .../lib/colorpicker/style/ColorPickerStyle.js |  7 +-
 .../themes/primeone/base/colorpicker/index.js | 92 ++++++++++++++++---
 3 files changed, 80 insertions(+), 103 deletions(-)

diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index 2d0156627..534dfbf9c 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -567,87 +567,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-colorpicker {
-    display: inline-block;
-}
-
-.p-colorpicker-dragging {
-    cursor: pointer;
-}
-
-.p-colorpicker-overlay {
-    position: relative;
-}
-
-.p-colorpicker-panel {
-    position: relative;
-    width: 193px;
-    height: 166px;
-}
-
-.p-colorpicker-overlay-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.p-colorpicker-preview {
-    cursor: pointer;
-}
-
-.p-colorpicker-panel .p-colorpicker-content {
-    position: relative;
-}
-
-.p-colorpicker-panel .p-colorpicker-color-selector {
-    width: 150px;
-    height: 150px;
-    top: 8px;
-    left: 8px;
-    position: absolute;
-}
-
-.p-colorpicker-panel .p-colorpicker-color {
-    width: 150px;
-    height: 150px;
-}
-
-.p-colorpicker-panel .p-colorpicker-color-handle {
-    position: absolute;
-    top: 0px;
-    left: 150px;
-    border-radius: 100%;
-    width: 10px;
-    height: 10px;
-    border-width: 1px;
-    border-style: solid;
-    margin: -5px 0 0 -5px;
-    cursor: pointer;
-    opacity: 0.85;
-}
-
-.p-colorpicker-panel .p-colorpicker-hue {
-    width: 17px;
-    height: 150px;
-    top: 8px;
-    left: 167px;
-    position: absolute;
-    opacity: 0.85;
-}
-
-.p-colorpicker-panel .p-colorpicker-hue-handle {
-    position: absolute;
-    top: 150px;
-    left: 0px;
-    width: 21px;
-    margin-left: -2px;
-    margin-top: -5px;
-    height: 10px;
-    border-width: 2px;
-    border-style: solid;
-    opacity: 0.85;
-    cursor: pointer;
-}
-</style>
diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index 024d522fb..bff4ca61e 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -1,19 +1,18 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
+    root: 'p-colorpicker p-component',
     input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
     panel: ({ instance, props }) => [
         'p-colorpicker-panel',
         {
-            'p-colorpicker-overlay-panel': !props.inline,
+            'p-colorpicker-panel-inline': props.inline,
             'p-disabled': props.disabled,
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    content: 'p-colorpicker-content',
     selector: 'p-colorpicker-color-selector',
-    color: 'p-colorpicker-color',
+    color: 'p-colorpicker-color-background',
     colorHandle: 'p-colorpicker-color-handle',
     hue: 'p-colorpicker-hue',
     hueHandle: 'p-colorpicker-hue-handle'
diff --git a/components/lib/themes/primeone/base/colorpicker/index.js b/components/lib/themes/primeone/base/colorpicker/index.js
index 1b028d1a4..4ae601883 100644
--- a/components/lib/themes/primeone/base/colorpicker/index.js
+++ b/components/lib/themes/primeone/base/colorpicker/index.js
@@ -1,18 +1,12 @@
 export default {
     css: ({ dt }) => `
-.p-colorpicker-color {
-    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+.p-colorpicker {
+    display: inline-block;
+    position: relative;
 }
 
-.p-colorpicker-hue {
-    background: linear-gradient(0deg,
-            red 0,
-            #ff0 17%,
-            #0f0 33%,
-            #0ff 50%,
-            #00f 67%,
-            #f0f 83%,
-            red);
+.p-colorpicker-dragging {
+    cursor: pointer;
 }
 
 .p-colorpicker-preview {
@@ -23,6 +17,7 @@ export default {
     border-radius: ${dt('rounded.base')};
     transition: outline-color ${dt('transition.duration')};
     outline-color: transparent;
+    cursor: pointer;
 }
 
 .p-colorpicker-preview:enabled:focus-visible {
@@ -34,15 +29,82 @@ export default {
     background: ${dt('colorpicker.panel.background')};
     border: 1px solid ${dt('colorpicker.panel.border.color')};
     border-radius: ${dt('rounded.base')};
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    width: 193px;
+    height: 166px;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
-.p-colorpicker-panel .p-colorpicker-color-handle,
-.p-colorpicker-panel .p-colorpicker-hue-handle {
+.p-colorpicker-panel-inline {
+    box-shadow: none;
+    position: static;
+}
+
+.p-colorpicker-content {
+    position: relative;
+}
+
+.p-colorpicker-color-selector {
+    width: 150px;
+    height: 150px;
+    top: 8px;
+    left: 8px;
+    position: absolute;
+}
+
+.p-colorpicker-color-background {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.p-colorpicker-color-handle {
+    position: absolute;
+    top: 0px;
+    left: 150px;
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    border-width: 1px;
+    border-style: solid;
+    margin: -5px 0 0 -5px;
+    cursor: pointer;
+    opacity: 0.85;
     border-color: ${dt('colorpicker.handle.color')};
 }
 
-.p-colorpicker-overlay-panel {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+.p-colorpicker-hue {
+    width: 17px;
+    height: 150px;
+    top: 8px;
+    left: 167px;
+    position: absolute;
+    opacity: 0.85;
+    background: linear-gradient(0deg,
+        red 0,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        red);
+}
+
+.p-colorpicker-hue-handle {
+    position: absolute;
+    top: 150px;
+    left: 0px;
+    width: 21px;
+    margin-left: -2px;
+    margin-top: -5px;
+    height: 10px;
+    border-width: 2px;
+    border-style: solid;
+    opacity: 0.85;
+    cursor: pointer;
+    border-color: ${dt('colorpicker.handle.color')};
 }
 `
 };