diff options
| author | Damien Bouvy <dbo@odoo.com> | 2020-03-16 14:25:40 +0000 |
|---|---|---|
| committer | Damien Bouvy <dbo@odoo.com> | 2020-04-14 11:59:04 +0000 |
| commit | 256c75baf70bf05c2260f9091837f39293599f45 (patch) | |
| tree | ad54c843f8a985a46374d7f48e717355c1ef424e /addons/web/static/src/xml | |
| parent | d599a05736dffb7222eeae7059dee19fd3c6f81c (diff) | |
[IMP] web: add a <Popover> component
Using bootstrap popover with owl is possible, but with a lot of
friction.
This commit adds a Popover element to ease developments that require
a popover. This component takes 2 props:
- position='bottom' (optional): 'top', 'bottom', 'left', 'right'
- title (optional)
Its usage requires setting an `opened` slot for the content of the
popover, whilst the 'trigger' of the popover uses the default slot.
E.g.
```xml
<Parent>
<Popover>
<t t-set="opened">
<p>You have opened the popover, congratulations!</p>
<button t-on-click='_handlerOnParent'>Dispatch cake</button>
</t>
<button class="btn btn-primary">Click me!</button>
</Popover>
</Parent>
```
Note that:
- only one popover can be opened at a time (opening a popover will
close any previously opened popover)
- `Popover` uses `Portal` under the hood, so events are propagated
correctly even though the popover is teleported elsewhere in the dom
(see example in this commit message with `_handlerOnParent`)
- `<Popover>` is registed as a global component in QWeb and does not
need to be added to a Component's subcomponents list
closes odoo/odoo#47710
Signed-off-by: Damien Bouvy (dbo) <dbo@odoo.com>
Diffstat (limited to 'addons/web/static/src/xml')
| -rw-r--r-- | addons/web/static/src/xml/base.xml | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index db1e893c168..99b4588c450 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -505,6 +505,21 @@ </Portal> </t> +<t t-name="Popover" owl="1"> + <div t-on-click="openPopover" data-popover="1"> + <t t-slot="default"/> + <Portal t-if="state.displayed" target="'body'"> + <div role="tooltip" class="o_popover" t-ref="popover"> + <div class="arrow"/> + <h3 t-if="props.title" class="o_popover_header"><t t-esc="props.title"/></h3> + <div class="popover-body"> + <t t-slot="opened"/> + </div> + </div> + </Portal> + </div> +</t> + <t t-name="web.Pager" owl="1"> <nav class="o_pager" aria-label="Pager"> <span class="o_pager_counter" t-on-click.stop=""> |