doc/dev/refactoring-the-css-with-uiprops.rst
author Philippe Pepiot <ph@itsalwaysdns.eu>
Tue, 31 Mar 2020 19:15:03 +0200
changeset 12957 0c973204033a
parent 10492 68c13e0c0fc5
permissions -rw-r--r--
[server] prevent returning closed cursor to the database pool In since c8c6ad8 init_repository use repo.internal_cnx() instead of repo.system_source.get_connection() so it use the pool and we should not close cursors from the pool before returning it back. Otherwise we may have "connection already closed" error. This bug only trigger when connection-pool-size = 1. Since we are moving to use a dynamic pooler we need to get this fixed. This does not occur with sqlite since the connection wrapper instantiate new cursor everytime, but this occur with other databases.
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.