Open jmontoyaa opened 3 years ago
Currently the option to upload a theme in chamilo 2.0 doesn't exist. Waiting confirmation if it will have that option.
We need the option to upload new CSS themes to Chamilo 2.0. Otherwise it will be blocking for many.
The things that need to be uploaded:
Technically, the new styles should all be uploaded in var/ because that's the only folder we want users to be able to write to. There is currently a var/templates/ folder, but it seems more dedicated to... templates (HTML templates). I guess we should create a var/css/themes/[theme-name]/ to hold the SCSS file(s). Whatever the pre-processing mechanism is now to generate CSS from SCSS (when you upload a new CSS theme), it should first load assets/css/app.scss and whatever it loads now, then find the CSS theme configured in settings_current, then load the custom SCSS file(s) from var/css/themes/[theme-name]/ and, with that, generate a /build/css/app.css and a custom /build/css/[theme-name]/app.css that has to be loaded when that style is selected.
It is not necessary to offer the possibility to update an existing theme. Each new theme version should have a version number, because this will avoid bad caching processes. Upload should be done in zip format as these are always multiple-files. Look at 1.11.x implementation for details on filtering.
To test: use settings_current -> variable='stylesheets' to define which subfolder of var/css/themes/[subfolder]/ to use.
Place a small one-line app.scss
file in there and find the process to allow users to see the change.
Also allow for a logo to be uploaded in that folder (create the folder anyway, then put the logo.svg in there, then replace the default).
Reviewing the pull request https://github.com/chamilo/chamilo-lms/pull/4753 we decide the following steps for making this feature:
{
"--color-primary-base": "46 117 163",
"--color-primary-gradient": "156 194 218",
"--color-secondary-base": "243 126 47",
"--color-secondary-gradient": "224 100 16",
"--color-tertiary-base": "0 0 0",
"--color-tertiary-gradient": "51 51 51",
"--color-success-base": "119 170 12",
"--color-success-gradient": "84 119 8",
"--color-danger-base": "223 59 59"
}
<link rel="stylesheet" href="/build/app.css" integrity="sha384-XMQbWbg8QFWUGEd5SKPfBTq8rkrHahiX/kwapzboY43vJW4DxEEJGtlUe+KWdMQq">
with the structure mentioned in the pull request. For every JSON key:value "--color-primary-base": "46 117 163",
we should generate a CSS variable with the value like --color-primary-base: 46, 117, 163;
. An example of this could be: body {
--color-primary-base: 46, 117, 163;
--color-primary-gradient: 156, 194, 218;
--color-secondary-base: 243, 126, 47;
--color-secondary-gradient: 224, 100, 16;
--color-tertiary-base: 0, 0, 0;
--color-tertiary-gradient: 51, 51, 51;
--color-success-base: 119, 170, 12;
--color-success-gradient: 84, 119, 8;
--color-danger-base: 223, 59, 59;
}
In the future, we may need to change all the colors in Chamilo according to:
That's good and I can see the records created in the database (color_theme table).
Can we also have a title
in "canonical mode" in the color_theme table (which could also later serve as a directory name to store icons), and a dropdown box to re-use previous color themes ?
Right now we only have the endpoint /api/color_themes
where we can upload the colors to override.
Taking into account @ywarnier proposition, I think we'll need an endpoint to list all available themes, so we can load them in the dropdown to select from.
To be able to select Chamilo default set of colors (or in the future from several sets) we will need this data prepopulated in the database to make it available in the list of themes endpoint.
The upload of themes is not yet allowed, but the "Colors" page in the administration now allows you to use previous color themes and update them. There is still a need for logo upload, which still has to be added by @AngelFQC before we can close this issue.
There are also some issues at the moment:
I changed in the PR the prime vue component for the standard input color of the browser https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color. The appearance now would depend on the browser used.
The new approach should not have these errors.
Allow to upload css themes inside the public/ folder in order to improve performance instead of saving the files in var/