doc/dev/refactoring-the-css-with-uiprops.rst
author Philippe Pepiot <philippe.pepiot@logilab.fr>
Thu, 19 Jan 2017 15:27:39 +0100
changeset 11899 bf6106b91633
parent 10492 68c13e0c0fc5
permissions -rw-r--r--
[schema] load schema from modules names instead of directories Introspect cubicweb, cubes and apphome using pkgutil to generate the full list of modules names for loading the schema. Keep historical behavior and check if source .py file exists if a module is found using python bytecode file (.pyc and .pyo) Loading schema from apphome require apphome to be present in sys.path and that "schema" module resolve to a file located in apphome. Update migraction tests to explicitely update sys.path when loading schema from different apps, use a contextmanager for this so it's more readable. Require updated logilab-common and yams
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
5482
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     1
=========================================
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     2
Refactoring the CSSs with UI properties
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     3
=========================================
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     4
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     5
Overview
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     6
=========
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     7
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     8
Managing styles progressively became difficult in CubicWeb. The
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     9
introduction of uiprops is an attempt to fix this problem.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    10
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    11
The goal is to make it possible to use variables in our CSSs.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    12
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    13
These variables are defined or computed in the uiprops.py python file
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    14
and inserted in the CSS using the Python string interpolation syntax.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    15
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    16
A quick example, put in ``uiprops.py``::
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    17
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    18
  defaultBgColor = '#eee'
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    19
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    20
and in your css::
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    21
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    22
  body { background-color: %(defaultBgColor)s; }
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    23
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    24
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    25
The good practices are:
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    26
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    27
- define a variable in uiprops to avoid repetitions in the CSS
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    28
  (colors, borders, fonts, etc.)
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    29
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    30
- define a variable in uiprops when you need to compute values
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    31
  (compute a color palette, etc.)
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    32
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    33
The algorithm implemented in CubicWeb is the following:
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    34
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    35
- read uiprops file while walk up the chain of cube dependencies: if
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    36
  cube myblog depends on cube comment, the variables defined in myblog
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    37
  will have precedence over the ones in comment
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    38
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    39
- replace the %(varname)s in all the CSSs of all the cubes
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    40
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    41
Keep in mind that the browser will then interpret the CSSs and apply
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    42
the standard cascading mechanism.