* Remove the "?" content
* Use a background gradient
* Use a bottom transparent box-shadow instead of a surrounding opaque one
* Reduce tip size and reshape the arrow
The tip was currently placed in the first parent which can scroll.
This is wrong if there is a parent which is position:fixed in that
element which scrolls (as it would not follow the scrolling as it is
fixed).
The ideal location is now the first parent which can scroll or which
is position:fixed.
Note: there are still two cases which may not work but they are
considered rare enough to not handle them :
* A position:fixed element which is overflow:hidden too
* A position:absolute element whose relative ancestor is an ancestor
of the ancestor element which can scroll.
Allows to define steps that only apply either in community or enterprise, by
setting the step's attribute 'edition' to 'community' or 'enterprise'.
If the attribute is not set, the step applies on both edition.
Before this commit, tours were disabled for mobile mode by returning
an undefined value in the web_tour.tour JS module. This made the use
of "tour.register" or "tour.run" crash, thus making the runbot go red
if this happened while phamtomJS was running.
As it happened, some of the frontend tours goes by "preview the site
on mobile mode" which then trigger this JS crash.
This commit makes the web_tour.tour module return a fake tour object
with a register method which does nothing and a run method which
warns the user that tours cannot be launched in mobile mode.
Choosing where to place a tip is a difficult problem.
If placed in the body element, the tip have to be repositionned on each
scroll event which is performance-consuming and induces bugs (firefox
scroll event, tips which is over an element while the anchor is under,
...).
If placed in the anchor parent which scrolls, all the above problems
are solved but when the tip opens it cannot overflow its parent
boundaries, which is not possible in many contexts (modals, ...).
The solution here is to change the tip location when it opens/closes.
When closed, it is placed in the anchor parent which scrolls. This
allows to not have to reposition the tip on each scroll. The tip is
also naturally hidden when its anchor is not visible on the screen.
When opened, the tip is placed in the body, where it can be placed
on the top of anything in the DOM.
The transition from one state to another is not noticable as the
position does not have to be computed when the tip is moved in the
DOM and the animation is purely CSS.
Note: however, this commit does not solve the firefox bug of closing
the tip when the window scrolls. Here, the temporary solution is to
let the tip be wrongly position if the user scrolls when a tip is
opened (this only occurs when using the mouse wheel anyway).
Before being positionned, the tip is at the end of the body, thus
adding a scrollbar... which prevents to calculate the correct x
position of the tip.
The chosen solution is to place the tip at the center of the screen
in LESS before the first positionning. This also prevents the content
to overflow the body and does not break animation of the tip as its
display property is always block.
* Correctly bind "input" (instead of "change") or "mousedown" event
according to the anchor type. Also, only valids left clicks.
* Correctly unbind these events.
* Adapt code to handle position/width/padding with pixel-precision
* Adapt overlay to not overflow the screen
* Do not let the content overflow the tip when closed
* Improve the JS/LESS so that its content makes the tip grow
with a bubble effect (instead of using a popover).
* Avoid flickering when the mouse leave/enter the tip or move
between the tip and its anchor element.
* Use text-align:left instead of justify
* Set the content width in JS (to a larger width) to be customizable
* Round LESS variable to avoid values like 266.6666666666
* Set opening direction according to viewport:
- Top and bottom tips open towards the right except if they overflow
the window on this right
- Left and right tips open towards the bottom except if they overflow
the window on this bottom
* Improve the 'Skip these steps' mechanism (which is easier as we don't
use bootstrap's popover anymore)
qsm-odoo