diff options
| author | Ankit Sathvara <asa@odoo.com> | 2017-07-07 11:45:47 +0200 |
|---|---|---|
| committer | Yannick Tivisse <yti@odoo.com> | 2017-07-07 16:18:23 +0200 |
| commit | f41bd82f66eb25df3c80b4a283a9a5b4d7058972 (patch) | |
| tree | 33a30ad6a06e9f53e965e02d1cb26077413fb008 /addons/web/static/src/less/webclient.less | |
| parent | c9f0352ac6ca6cb5d4426ce8362b26fd18902f2e (diff) | |
[ADD] web: Add new widget to toogle a boolean with a slider
Purpose
=======
Currently, it's not possible to activate a boolean on a non-editable list view without adding 2 buttons linked to a python method. These buttons aren't aligned and the result is not pretty.
This commit adds a new widget that allows to toggle a boolean record by record by clicking on the slider.
Diffstat (limited to 'addons/web/static/src/less/webclient.less')
| -rw-r--r-- | addons/web/static/src/less/webclient.less | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/addons/web/static/src/less/webclient.less b/addons/web/static/src/less/webclient.less index 5e84d74b599..c63bd139872 100644 --- a/addons/web/static/src/less/webclient.less +++ b/addons/web/static/src/less/webclient.less @@ -88,3 +88,45 @@ a { .oe_highlight { .btn-primary; } + +// Boolean Toggle widget +div.o_boolean_toggle { + position: relative; + display: inline-block; + width: 32px !important; + height: 18px; + + > input { + display: none; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #a0a0a0; + border-radius: 24px; + + &:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 3px; + bottom: 3px; + background-color: white; + border-radius: 50%; + } + } + + > input:checked + .slider { + background-color: @odoo-brand-optional; + + &:before { + .translate(14px; 0px); + } + } +} |