Changes about platform style theme - refs BT#21621

assets/css/app.scss

@@ -10,42 +10,6 @@
 
 @import "tinymce/skins/ui/oxide/skin.css";
 
-// TAILWIND COLOR DEFINITION https://tailwindcss.com/docs/customizing-colors#using-css-variables
-@layer base {
-  :root {
-    --color-primary-base: 46 117 163;
-    --color-primary-gradient: 36 77 103;
-    --color-primary-button-text: 46 117 163;
-    --color-primary-button-alternative-text: 255 255 255;
-
-    --color-secondary-base: 243 126 47;
-    --color-secondary-gradient: 224 100 16;
-    --color-secondary-button-text: 255 255 255;
-
-    --color-tertiary-base: 51 51 51;
-    --color-tertiary-gradient: 0 0 0;
-    --color-tertiary-button-text: 255 255 255;
-
-    --color-success-base: 119 170 12;
-    --color-success-gradient: 83 127 0;
-    --color-success-button-text: 255 255 255;
-
-    --color-info-base: 13 123 253;
-    --color-info-gradient: 0 84 211;
-    --color-info-button-text: 255 255 255;
-
-    --color-warning-base: 245 206 1;
-    --color-warning-gradient: 186 152 0;
-    --color-warning-button-text: 0 0 0;
-
-    --color-danger-base: 223 59 59;
-    --color-danger-gradient: 180 0 21;
-    --color-danger-button-text: 255 255 255;
-
-    --color-form-base: 46 117 163;
-  }
-}
-
 @layer utilities {
   .border-gray-300 {
     --tw-border-opacity: 1;

assets/vue/AppInstaller.vue

@@ -6,9 +6,9 @@
         href="index.php"
       >
         <img
+          :src="'/themes/chamilo/images/header-logo.svg'"
           alt="Chamilo"
-          src="/build/css/themes/chamilo/images/header-logo.png"
-        >
+        />
       </a>
       <ol>
         <li

assets/vue/components/layout/PlatformLogo.vue

@@ -1,16 +1,17 @@
 <script setup>
-import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
 import { usePlatformConfig } from "../../store/platformConfig"
+import { useVisualTheme } from "../../composables/theme"
 
 const platformConfigStore = usePlatformConfig()
+const { getThemeAssetUrl } = useVisualTheme()
 
 const siteName = platformConfigStore.getSetting("platform.site_name")
 </script>
 
 <template>
   <img
     :alt="siteName"
-    :src="headerLogoPath"
     :title="siteName"
+    :src="getThemeAssetUrl('images/header-logo.png')"
   />
 </template>

assets/vue/components/platform/ColorThemeSelector.vue

@@ -0,0 +1,50 @@
+<script setup>
+import BaseSelect from "../basecomponents/BaseSelect.vue"
+import { ref } from "vue"
+import themeService from "../../services/colorThemeService"
+import { useI18n } from "vue-i18n"
+import { useNotification } from "../../composables/notification"
+
+const modelValue = defineModel({
+  required: true,
+  type: Object,
+})
+
+const { t } = useI18n()
+const { showErrorNotification } = useNotification()
+
+const serverThemes = ref([])
+const isServerThemesLoading = ref(true)
+
+const loadThemes = async () => {
+  try {
+    const { items } = await themeService.findAllByCurrentUrl()
+
+    serverThemes.value = items.map((accessUrlRelColorTheme) => accessUrlRelColorTheme.colorTheme)
+
+    modelValue.value = items.find((accessUrlRelColorTheme) => accessUrlRelColorTheme.active)?.colorTheme["@id"]
+  } catch (e) {
+    showErrorNotification(t("We could not retrieve the themes"))
+  } finally {
+    isServerThemesLoading.value = false
+  }
+}
+
+defineExpose({
+  loadThemes,
+})
+
+loadThemes()
+</script>
+
+<template>
+  <BaseSelect
+    v-model="modelValue"
+    :is-loading="isServerThemesLoading"
+    :label="t('Color theme selected')"
+    :options="serverThemes"
+    allow-clear
+    option-label="title"
+    option-value="@id"
+  />
+</template>

assets/vue/composables/theme.js

@@ -1,5 +1,6 @@
 import { onMounted, ref, watch } from "vue"
 import Color from "colorjs.io"
+import { usePlatformConfig } from "../store/platformConfig"
 
 export const useTheme = () => {
   let colors = {}
@@ -71,3 +72,18 @@ export const useTheme = () => {
     setColors,
   }
 }
+
+export function useVisualTheme() {
+  const platformConfigStore = usePlatformConfig()
+
+  const themeName = platformConfigStore.visualTheme
+
+  function getThemeAssetUrl(path) {
+    return `/themes/${platformConfigStore.visualTheme}/${path}`
+  }
+
+  return {
+    themeName,
+    getThemeAssetUrl,
+  }
+}

assets/vue/services/colorThemeService.js

@@ -5,12 +5,10 @@ const url = "/api/color_themes"
 /**
  * Gets the color themes
  *
- * @returns {Promise<Array>}
+ * @returns {Promise<{totalItems, items}>}
  */
-async function getThemes() {
-  const { items } = await baseService.getCollection(url)
-
-  return items
+async function findAllByCurrentUrl() {
+  return await baseService.getCollection("/api/access_url_rel_color_themes")
 }
 
 /**
@@ -35,7 +33,18 @@ async function updateTheme({ iri = null, title, colors }) {
   })
 }
 
+/**
+ * @param {string} iri
+ * @returns {Promise<Object>}
+ */
+async function changePlatformColorTheme(iri) {
+  return baseService.post("/api/access_url_rel_color_themes", {
+    colorTheme: iri,
+  })
+}
+
 export default {
-  getThemes,
   updateTheme,
+  findAllByCurrentUrl,
+  changePlatformColorTheme,
 }

assets/vue/store/platformConfig.js

@@ -7,13 +7,16 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
   const settings = ref([])
   const studentView = ref("teacherview")
   const plugins = ref([])
+  const visualTheme = ref("chamilo")
 
   async function findSettingsRequest() {
     isLoading.value = true
 
     try {
       const { data } = await axios.get("/platform-config/list")
 
+      visualTheme.value = data.visual_theme
+
       settings.value = data.settings
 
       studentView.value = data.studentview
@@ -44,5 +47,6 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
     initialize,
     getSetting,
     isStudentViewActive,
+    visualTheme,
   }
 })