Minor: format code

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
   }

assets/vue/views/admin/AdminConfigureColors.vue

@@ -1,40 +1,108 @@
 <template class="personal-theme">
-  <h4 class="mb-4">{{ t('Configure chamilo colors') }}</h4>
+  <h4 class="mb-4">{{ t("Configure chamilo colors") }}</h4>
 
   <div class="grid grid-cols-2 gap-2 mb-8">
-    <BaseColorPicker v-model="primaryColor" :label="t('Pick primary color')"/>
-    <BaseColorPicker v-model="primaryColorGradient" :label="t('Pick primary color gradient')"/>
-    <BaseColorPicker v-model="secondaryColor" :label="t('Pick secondary color')"/>
-    <BaseColorPicker v-model="secondaryColorGradient" :label="t('Pick secondary color gradient')"/>
-    <BaseColorPicker v-model="tertiaryColor" :label="t('Pick tertiary color')"/>
-    <BaseColorPicker v-model="tertiaryColorGradient" :label="t('Pick tertiary color gradient')"/>
-    <BaseColorPicker v-model="successColor" :label="t('Pick success color')"/>
-    <BaseColorPicker v-model="successColorGradient" :label="t('Pick success color gradient')"/>
-    <BaseColorPicker v-model="dangerColor" :label="t('Pick danger color')"/>
+    <BaseColorPicker
+      v-model="primaryColor"
+      :label="t('Pick primary color')"
+    />
+    <BaseColorPicker
+      v-model="primaryColorGradient"
+      :label="t('Pick primary color gradient')"
+    />
+    <BaseColorPicker
+      v-model="secondaryColor"
+      :label="t('Pick secondary color')"
+    />
+    <BaseColorPicker
+      v-model="secondaryColorGradient"
+      :label="t('Pick secondary color gradient')"
+    />
+    <BaseColorPicker
+      v-model="tertiaryColor"
+      :label="t('Pick tertiary color')"
+    />
+    <BaseColorPicker
+      v-model="tertiaryColorGradient"
+      :label="t('Pick tertiary color gradient')"
+    />
+    <BaseColorPicker
+      v-model="successColor"
+      :label="t('Pick success color')"
+    />
+    <BaseColorPicker
+      v-model="successColorGradient"
+      :label="t('Pick success color gradient')"
+    />
+    <BaseColorPicker
+      v-model="dangerColor"
+      :label="t('Pick danger color')"
+    />
   </div>
 
   <div class="flex flex-wrap mb-4">
-    <BaseButton type="primary" icon="send" :label="t('Save')" @click="saveColors"/>
+    <BaseButton
+      type="primary"
+      icon="send"
+      :label="t('Save')"
+      @click="saveColors"
+    />
   </div>
 
-  <hr>
-  <h5 class="mb-4">{{ t('You can see examples of how chamilo will look here') }}</h5>
+  <hr />
+  <h5 class="mb-4">{{ t("You can see examples of how chamilo will look here") }}</h5>
 
   <div class="mb-4">
-    <p class="mb-3 text-lg">{{ t('Buttons') }}</p>
+    <p class="mb-3 text-lg">{{ t("Buttons") }}</p>
     <div class="flex flex-row flex-wrap">
-      <BaseButton class="mr-2 mb-2" :label="t('Button')" type="primary" icon="eye-on"/>
-      <BaseButton class="mr-2 mb-2" :label="t('Disabled')" type="primary" icon="eye-on" disabled/>
-      <BaseButton class="mr-2 mb-2" :label="t('Secondary')" type="secondary" icon="eye-on"/>
-      <BaseButton class="mr-2 mb-2" :label="t('Tertiary')" type="black" icon="eye-on"/>
-      <BaseButton class="mr-2 mb-2" type="primary" icon="cog" only-icon/>
-      <BaseButton class="mr-2 mb-2" :label="t('Success')" type="success" icon="send"/>
-      <BaseButton class="mr-2 mb-2" :label="t('Danger')" type="danger" icon="delete"/>
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Button')"
+        type="primary"
+        icon="eye-on"
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Disabled')"
+        type="primary"
+        icon="eye-on"
+        disabled
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Secondary')"
+        type="secondary"
+        icon="eye-on"
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Tertiary')"
+        type="black"
+        icon="eye-on"
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        type="primary"
+        icon="cog"
+        only-icon
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Success')"
+        type="success"
+        icon="send"
+      />
+      <BaseButton
+        class="mr-2 mb-2"
+        :label="t('Danger')"
+        type="danger"
+        icon="delete"
+      />
     </div>
   </div>
 
   <div class="mb-4">
-    <p class="mb-3 text-lg">{{ t('Menu on button pressed') }}</p>
+    <p class="mb-3 text-lg">{{ t("Menu on button pressed") }}</p>
     <BaseButton
       class="mr-2 mb-2"
       type="primary"
@@ -43,13 +111,27 @@
       only-icon
       @click="toggle"
     />
-    <BaseMenu id="menu" ref="menu" :model="menuItems"></BaseMenu>
+    <BaseMenu
+      id="menu"
+      ref="menu"
+      :model="menuItems"
+    ></BaseMenu>
   </div>
 
   <div class="mb-4">
-    <p class="mb-3 text-lg">{{ t('Checkbox and radio buttons') }}</p>
-    <BaseCheckbox id="check1" v-model="checkbox1" :label="t('Checkbox 1')" name="checkbox1"/>
-    <BaseCheckbox id="check2" v-model="checkbox2" :label="t('Checkbox 2')" name="checkbox2"/>
+    <p class="mb-3 text-lg">{{ t("Checkbox and radio buttons") }}</p>
+    <BaseCheckbox
+      id="check1"
+      v-model="checkbox1"
+      :label="t('Checkbox 1')"
+      name="checkbox1"
+    />
+    <BaseCheckbox
+      id="check2"
+      v-model="checkbox2"
+      :label="t('Checkbox 2')"
+      name="checkbox2"
+    />
     <div class="mb-2"></div>
     <BaseRadioButtons
       v-model="radioValue"
@@ -69,7 +151,12 @@
 
   <div class="mb-4">
     <p class="mb-3 text-lg">Dialogs</p>
-    <BaseButton :label="t('Show dialog')" type="black" icon="eye-on" @click="isDialogVisible = true"/>
+    <BaseButton
+      :label="t('Show dialog')"
+      type="black"
+      icon="eye-on"
+      @click="isDialogVisible = true"
+    />
     <BaseDialogConfirmCancel
       :title="t('Dialog example')"
       :is-visible="isDialogVisible"
@@ -81,28 +168,29 @@
 
 <script setup>
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
-import {useI18n} from "vue-i18n"
+import { useI18n } from "vue-i18n"
 import BaseMenu from "../../components/basecomponents/BaseMenu.vue"
-import {ref} from "vue"
+import { ref } from "vue"
 import BaseCheckbox from "../../components/basecomponents/BaseCheckbox.vue"
 import BaseRadioButtons from "../../components/basecomponents/BaseRadioButtons.vue"
 import BaseDialogConfirmCancel from "../../components/basecomponents/BaseDialogConfirmCancel.vue"
 import BaseInputText from "../../components/basecomponents/BaseInputText.vue"
 import BaseColorPicker from "../../components/basecomponents/BaseColorPicker.vue"
-import {useTheme} from "../../composables/theme"
-
-const {t} = useI18n()
-const {getColorTheme, getColors} = useTheme()
-
-let primaryColor = getColorTheme('--color-primary-base')
-let primaryColorGradient = getColorTheme('--color-primary-gradient')
-let secondaryColor = getColorTheme('--color-secondary-base')
-let secondaryColorGradient = getColorTheme('--color-secondary-gradient')
-let tertiaryColor = getColorTheme('--color-tertiary-base')
-let tertiaryColorGradient = getColorTheme('--color-tertiary-gradient')
-let successColor = getColorTheme('--color-success-base')
-let successColorGradient = getColorTheme('--color-success-gradient')
-let dangerColor = getColorTheme('--color-danger-base')
+import { useTheme } from "../../composables/theme"
+import axios from "axios"
+
+const { t } = useI18n()
+const { getColorTheme, getColors } = useTheme()
+
+let primaryColor = getColorTheme("--color-primary-base")
+let primaryColorGradient = getColorTheme("--color-primary-gradient")
+let secondaryColor = getColorTheme("--color-secondary-base")
+let secondaryColorGradient = getColorTheme("--color-secondary-gradient")
+let tertiaryColor = getColorTheme("--color-tertiary-base")
+let tertiaryColorGradient = getColorTheme("--color-tertiary-gradient")
+let successColor = getColorTheme("--color-success-base")
+let successColorGradient = getColorTheme("--color-success-gradient")
+let dangerColor = getColorTheme("--color-danger-base")
 
 const saveColors = () => {
   let colors = getColors()
@@ -110,12 +198,8 @@ const saveColors = () => {
   console.log(colors)
 }
 
-const menu = ref('menu')
-const menuItems = [
-  {label: t('Item 1')},
-  {label: t('Item 2')},
-  {label: t('Item 3')},
-]
+const menu = ref("menu")
+const menuItems = [{ label: t("Item 1") }, { label: t("Item 2") }, { label: t("Item 3") }]
 const toggle = (event) => {
   menu.value.toggle(event)
 }
@@ -124,13 +208,13 @@ const checkbox1 = ref(true)
 const checkbox2 = ref(false)
 
 const radioButtons = [
-  {label: t('Value 1'), value: 'value1'},
-  {label: t('Value 2'), value: 'value2'},
-  {label: t('Value 3'), value: 'value3'},
+  { label: t("Value 1"), value: "value1" },
+  { label: t("Value 2"), value: "value2" },
+  { label: t("Value 3"), value: "value3" },
 ]
-const radioValue = ref('value1')
+const radioValue = ref("value1")
 
 const isDialogVisible = ref(false)
 
-const inputText = ref('')
+const inputText = ref("")
 </script>