INGInious icon indicating copy to clipboard operation
INGInious copied to clipboard

[frontend/theme] script for bootswatch theme compilation

Open Ananas120 opened this issue 2 years ago • 5 comments

Script to compile (new) bootswatch theme

Usage :

  • Go to inginious/frontend/static/css/themes
  • Run make yeti to compile the yeti theme

Ananas120 avatar Apr 03 '23 14:04 Ananas120

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Apr 03 '23 14:04 CLAassistant

I have updated the workflow to remove the need of any third-party module by copying the Gruntfile + build directory from the bootswatch repo (which is enough for theme compilation) I have also added the "darkly" theme with the "dracula" CodeMirror theme (not fully tested in inginious + theme not deployable yet)

I left the Makefile for simplicty but it is not required

Ananas120 avatar Apr 26 '23 13:04 Ananas120

Here is the updated version shown last week :

  • The makefile has been removed as well as the test.html and the docs/ folder
  • The Gruntfile has been cleaned up
  • The command to compile theme is the grunt build:<theme>
  • The themes/codemirror/ contains all available themes from https://codemirror.net/5/themes, and are properly integrated in inginious (at least in darkly and default (yeti) themes).
  • The INGInious.css file is specific to each theme as some coloring styles had to be removed for the darkly theme (it should be checked if these coloring styles are really relevant in the regular yeti theme)
  • The _bootswatch.scss file from darkly has been modified to better fit high contrast (especially in the "warning" or "info" tags used multiple times in inginious buttons / side-bar)
  • The "profile.js" and "profile" page / logic and user_manager has been modified to add the color / codemirror-color themes the same way as the language. The list is automatically adapted according to the available themes in frontend/static/css/themes(/codemirror)
  • The "common.js" file has been modified to support "non-default" codemirror theme (by adding the "theme" key). The "Codemirror.colorize" method does not support custom theme, it is the reason why I have added the "replace(...)" line + a custom html tag "theme=..." to get the information on the codemirror-theme used.
  • The "codemirror/default.css" is an empty file as the default configuration (style) is already in "codemirror/main.css". However, this "main" file is required for all the codemirror themes, as the theme-specific files only defines coloring-styles (and not the other configurations).It is the reason why I have created a "default" empty file, such that it is automatically included in the available theme list (and it is empty as it does not overwrite the "main.css" default colors)

Ananas120 avatar Jun 01 '23 06:06 Ananas120

I still update this branch PR to be sure, I will now try to create a new one on the tasksets branch...

Ananas120 avatar Sep 25 '23 07:09 Ananas120

All the commands you told me have (in theory) been successfully executed, and conflicts solved ! Hope it is correct now Note that for the "theme=" comment, I have changed to "theme:" instead of "theme-" because some codemirror themes have the "-" symbol, which may raise errors when splitting it

Ananas120 avatar Sep 25 '23 07:09 Ananas120