Upload themes (css)

[jmontoyaa]

Allow to upload css themes inside the public/ folder in order to improve performance instead of saving the files in var/

[christianbeeznest]

Currently the option to upload a theme in chamilo 2.0 doesn't exist. Waiting confirmation if it will have that option.

[ywarnier]

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:

• replacement for assets/css/app.scss (see pre-processing mechanism here: https://github.com/chamilo/chamilo-lms/wiki/Graphical-design-guide#appcss)
• replacement for the logo at assets/css/themes/chamilo/images/header-logo.svg

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.

[ywarnier]

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).

[daniboygg]

Reviewing the pull request https://github.com/chamilo/chamilo-lms/pull/4753 we decide the following steps for making this feature:

1. Send a JSON with Chamilo colors to the backend

{
    "--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"
}

3. The backend should store this as a JSON in the database
4. It will set in the HTML a style tag with the colors after <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:

[ywarnier]

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 ?

[daniboygg]

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.

[ywarnier]

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:

• it doesn't seem possible to save an existing theme under a new name (saving just re-uses the same name and the name field is not editable)
• the interface is a bit confusing as to what you have to select and how you can name it (the name field should be next to the Save button, or the save button should go up under the name field)
• the popup/modal colour selector is showing the same colour all over (see screenshot n°2)

[ywarnier]

[daniboygg]

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.