doc/dev/refactoring-the-css-with-uiprops.rst
author Sylvain Thénault <sylvain.thenault@logilab.fr>
Fri, 20 Jan 2017 18:17:04 +0100
changeset 11919 3a6746dfc57f
parent 10492 68c13e0c0fc5
permissions -rw-r--r--
Change hooks control (deny_all_hooks_but / allow_all_hooks_but) to be more predictable Prior to this, if one execute code like: with cnx.hooks.deny_all_hooks_but('metadata'): with cnx.hooks.deny_all_hooks_but(): # mycode 'metadata' hooks will be activated anyway in the inner block, which is rather unexpected (of course in real life you only see the latest hooks control statement, the former being higher in the call stack). This is due to the underlying usage of old `enable_hook_categories` / `disable_hook_categories` methods, which were introduced much before the now official context manager based API (with `cnx.[deny|all]_all_hooks_but(...)`). To move on, this patch drop the two legacy methods, rename and privatize related internal state on the connection (`hooks_mode` becomes `_hooks_mode`, `disabled_hook_cats` and `enabled_hook_cats` become `_hooks_categories`) and reimplement the `_hooks_control` context manager to simply update them. See the added unit test for details.

=========================================
Refactoring the CSSs with UI properties
=========================================

Overview
=========

Managing styles progressively became difficult in CubicWeb. The
introduction of uiprops is an attempt to fix this problem.

The goal is to make it possible to use variables in our CSSs.

These variables are defined or computed in the uiprops.py python file
and inserted in the CSS using the Python string interpolation syntax.

A quick example, put in ``uiprops.py``::

  defaultBgColor = '#eee'

and in your css::

  body { background-color: %(defaultBgColor)s; }


The good practices are:

- define a variable in uiprops to avoid repetitions in the CSS
  (colors, borders, fonts, etc.)

- define a variable in uiprops when you need to compute values
  (compute a color palette, etc.)

The algorithm implemented in CubicWeb is the following:

- read uiprops file while walk up the chain of cube dependencies: if
  cube myblog depends on cube comment, the variables defined in myblog
  will have precedence over the ones in comment

- replace the %(varname)s in all the CSSs of all the cubes

Keep in mind that the browser will then interpret the CSSs and apply
the standard cascading mechanism.