Add ability to save custom background colors

stevebauman · May 3, 2024 · 524c0e1 · 524c0e1
1 parent ed399b5
commit 524c0e1
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/components/ButtonColorPicker.vue b/components/ButtonColorPicker.vue
@@ -1,13 +1,14 @@
 <template>
     <ColorPicker
         v-bind="$attrs"
+        v-on="$listeners"
         boundaries-element="body"
         class="flex justify-center"
         popover-inner-class="overflow-hidden border-2 rounded-lg shadow-xl bg-ui-gray-700 border-ui-gray-800"
-        #default="{ backgroundColor }"
+        #default="{ solid }"
     >
         <Button class="w-full tooltip-target">
-            <span class="w-6 h-6 rounded-full" :style="{ backgroundColor: backgroundColor }" />
+            <span class="w-6 h-6 rounded-full" :style="{ backgroundColor: solid }" />
 
             Pick Color
         </Button>

diff --git a/components/ColorPicker.vue b/components/ColorPicker.vue
@@ -4,7 +4,7 @@
         class="flex justify-center"
         popover-inner-class="overflow-hidden border rounded-lg shadow-xl bg-ui-gray-700 border-ui-gray-800"
     >
-        <slot :background-color="backgroundColor" />
+        <slot :alpha="alphaColor" :solid="solidColor" />
 
         <template #popover>
             <Chrome
@@ -18,13 +18,15 @@
                     })
                 "
             />
+
+            <slot name="popover" :alpha="alphaColor" :solid="solidColor" />
         </template>
     </V-Popover>
 </template>
 
 <style>
 .vc-chrome {
-    @apply !rounded-md !bg-none !shadow-none;
+    @apply !rounded-md !bg-none !shadow-none divide-y divide-ui-gray-800;
 }
 
 .vc-chrome-body {
@@ -52,15 +54,15 @@
 }
 
 .vc-chrome-fields .vc-input__input {
-    @apply !border-0 !rounded-md !shadow-none !text-ui-gray-400 !bg-ui-gray-600 hover:bg-ui-gray-900 focus:outline-none focus:ring-0;
+    @apply !border-0 !rounded-md !shadow-none !text-ui-gray-400 !bg-ui-gray-800 hover:!bg-ui-gray-900 focus:outline-none focus:ring-0;
 }
 
 .vc-chrome-fields .vc-input__label {
-    @apply text-xs font-semibold text-ui-gray-300 whitespace-nowrap;
+    @apply text-xs font-semibold !text-ui-gray-500 whitespace-nowrap;
 }
 
 .vc-chrome-toggle-btn {
-    @apply flex items-center !text-ui-gray-300 rounded-md border border-gray-300 justify-center transition duration-100 ease-in-out bg-ui-gray-700 hover:bg-ui-gray-900;
+    @apply flex items-center !text-ui-gray-300 rounded-md justify-center transition duration-100 ease-in-out bg-ui-gray-700 hover:bg-ui-gray-900;
 }
 
 [color-scheme='dark'] .vc-chrome-toggle-btn {
@@ -105,11 +107,15 @@ export default {
                 }
         );
 
-        const backgroundColor = computed(() => {
+        const solidColor = computed(() => {
             return `rgb(${rgba.value.red}, ${rgba.value.green}, ${rgba.value.blue})`;
         });
 
-        return { rgba, backgroundColor };
+        const alphaColor = computed(() => {
+            return `rgba(${rgba.value.red}, ${rgba.value.green}, ${rgba.value.blue}, ${rgba.value.alpha})`;
+        });
+
+        return { rgba, solidColor, alphaColor };
     },
 };
 </script>
diff --git a/components/TabBackgrounds.vue b/components/TabBackgrounds.vue
@@ -24,6 +24,22 @@
                     >
                         <DropletIcon class="w-5 h-5 text-ui-gray-300" />
                     </ButtonBackground>
+
+                    <template #popover="{ alpha }">
+                        <div class="p-2 flex justify-center border-t border-ui-gray-800">
+                            <Button
+                                size="xs"
+                                class="w-full justify-center"
+                                @click.native="
+                                    addCustomBackground({
+                                        style: { backgroundColor: alpha },
+                                    })
+                                "
+                            >
+                                Save
+                            </Button>
+                        </div>
+                    </template>
                 </ColorPicker>
 
                 <ButtonBackground
@@ -45,6 +61,7 @@
 </template>
 
 <script>
+import useBackgrounds from '@/composables/useBackgrounds';
 import { PlusCircleIcon, DropletIcon } from 'vue-feather-icons';
 import { onMounted, toRefs, watch } from '@nuxtjs/composition-api';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
@@ -68,13 +85,17 @@ export default {
     components: { PlusCircleIcon, DropletIcon },
 
     setup(props, { refs }) {
+        const { addCustomBackground } = useBackgrounds();
+
         const { background, backgrounds } = toRefs(props);
 
         const { scrollRefIntoView } = useScrollRefIntoView(refs);
 
         onMounted(() => scrollRefIntoView(`button-background-${background.value}`));
 
         watch(backgrounds, () => scrollRefIntoView(`button-background-${background.value}`));
+
+        return { addCustomBackground };
     },
 };
 </script>
diff --git a/content/changelog.md b/content/changelog.md
@@ -1,8 +1,16 @@
+## May 3rd, 2024
+
+**Added**
+
+- Ability to save custom background colors
+
+---
+
 ## April 28th, 2024
 
 **Added**
 
-- Ability to select custom solid background color
+- Ability to select custom background colors
 
 ---