From 41325eb2b3249411900788b6d9cc2ba2cb5ea724 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 25 May 2022 02:53:39 +0300
Subject: [PATCH] feat: use ColorPicker on column options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/editColumn/CheckboxOptions.vue          | 10 +++++++---
 .../components/editColumn/RatingOptions.vue            | 10 +++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue
index d2f1de4caf..b3593e4f64 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue
@@ -30,18 +30,22 @@
         </template>
       </v-select>
     </div>
-    <v-color-picker
+    <color-picker
       v-model="colMeta.color"
-      class="mx-auto"
-      hide-inputs
+      row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
     />
   </div>
 </template>
 
 <script>
+import ColorPicker from '@/components/project/spreadsheet/components/ColorPicker.vue'
 
 export default {
   name: 'CheckboxOptions',
+  components: {
+    ColorPicker
+  },
   props: ['column', 'meta', 'value'],
   data: () => ({
     colMeta: {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
index 9114edf2cd..8af9bfb98a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue
@@ -39,18 +39,22 @@
         class="caption"
       />
     </div>
-    <v-color-picker
+    <color-picker
       v-model="colMeta.color"
-      class="mx-auto"
-      hide-inputs
+      row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
     />
   </div>
 </template>
 
 <script>
+import ColorPicker from '@/components/project/spreadsheet/components/ColorPicker.vue'
 
 export default {
   name: 'RatingOptions',
+  components: {
+    ColorPicker
+  },
   props: ['column', 'meta', 'value'],
   data: () => ({
     colMeta: {