Merge pull request #2151 from nocodb/feat/ColorPicker

ColorPicker component

packages/nc-gui/components/project/spreadsheet/components/ColorPicker.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="color-picker">
+    <div
+      v-for="colId in Math.ceil(colors.length / rowSize)"
+      :key="colId"
+      class="color-picker-row"
+    >
+      <button
+        v-for="(color, i) in colors.slice((colId - 1) * rowSize, (colId) * rowSize)"
+        :key="`color-${colId}-${i}`"
+        class="color-selector"
+        :class="compare(picked, color) ? 'selected':''"
+        :style="{ 'background-color': color }"
+        @click="select(color)"
+      >
+        {{ compare(picked, color) ? '&#10003;':'' }}
+      </button>
+    </div>
+    <v-expansion-panels v-if="advanced">
+      <v-expansion-panel>
+        <v-expansion-panel-header>Advanced</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-container class="d-flex flex-column">
+            <v-btn class="primary lighten-2" @click="select(picked)">
+              Pick Color
+            </v-btn>
+            <v-color-picker
+              v-model="picked"
+              class="align-self-center ma-2"
+              canvas-height="100px"
+              mode="hexa"
+            />
+          </v-container>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script>
+import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
+
+export default {
+  name: 'ColorPicker',
+  props: {
+    value: {
+      type: String,
+      default: () => enumColor.light[0]
+    },
+    colors: {
+      type: Array,
+      default: () => enumColor.light.concat(enumColor.dark)
+    },
+    rowSize: {
+      type: Number,
+      default: () => 10
+    },
+    advanced: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data: () => ({
+    picked: ''
+  }),
+  created() {
+    this.picked = this.value || ''
+  },
+  methods: {
+    select(color) {
+      this.picked = color
+      this.$emit('input', color)
+    },
+    compare(colorA, colorB) {
+      if ((typeof colorA === 'string' || colorA instanceof String) &&
+          (typeof colorB === 'string' || colorB instanceof String)) {
+        return colorA.toLowerCase() === colorB.toLowerCase()
+      }
+      return false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: white;
+  padding: 10px;
+}
+
+.color-picker-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.color-selector {
+  position: relative;
+  height: 32px;
+  width: 32px;
+  margin: 10px 5px;
+  border-radius: 5px;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+}
+
+.color-selector:hover {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+
+.color-selector.selected {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+
+/deep/ .v-input__control {
+  height: auto!important;
+}
+
+</style>

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"
+      row-size="8"
-      hide-inputs
+      :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: {

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"
+      row-size="8"
-      hide-inputs
+      :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: {