Skip to content

Commit

Permalink
Add background color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
stevebauman committed Apr 28, 2024
1 parent 8dbd6f6 commit c5e7e13
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 104 deletions.
104 changes: 4 additions & 100 deletions components/ButtonColorPicker.vue
Original file line number Diff line number Diff line change
@@ -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>
115 changes: 115 additions & 0 deletions components/ColorPicker.vue
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 24 additions & 1 deletion components/Preview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -310,6 +312,7 @@ export default {
showTitle,
showHeader,
background,
backgroundColor,
themeName,
themeType,
themeOpacity,
Expand Down Expand Up @@ -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;
Expand All @@ -457,6 +477,8 @@ export default {
watch([languages, themeName], generateTokens);
watch(background, () => (backgroundColor.value = null));
watch(
[
scale,
Expand Down Expand Up @@ -511,6 +533,7 @@ export default {
setWidth,
setHeight,
backgrounds,
backgroundColor,
resetViewport,
backgroundAttrs,
deleteBackground,
Expand Down
20 changes: 17 additions & 3 deletions components/TabBackgrounds.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
/>
Expand All @@ -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';
Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions composables/useSettings.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function (defaults = {}) {
showColorMenu: false,
showLineNumbers: false,
background: DEFAULT_BACKGROUND,
backgroundColor: null,

themeType: 'dark',
themeOpacity: 1.0,
Expand Down

0 comments on commit c5e7e13

Please sign in to comment.