Add background color picker

stevebauman · Apr 28, 2024 · c5e7e13 · c5e7e13
1 parent 8dbd6f6
commit c5e7e13
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 104 deletions.
diff --git a/components/ButtonColorPicker.vue b/components/ButtonColorPicker.vue
@@ -1,111 +1,15 @@
 <template>
-    <V-Popover
+    <ColorPicker
+        v-bind="$attrs"
         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 }"
     >
         <Button class="w-full tooltip-target">
             <span class="w-6 h-6 rounded-full" :style="{ backgroundColor: backgroundColor }" />
 
             Pick Color
         </Button>
-
-        <template #popover>
-            <Chrome
-                :value="{ r: value.red, g: value.green, b: value.blue, a: value.alpha }"
-                @input="
-                    ({ rgba }) => {
-                        $emit('change', {
-                            red: rgba.r,
-                            green: rgba.g,
-                            blue: rgba.b,
-                            alpha: rgba.a,
-                        });
-                    }
-                "
-            />
-        </template>
-    </V-Popover>
+    </ColorPicker>
 </template>
-
-<style>
-.vc-chrome {
-    @apply !rounded-lg !bg-none !shadow-none;
-}
-
-.vc-chrome-body {
-    @apply !bg-ui-gray-700;
-}
-
-.vc-saturation {
-    @apply m-2 rounded-lg;
-}
-
-.vc-chrome-saturation-wrap {
-    @apply p-6 !bg-ui-gray-700;
-}
-
-.vc-saturation--white {
-    @apply rounded-lg;
-}
-
-.vc-saturation--black {
-    @apply rounded-lg;
-}
-
-.vc-chrome-fields-wrap {
-    @apply space-x-2;
-}
-
-.vc-chrome-fields .vc-input__input {
-    @apply !border-0 !rounded-lg !shadow-none !text-ui-gray-400 !bg-ui-gray-600 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;
-}
-
-.vc-chrome-toggle-btn {
-    @apply flex items-center !text-ui-gray-300 rounded-lg border border-gray-300 justify-center transition duration-100 ease-in-out bg-ui-gray-700 hover:bg-ui-gray-900;
-}
-
-[color-scheme='dark'] .vc-chrome-toggle-btn {
-    @apply border-ui-gray-900;
-}
-
-.vc-chrome-toggle-icon {
-    @apply !m-0 inline-flex items-center gap-2 leading-none transition duration-100 ease-in-out focus:outline-none focus:ring-0;
-}
-
-.vc-chrome-toggle-icon svg path {
-    fill: currentColor !important;
-}
-
-.vc-chrome-toggle-icon-highlight {
-    @apply hidden;
-}
-</style>
-
-<script>
-import { Chrome } from 'vue-color';
-import { computed } from '@nuxtjs/composition-api';
-
-export default {
-    props: {
-        value: {
-            type: Object,
-            required: true,
-        },
-    },
-
-    components: { Chrome },
-
-    setup(props) {
-        const backgroundColor = computed(() => {
-            return `rgb(${props.value.red}, ${props.value.green}, ${props.value.blue})`;
-        });
-
-        return { backgroundColor };
-    },
-};
-</script>
diff --git a/components/ColorPicker.vue b/components/ColorPicker.vue
@@ -0,0 +1,115 @@
+<template>
+    <V-Popover
+        boundaries-element="body"
+        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" />
+
+        <template #popover>
+            <Chrome
+                :value="{ r: rgba.red, g: rgba.green, b: rgba.blue, a: rgba.alpha }"
+                @input="
+                    $emit('change', {
+                        red: $event.rgba.r,
+                        green: $event.rgba.g,
+                        blue: $event.rgba.b,
+                        alpha: $event.rgba.a,
+                    })
+                "
+            />
+        </template>
+    </V-Popover>
+</template>
+
+<style>
+.vc-chrome {
+    @apply !rounded-md !bg-none !shadow-none;
+}
+
+.vc-chrome-body {
+    @apply !bg-ui-gray-700;
+}
+
+.vc-saturation {
+    @apply m-2 rounded-md;
+}
+
+.vc-chrome-saturation-wrap {
+    @apply p-6 !bg-ui-gray-700;
+}
+
+.vc-saturation--white {
+    @apply rounded-md;
+}
+
+.vc-saturation--black {
+    @apply rounded-md;
+}
+
+.vc-chrome-fields-wrap {
+    @apply space-x-2;
+}
+
+.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;
+}
+
+.vc-chrome-fields .vc-input__label {
+    @apply text-xs font-semibold text-ui-gray-300 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;
+}
+
+[color-scheme='dark'] .vc-chrome-toggle-btn {
+    @apply border-ui-gray-900;
+}
+
+.vc-chrome-toggle-icon {
+    @apply !m-0 inline-flex items-center gap-2 leading-none transition duration-100 ease-in-out focus:outline-none focus:ring-0;
+}
+
+.vc-chrome-toggle-icon svg path {
+    fill: currentColor !important;
+}
+
+.vc-chrome-toggle-icon-highlight {
+    @apply hidden;
+}
+</style>
+
+<script>
+import { Chrome } from 'vue-color';
+import { computed } from '@nuxtjs/composition-api';
+
+export default {
+    props: {
+        value: {
+            type: Object,
+            required: false,
+        },
+    },
+
+    components: { Chrome },
+
+    setup(props) {
+        const rgba = computed(
+            () =>
+                props.value ?? {
+                    red: 0,
+                    green: 0,
+                    blue: 0,
+                    alpha: 1,
+                }
+        );
+
+        const backgroundColor = computed(() => {
+            return `rgb(${rgba.value.red}, ${rgba.value.green}, ${rgba.value.blue})`;
+        });
+
+        return { rgba, backgroundColor };
+    },
+};
+</script>
diff --git a/components/Preview.vue b/components/Preview.vue
@@ -189,9 +189,11 @@
                     <TabBackgrounds
                         v-if="active === 'backgrounds'"
                         :backgrounds="backgrounds"
+                        :background-color="backgroundColor"
                         :background="settings.background"
                         @delete="deleteBackground"
                         @select="settings.background = $event"
+                        @color="settings.backgroundColor = $event"
                         @add="showingBackgroundsModal = $config.isDesktop"
                     />
                 </template>
@@ -310,6 +312,7 @@ export default {
             showTitle,
             showHeader,
             background,
+            backgroundColor,
             themeName,
             themeType,
             themeOpacity,
@@ -436,7 +439,24 @@ export default {
             },
         ]);
 
-        const backgroundAttrs = computed(() => getBackgroundAttrs(background.value));
+        const backgroundAttrs = computed(() => {
+            if (backgroundColor.value) {
+                const color = [
+                    backgroundColor.value.red,
+                    backgroundColor.value.green,
+                    backgroundColor.value.blue,
+                    backgroundColor.value.alpha,
+                ].join(', ');
+
+                return {
+                    style: {
+                        backgroundColor: `rgba(${color})`,
+                    },
+                };
+            }
+
+            return getBackgroundAttrs(background.value);
+        });
 
         let templateGenerationDebounce = null;
 
@@ -457,6 +477,8 @@ export default {
 
             watch([languages, themeName], generateTokens);
 
+            watch(background, () => (backgroundColor.value = null));
+
             watch(
                 [
                     scale,
@@ -511,6 +533,7 @@ export default {
             setWidth,
             setHeight,
             backgrounds,
+            backgroundColor,
             resetViewport,
             backgroundAttrs,
             deleteBackground,

diff --git a/components/TabBackgrounds.vue b/components/TabBackgrounds.vue
@@ -16,16 +16,26 @@
                     <PlusCircleIcon class="w-5 h-5 text-ui-gray-300" />
                 </ButtonBackground>
 
+                <ColorPicker :value="backgroundColor" @change="$emit('color', $event)">
+                    <ButtonBackground
+                        :active="!!backgroundColor"
+                        v-tooltip.bottom="'Pick Color'"
+                        class="highlight flex items-center justify-center bg-ui-gray-600 active:bg-ui-gray-900 hover:bg-ui-gray-800"
+                    >
+                        <DropletIcon class="w-5 h-5 text-ui-gray-300" />
+                    </ButtonBackground>
+                </ColorPicker>
+
                 <ButtonBackground
                     v-for="{ id, custom, ...attrs } in backgrounds"
                     v-tooltip="{ content: id, delay: 500 }"
                     class="highlight"
                     :key="id"
                     :custom="custom"
                     :attributes="attrs"
-                    :active="background === id"
                     :ref="`button-background-${id}`"
                     :dusk="`button-background-${id}`"
+                    :active="background === id && !backgroundColor"
                     @delete="$emit('delete', id)"
                     @click.native="$emit('select', id)"
                 />
@@ -35,7 +45,7 @@
 </template>
 
 <script>
-import { PlusCircleIcon } from 'vue-feather-icons';
+import { PlusCircleIcon, DropletIcon } from 'vue-feather-icons';
 import { onMounted, toRefs, watch } from '@nuxtjs/composition-api';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
 
@@ -49,9 +59,13 @@ export default {
             type: Array,
             required: true,
         },
+        backgroundColor: {
+            type: Object,
+            required: false,
+        },
     },
 
-    components: { PlusCircleIcon },
+    components: { PlusCircleIcon, DropletIcon },
 
     setup(props, { refs }) {
         const { background, backgrounds } = toRefs(props);

diff --git a/composables/useSettings.js b/composables/useSettings.js
@@ -20,6 +20,7 @@ export default function (defaults = {}) {
         showColorMenu: false,
         showLineNumbers: false,
         background: DEFAULT_BACKGROUND,
+        backgroundColor: null,
 
         themeType: 'dark',
         themeOpacity: 1.0,