doc/refactoring-the-css-with-uiprops.rst
author Sylvain Thénault <sylvain.thenault@logilab.fr>
Wed, 02 Sep 2015 15:31:18 +0200
changeset 10634 06a43f727601
parent 10121 23af005426bf
permissions -rw-r--r--
[web/views] avoid propagation of NoSelectableObject in some case of inlined relations / permissions When selecting an inlined creation form, we should catch the NoSelectable exception that will be raised if the user cannot add entities of the target type (this is not and cannot be verified earlier) or if some other custom selector prevents the form from being selected. Closes #6510921
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.