chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor: format code

Browse Source
pull/5264/head
Angel Fernando Quiroz Campos 2 years ago
parent 16ed16486e
commit b58a6100ed
2 changed files with 143 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      assets/vue/composables/theme.js
  2. 192
      assets/vue/views/admin/AdminConfigureColors.vue

12
assets/vue/composables/theme.js
Unescape View File

@ -1,7 +1,6 @@
import {onMounted, ref, watch} from "vue"; import { onMounted, ref, watch } from "vue"
export const useTheme = () => { export const useTheme = () => {
let colors = {} let colors = {}
onMounted(() => { onMounted(() => {
@ -25,9 +24,7 @@ export const useTheme = () => {
} }
const getCssVariableValue = (variableName) => { const getCssVariableValue = (variableName) => {
const colorVariable = getComputedStyle(document.body) const colorVariable = getComputedStyle(document.body).getPropertyValue(variableName).split(", ")
.getPropertyValue(variableName)
.split(", ")
return { return {
r: parseInt(colorVariable[0]), r: parseInt(colorVariable[0]),
g: parseInt(colorVariable[1]), g: parseInt(colorVariable[1]),
@ -36,14 +33,13 @@ export const useTheme = () => {
} }
const setCssVariableValue = (variableName, color) => { const setCssVariableValue = (variableName, color) => {
document.documentElement.style document.documentElement.style.setProperty(variableName, `${color.r}, ${color.g}, ${color.b}`)
.setProperty(variableName, `${color.r}, ${color.g}, ${color.b}`)
} }
const getColors = () => { const getColors = () => {
let colorsPlainObject = {} let colorsPlainObject = {}
for (const [key, value] of Object.entries(colors)) { 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 return colorsPlainObject
} }

192
assets/vue/views/admin/AdminConfigureColors.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save