Atoms - Improve built-in annotator's color picker

graphieros · Dec 1, 2024 · dabee4d · dabee4d
1 parent 2dc0d12
commit dabee4d
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 11 deletions.
diff --git a/src/atoms/ColorPicker.vue b/src/atoms/ColorPicker.vue
@@ -2,6 +2,8 @@
 import { ref, computed, watch } from "vue";
 import BaseIcon from "./BaseIcon.vue";
 import { adaptColorToBackground } from "../lib";
+import vClickOutside from '../directives/vClickOutside';
+
 
 const props = defineProps({
     value: {
@@ -12,6 +14,14 @@ const props = defineProps({
         type: String,
         default: "50px", 
     },
+    backgroundColor: {
+        type: String,
+        default: '#FFFFFF'
+    },
+    buttonBorderColor: {
+        type: String,
+        default: '#FFFFFF'    
+    }
 });
 
 const emit = defineEmits(["update:value"]);
@@ -25,10 +35,27 @@ const colorPickerStyle = computed(() => ({
 
 const colorInput = ref(null);
 
+const isOpen = ref(false);
+
 const triggerColorPicker = () => {
     colorInput.value?.click();
 };
 
+function setColor(color) {
+    emit("update:value", color);
+    isOpen.value = false;
+}
+
+function close() {
+    isOpen.value = false;
+}
+
+function closeIfOpen() {
+    if(isOpen.value) {
+        close();
+    }
+}
+
 const updateColor = (event) => {
     const newColor = event.target.value;
     emit("update:value", newColor);
@@ -44,36 +71,96 @@ watch(
         colorInput.value.value = newVal;
     }
 );
+
+const palette = ref([
+    '#000000',
+    '#FFFFFF',
+    '#FF5733',
+    '#33FF57',
+    '#3357FF',
+    '#FFC300',
+    '#800080',
+    '#FF1493',
+    '#00CED1',
+]);
 </script>
 
 <template>
-    <div :style="colorPickerStyle" class="color-picker-wrapper" @click="triggerColorPicker">
-        <input ref="colorInput" type="color" :value="value" class="hidden-input" @input="updateColor" />
-        <div class="icon">
-            <BaseIcon name="palette" :stroke="iconColor" :size="22"/>
+    <div v-click-outside="closeIfOpen" style="height: 100%; width: 100%; position: relative">
+        <div @click="isOpen = !isOpen" :style="colorPickerStyle">
+            <div class="icon">
+                <BaseIcon name="palette" :stroke="iconColor" :size="22"/>
+            </div>
+        </div>
+    
+        <div class="vue-ui-color-picker" v-if="isOpen" :style="{
+            backgroundColor: backgroundColor
+        }">
+            <div v-for="c in palette" class="vue-ui-color-picker-option"  :style="{ 
+                    backgroundColor: c,
+                    outline: `1px solid ${buttonBorderColor}`, 
+                }" @click="() => setColor(c)"/>
+            <div class="vue-ui-color-picker-option" @click="triggerColorPicker" :style="{
+                backgroundColor: value,
+                outline: `1px solid ${buttonBorderColor}`, 
+            }">
+                <div style="position: absolute; top: 50%; left:50%; transform: translate(-50%, -46%)">
+                    <BaseIcon name="colorPicker" :stroke="iconColor" :size="22"/>
+                </div>
+                <input ref="colorInput" type="color" :value="value" class="hidden-input" @input="updateColor" />
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
 .hidden-input {
-    visibility: hidden
+    max-height: 0px;
+    max-width: 0px;
+    visibility: hidden;
 }
 
 .color-picker-wrapper {
+    cursor: pointer;
     display: inline-block;
     position: relative;
-    cursor: pointer;
 }
 
 .icon {
+    align-items:center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left:0;
     position: absolute;
     top: 0;
-    left:0;
-    height: 100%;
     width: 100%;
-    display: flex;
+}
+.vue-ui-color-picker {
+    border-radius: 0px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
+    display: grid;
+    gap: 6px;
+    grid-template-columns: 32px 32px;
+    left: calc(100% + 30px);
+    padding: 6px;
+    position: absolute;
+    top: -48px;
+    z-index: 1;
+}
+
+.vue-ui-color-picker-option {
     align-items:center;
+    border-radius: 0px;
+    display: flex;
+    height: 32px;
     justify-content: center;
+    position: relative;
+    width: 32px;
+}
+
+.vue-ui-color-picker-option:hover {
+    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
+    transition: all 0.2s ease-in-out;
 }
 </style>
diff --git a/src/atoms/PenAndPaper.vue b/src/atoms/PenAndPaper.vue
@@ -281,8 +281,11 @@ const range = ref(null);
         }"
             style="padding: 0 !important"
             >
-            <ColorPicker v-model:value="currentColor" />
-
+            <ColorPicker 
+                v-model:value="currentColor" 
+                :backgroundColor="backgroundColor"
+                :buttonBorderColor="buttonBorderColor"
+            />
         </button>
         <button
             :class="{
@@ -395,6 +398,7 @@ const range = ref(null);
     padding: 2px;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
+    position: relative;
 }
 .vue-ui-pen-and-paper-action:hover {
     box-shadow: 2px 2px 6px rgba(0,0,0,0.3);