From b58a6100edacc027473ee57d19ec920259d85415 Mon Sep 17 00:00:00 2001 From: Angel Fernando Quiroz Campos Date: Mon, 18 Mar 2024 14:50:24 -0500 Subject: [PATCH 1/4] Minor: format code --- assets/vue/composables/theme.js | 14 +- .../vue/views/admin/AdminConfigureColors.vue | 192 +++++++++++++----- 2 files changed, 143 insertions(+), 63 deletions(-) diff --git a/assets/vue/composables/theme.js b/assets/vue/composables/theme.js index 8601e3e4d3..a883df7b78 100644 --- a/assets/vue/composables/theme.js +++ b/assets/vue/composables/theme.js @@ -1,7 +1,6 @@ -import {onMounted, ref, watch} from "vue"; +import { onMounted, ref, watch } from "vue" export const useTheme = () => { - let colors = {} onMounted(() => { @@ -16,7 +15,7 @@ export const useTheme = () => { if (Object.hasOwn(colors, variableName)) { return colors[variableName] } - const colorRef = ref(getCssVariableValue(variableName)) + const colorRef = ref(getCssVariableValue(variableName)) watch(colorRef, (newColor) => { setCssVariableValue(variableName, newColor) }) @@ -25,9 +24,7 @@ export const useTheme = () => { } const getCssVariableValue = (variableName) => { - const colorVariable = getComputedStyle(document.body) - .getPropertyValue(variableName) - .split(", ") + const colorVariable = getComputedStyle(document.body).getPropertyValue(variableName).split(", ") return { r: parseInt(colorVariable[0]), g: parseInt(colorVariable[1]), @@ -36,14 +33,13 @@ export const useTheme = () => { } const setCssVariableValue = (variableName, color) => { - document.documentElement.style - .setProperty(variableName, `${color.r}, ${color.g}, ${color.b}`) + document.documentElement.style.setProperty(variableName, `${color.r}, ${color.g}, ${color.b}`) } const getColors = () => { let colorsPlainObject = {} for (const [key, value] of Object.entries(colors)) { - colorsPlainObject[key] = `${value.value.r} ${value.value.g} ${value.value.b}` + colorsPlainObject[key] = `${value.value.r}, ${value.value.g}, ${value.value.b}` } return colorsPlainObject } diff --git a/assets/vue/views/admin/AdminConfigureColors.vue b/assets/vue/views/admin/AdminConfigureColors.vue index 4e72f99c86..800ddd56dc 100644 --- a/assets/vue/views/admin/AdminConfigureColors.vue +++ b/assets/vue/views/admin/AdminConfigureColors.vue @@ -1,40 +1,108 @@