[REF] doc: adapt to mention scss instead of less
This commit is contained in:
qsm-odoo
@@ -577,7 +577,7 @@ Odoo includes Bootstrap by default. This means that you can take advantage of al
|
||||
Of course Bootstrap is not enough if you want to provide a unique design. The following steps will guide you through how to add custom styles to your theme.
|
||||
The final result won't be pretty, but will provide you with enough information to build upon on your own.
|
||||
|
||||
Let’s start by creating an empty file called **style.less** and place it in a folder called **less** in your static folder.
|
||||
Let’s start by creating an empty file called **style.scss** and place it in a folder called **scss** in your static folder.
|
||||
The following rules will style our *Services* page. Copy and paste it, then save the file.
|
||||
|
||||
.. as of Pygments 2.2, the Less lexer can't handle inline comments or nested
|
||||
@@ -610,11 +610,11 @@ Let’s navigate to the view folder and create an XML file called *assets.xml*.
|
||||
|
||||
<template id="mystyle" name="My style" inherit_id="website.assets_frontend">
|
||||
<xpath expr="link[last()]" position="after">
|
||||
<link href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/theme folder/static/scss/style.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
We just created a template specifying our less file. As you can see,
|
||||
We just created a template specifying our scss file. As you can see,
|
||||
our template has a special attribute called ``inherit_id``. This
|
||||
attribute tells Odoo that our template is referring to another one in
|
||||
order to operate.
|
||||
@@ -622,7 +622,7 @@ order to operate.
|
||||
In this case, we are referring to ``assets_frontend`` template,
|
||||
located in the ``website`` module. ``assets_frontend`` specifies the
|
||||
list of assets loaded by the website builder and our goal is to add
|
||||
our less file to this list.
|
||||
our scss file to this list.
|
||||
|
||||
This can be achieved using xpath with the attributes
|
||||
``expr="link[last()]"`` and ``position="after"``, which means "*take my
|
||||
@@ -639,7 +639,7 @@ Update your theme
|
||||
.. image:: theme_tutorial_assets/img/restart.png
|
||||
|
||||
|
||||
Our less file is now included in our theme, it will be automatically compiled, minified and combined with all Odoo’s assets.
|
||||
Our scss file is now included in our theme, it will be automatically compiled, minified and combined with all Odoo’s assets.
|
||||
|
||||
.. image:: theme_tutorial_assets/img/services_page_styled.png
|
||||
:class: shadow-0
|
||||
@@ -797,7 +797,7 @@ Dropping our snippet onto the page, you will notice that our new options are aut
|
||||
|
||||
.. image:: theme_tutorial_assets/img/snippet_options.png
|
||||
|
||||
Let’s create some css rules in order to provide a visual feedback for our options. Open our **style.less** file and add the following
|
||||
Let’s create some css rules in order to provide a visual feedback for our options. Open our **style.scss** file and add the following
|
||||
|
||||
.. code-block:: scss
|
||||
|
||||
|
||||
@@ -136,8 +136,8 @@ The complete tree should look like
|
||||
| | `-- <my_module_name>.js
|
||||
| |-- css/
|
||||
| | `-- <my_module_name>.css
|
||||
| |-- less/
|
||||
| | `-- <my_module_name>.less
|
||||
| |-- scss/
|
||||
| | `-- <my_module_name>.scss
|
||||
| `-- xml/
|
||||
| `-- <my_module_name>.xml
|
||||
|-- views/
|
||||
@@ -912,7 +912,7 @@ The convention is to organize the code according to the following structure:
|
||||
- *static/src/fonts*
|
||||
- *static/src/img*
|
||||
- *static/src/js*
|
||||
- *static/src/less*: less files
|
||||
- *static/src/scss*: scss files
|
||||
- *static/src/xml*: all qweb templates that will be rendered in JS
|
||||
- *static/tests*: this is where we put all test related files.
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ assets may be large, but are seldom needed. In that case, we sometimes want the
|
||||
to be loaded lazily.
|
||||
|
||||
The main idea is that we define a set of *bundles* in xml. A bundle is here defined as
|
||||
a collection of files (javascript, css, less). In Odoo, the most important
|
||||
a collection of files (javascript, css, scss). In Odoo, the most important
|
||||
bundles are defined in the file *addons/web/views/webclient_templates.xml*. It looks
|
||||
like this:
|
||||
|
||||
@@ -119,11 +119,11 @@ directive:
|
||||
|
||||
Here is what happens when a template is rendered by the server with these directives:
|
||||
|
||||
- all the *less* files described in the bundle are compiled into css files. A file
|
||||
named *file.less* will be compiled in a file named *file.less.css*.
|
||||
- all the *scss* files described in the bundle are compiled into css files. A file
|
||||
named *file.scss* will be compiled in a file named *file.scss.css*.
|
||||
|
||||
- if we are in *debug=assets* mode,
|
||||
- the *t-call-assets* directive with the *t-js* attribute set to false will
|
||||
- the *t-call-assets* directive with the *t-js* attribute set to false will
|
||||
be replaced by a list of stylesheet tags pointing to the css files
|
||||
- the *t-call-assets* directive with the *t-css* attribute set to false will
|
||||
be replaced by a list of script tags pointing to the js files
|
||||
@@ -173,7 +173,7 @@ to add a file from that addon. In that case, it should be done in three steps:
|
||||
|
||||
<template id="assets_backend" name="helpdesk assets" inherit_id="web.assets_backend">
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
<link rel="stylesheet" href="/helpdesk/static/src/less/helpdesk.less"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/helpdesk/static/src/scss/helpdesk.scss"/>
|
||||
<script type="text/javascript" src="/helpdesk/static/src/js/helpdesk_dashboard.js"></script>
|
||||
</xpath>
|
||||
</template>
|
||||
@@ -308,12 +308,12 @@ The *odoo.define* method is given three arguments:
|
||||
If an error happens, it will be logged (in debug mode) in the console:
|
||||
|
||||
* ``Missing dependencies``:
|
||||
These modules do not appear in the page. It is possible that the JavaScript
|
||||
These modules do not appear in the page. It is possible that the JavaScript
|
||||
file is not in the page or that the module name is wrong
|
||||
* ``Failed modules``:
|
||||
A javascript error is detected
|
||||
* ``Rejected modules``:
|
||||
The module returns a rejected deferred. It (and its dependent modules) is not
|
||||
The module returns a rejected deferred. It (and its dependent modules) is not
|
||||
loaded.
|
||||
* ``Rejected linked modules``:
|
||||
Modules who depend on a rejected module
|
||||
@@ -1160,7 +1160,7 @@ to be translated. The way it currently works is the following:
|
||||
is found.
|
||||
|
||||
Note that translations are explained in more details, from the server point of
|
||||
view, in the document :doc:`translations`.
|
||||
view, in the document :doc:`translations`.
|
||||
|
||||
There are two important functions for the translations in javascript: *_t* and
|
||||
*_lt*. The difference is that *_lt* is lazily evaluated.
|
||||
@@ -1595,7 +1595,7 @@ order.
|
||||
- current_value: get the current_value from the field that must be present in the view
|
||||
- max_value: get the max_value from the field that must be present in the view
|
||||
- edit_max_value: boolean if the max_value is editable
|
||||
- title: title of the bar, displayed on top of the bar --> not translated,
|
||||
- title: title of the bar, displayed on top of the bar --> not translated,
|
||||
use parameter (not option) "title" instead
|
||||
|
||||
.. code-block:: xml
|
||||
|
||||
+12
-12
@@ -109,9 +109,9 @@ in ``/etc/postgresql/9.5/main/pg_hba.conf`` set:
|
||||
host all all 192.168.1.0/24 md5
|
||||
|
||||
in ``/etc/postgresql/9.5/main/postgresql.conf`` set:
|
||||
|
||||
|
||||
.. code-block:: text
|
||||
|
||||
|
||||
listen_addresses = 'localhost,192.168.1.2'
|
||||
port = 5432
|
||||
max_connections = 80
|
||||
@@ -171,7 +171,7 @@ SSL Between Odoo and PostgreSQL
|
||||
-------------------------------
|
||||
|
||||
Since Odoo 11.0, you can enforce ssl connection between Odoo and PostgreSQL.
|
||||
in Odoo the db_sslmode control the ssl security of the connection
|
||||
in Odoo the db_sslmode control the ssl security of the connection
|
||||
with value choosed out of 'disable', 'allow', 'prefer', 'require', 'verify-ca'
|
||||
or 'verify-full'
|
||||
|
||||
@@ -302,27 +302,27 @@ in ``/etc/nginx/sites-enabled/odoo.conf`` set:
|
||||
upstream odoochat {
|
||||
server 127.0.0.1:8072;
|
||||
}
|
||||
|
||||
|
||||
# http -> https
|
||||
server {
|
||||
listen 80;
|
||||
server_name odoo.mycompany.com;
|
||||
rewrite ^(.*) https://$host$1 permanent;
|
||||
}
|
||||
|
||||
|
||||
server {
|
||||
listen 443;
|
||||
server_name odoo.mycompany.com;
|
||||
proxy_read_timeout 720s;
|
||||
proxy_connect_timeout 720s;
|
||||
proxy_send_timeout 720s;
|
||||
|
||||
|
||||
# Add Headers for odoo proxy mode
|
||||
proxy_set_header X-Forwarded-Host $host;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
|
||||
|
||||
# SSL parameters
|
||||
ssl on;
|
||||
ssl_certificate /etc/ssl/nginx/server.crt;
|
||||
@@ -331,7 +331,7 @@ in ``/etc/nginx/sites-enabled/odoo.conf`` set:
|
||||
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
|
||||
ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
|
||||
ssl_prefer_server_ciphers on;
|
||||
|
||||
|
||||
# log
|
||||
access_log /var/log/nginx/odoo.access.log;
|
||||
error_log /var/log/nginx/odoo.error.log;
|
||||
@@ -348,10 +348,10 @@ in ``/etc/nginx/sites-enabled/odoo.conf`` set:
|
||||
}
|
||||
|
||||
# common gzip
|
||||
gzip_types text/css text/less text/plain text/xml application/xml application/json application/javascript;
|
||||
gzip_types text/css text/scss text/plain text/xml application/xml application/json application/javascript;
|
||||
gzip on;
|
||||
}
|
||||
|
||||
|
||||
Odoo as a WSGI Application
|
||||
==========================
|
||||
|
||||
@@ -521,9 +521,9 @@ which will generate a 32 characters pseudorandom printable string.
|
||||
Supported Browsers
|
||||
==================
|
||||
|
||||
Odoo is supported by multiple browsers for each of its versions. No
|
||||
Odoo is supported by multiple browsers for each of its versions. No
|
||||
distinction is made according to the browser version in order to be
|
||||
up-to-date. Odoo is supported on the current browser version. The list
|
||||
up-to-date. Odoo is supported on the current browser version. The list
|
||||
of the supported browsers by Odoo version is the following:
|
||||
|
||||
- **Odoo 9:** IE11, Mozilla Firefox, Google Chrome, Safari, Microsoft Edge
|
||||
|
||||
@@ -369,50 +369,6 @@ Source installation requires manually installing dependencies:
|
||||
C:\> cd \YourOdooPath
|
||||
C:\YourOdooPath> C:\Python35\Scripts\pip.exe install -r requirements.txt
|
||||
|
||||
* *Less CSS* via nodejs
|
||||
|
||||
- on Linux, use your distribution's package manager to install nodejs and
|
||||
npm.
|
||||
|
||||
.. warning::
|
||||
|
||||
In debian wheezy and Ubuntu 13.10 and before you need to install
|
||||
nodejs manually:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ wget -qO- https://deb.nodesource.com/setup | bash -
|
||||
$ apt-get install -y nodejs
|
||||
|
||||
In later debian (>jessie) and ubuntu (>14.04) you may need to add a
|
||||
symlink as npm packages call ``node`` but debian calls the binary
|
||||
``nodejs``
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ apt-get install -y npm
|
||||
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
|
||||
|
||||
Once npm is installed, use it to install less:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ sudo npm install -g less
|
||||
|
||||
- on OS X, install nodejs via your preferred package manager (homebrew_,
|
||||
macports_) then install less:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ sudo npm install -g less
|
||||
|
||||
- on Windows, `install nodejs <https://nodejs.org/en/download/>`_, reboot (to
|
||||
update the :envvar:`PATH`) and install less:
|
||||
|
||||
.. code-block:: doscon
|
||||
|
||||
C:\> npm install -g less
|
||||
|
||||
Fetch the sources
|
||||
-----------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user