diff --git a/assets/css/scss/_admin_index.scss b/assets/css/scss/_admin_index.scss index f53ec57008..fc96e5c6aa 100644 --- a/assets/css/scss/_admin_index.scss +++ b/assets/css/scss/_admin_index.scss @@ -10,3 +10,21 @@ @apply border-none border-0 m-0 p-0 w-full; } } + +.admin-colors { + &__container { + @apply flex flex-col md:flex-row gap-4 mt-6; + } + + &__settings { + @apply space-y-4 flex-1; + + .row-group { + @apply flex flex-col gap-4 items-start md:items-end md:grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3; + } + } + + &__preview { + @apply space-y-4 flex-1; + } +} diff --git a/assets/vue/components/basecomponents/BaseColorPicker.vue b/assets/vue/components/basecomponents/BaseColorPicker.vue index eba9e89118..bd94c17c2c 100644 --- a/assets/vue/components/basecomponents/BaseColorPicker.vue +++ b/assets/vue/components/basecomponents/BaseColorPicker.vue @@ -1,15 +1,20 @@ diff --git a/assets/vue/components/basecomponents/BaseInputText.vue b/assets/vue/components/basecomponents/BaseInputText.vue index f1d979df72..cf08ca1a53 100644 --- a/assets/vue/components/basecomponents/BaseInputText.vue +++ b/assets/vue/components/basecomponents/BaseInputText.vue @@ -6,6 +6,7 @@ :model-value="modelValue" :class="{ 'p-invalid': isInvalid, [inputClass]: true }" :aria-label="label" + :disabled="disabled" type="text" @update:model-value="updateValue" /> @@ -34,7 +35,7 @@ diff --git a/assets/vue/components/layout/TopbarLoggedIn.vue b/assets/vue/components/layout/TopbarLoggedIn.vue index 18daa0321d..9062b36eec 100644 --- a/assets/vue/components/layout/TopbarLoggedIn.vue +++ b/assets/vue/components/layout/TopbarLoggedIn.vue @@ -94,6 +94,10 @@ const userSubmenuItems = computed(() => [ { label: props.currentUser.fullName, items: [ + { + label: t("My profile"), + command: async () => await router.push({ name: "AccountHome" }), + }, { label: t("My General Certificate"), url: "/main/social/my_skills_report.php?a=generate_custom_skill", @@ -102,10 +106,6 @@ const userSubmenuItems = computed(() => [ label: t("My skills"), url: "/main/social/my_skills_report.php", }, - { - label: t("Settings"), - command: async () => await router.push({ name: "AccountHome" }), - }, { separator: true, }, diff --git a/assets/vue/composables/theme.js b/assets/vue/composables/theme.js index 927a238cee..c8053000a3 100644 --- a/assets/vue/composables/theme.js +++ b/assets/vue/composables/theme.js @@ -41,6 +41,16 @@ export const useTheme = () => { return colorsPlainObject } + const setColors = (colorsObj) => { + for (const key in colorsObj) { + if (colors[key] === undefined || colors[key] === null) { + console.error(`Color with key ${key} is on color set`) + continue + } + colors[key].value = colorFromCSSVariable(colorsObj[key]) + } + } + const colorToCSSVariable = (color) => { // according to documentation https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#syntax // the format "r g b" should work but because how rules in css are defined does not @@ -58,5 +68,6 @@ export const useTheme = () => { return { getColorTheme, getColors, + setColors, } } diff --git a/assets/vue/services/baseService.js b/assets/vue/services/baseService.js index 63f5955fcc..e092ee2399 100644 --- a/assets/vue/services/baseService.js +++ b/assets/vue/services/baseService.js @@ -41,6 +41,17 @@ export default { return data }, + /** + * @param {string} iri + * @param {Object} params + * @returns {Promise} + */ + async put(iri, params) { + const { data } = await api.put(iri, params) + + return data + }, + /** * @param {string} endpoint * @param {Object} params diff --git a/assets/vue/services/colorThemeService.js b/assets/vue/services/colorThemeService.js new file mode 100644 index 0000000000..e74ee17df9 --- /dev/null +++ b/assets/vue/services/colorThemeService.js @@ -0,0 +1,41 @@ +import baseService from "./baseService" + +const url = "/api/color_themes" + +/** + * Gets the color themes + * + * @returns {Promise} + */ +async function getThemes() { + const { items } = await baseService.getCollection(url) + + return items +} + +/** + * Update or create a theme with the title + * + * @param {string|null} iri + * @param {string} title + * @param {Object} colors + * @returns {Promise} + */ +async function updateTheme({ iri = null, title, colors }) { + if (iri) { + return await baseService.put(iri, { + title, + variables: colors, + }) + } + + return await baseService.post(url, { + title, + variables: colors, + }) +} + +export default { + getThemes, + updateTheme, +} diff --git a/assets/vue/views/admin/AdminConfigureColors.vue b/assets/vue/views/admin/AdminConfigureColors.vue index 7006f5a9f7..440819ac5a 100644 --- a/assets/vue/views/admin/AdminConfigureColors.vue +++ b/assets/vue/views/admin/AdminConfigureColors.vue @@ -1,378 +1,409 @@ -