Steps to reproduce the issue:
- Open a website page in edit mode.
- Drag and drop several snippets onto the page.
- Add a 'Fade In Right' animation to an element on the page.
- Exit edit mode.
- Change the website language to Arabic to display the scrollbar on the
left.
- Test the animation.
- Bug: the scrolling (using the mouse wheel) becomes stuck or very slow
during the animation.
The issue only occurs with Chrome or Edge browsers and seems to be a
browser display issue. It happens only when animated elements overflow
to the left.
This commit fixes the problem by adding an 'overflow: hidden' to the
main element during RTL page animations. This is not the best solution
because the animated elements become non-visible outside the main
element, creating a difference, for example, with the 'Framed' page
layout.
opw-3260399
closesodoo/design-themes#648
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This reviews [1] which solved the problem in most cases (hopefully) but
not in all cases. Animated elements which overflow the screen on the
right made an horizontal scrollbar appear on iPhone <= 8 using Safari,
even when they were not animating yet.
This was due to Safari ignoring the `transform: none` rule on inactive
elements, preferring to consider the animation transform. As a fix, we
forced no possible overflow of the page when we saw this safari bug on
the first animated element.
The problem here... is that this Safari bug does not occur in every
situation. For example, if the animated element is inside a column which
is marked as hidden in mobile, Safari actually understands the no
transform rule. So if the first animated element was in such a situation
but another element in the page had the safari bug... the problem was
there again.
As a fix, we now check all animated elements for the Safari bug, instead
of only the first one. That should do the trick.
This commit also reviews the comment: the problem is not confined to
old iPhones. This was reproduced on the latest iPhone with latest iOS
and up-to-date Safari.
opw-3204613
opw-3201937
Related to opw-3165651
[1]: https://github.com/odoo/design-themes/commit/d027d9a547ea460ebb53c6ee56ba3b03aac97703closesodoo/design-themes#636
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, on iPhone 8 (and lower) it was possible to scroll
the page to the right when there were animated elements in the page.
A "transform: none" property was applied to non-visible animated
elements to prevent the page from expanding to the right. However, this
property wasn't properly overriding keyframe transforms on iPhone 8 and
lower. This has been resolved by adding "overflow-x: hidden" on the
wrapwrap in case "transform: none" is not applied correctly.
Steps to reproduce the issue:
- On iPhone 8 (Safari).
- Drop a few snippets into a page.
- Add a "Fade In-Right" animation to one of the snippets.
- Scrolls the page so that the animated element is invisible.
- Bug => a horizontal scrollbar appears and it is possible to scroll the
page to the right.
opw-3165651
closesodoo/design-themes#632
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
In [1], in master, the `content` class is removed from the elements
with the `row` class in the Carousel snippet. This commit does the same
for the extension of Carousel in the "Clean" theme, to be consistent
with these changes.
[1]: https://github.com/odoo/odoo/pull/102696
task-3011192
closesodoo/design-themes#603
Related: odoo/odoo#102696
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
Since [1], the themes installed in the `_post_init` hook of test_themes
would not go through the `_post_copy()` anymore.
It is not a big deal as this module purpose is to ease our tests and
quickly being able to navigate through themes when we need to, but still
this is something that need to be fixed as otherwise the themes would
not really reflect how they look like.
Typically, go to the Odoo Experts theme, which is supposed to have the
"Contact" header template, it will not have that header layout.
[1]: https://github.com/odoo/odoo/commit/b8a24efa71daea1f96465b780f4f0e384ce74703closesodoo/design-themes#610
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Backport of [1].
Before this commit, the animations were never launched in a mega menu.
Indeed the animations are launched when the element to be animated
appears in the viewport according to the scroll. But in the case of a
mega menu we just want the animation to start when the mega menu is
opened. For that we don't need all the code that checks the scroll, etc.
The animation starts by itself when the element inside the mega menu is
made visible in CSS.
This commit also removes the "Each time it becomes visible" option for
an element animated in a mega menu because in this case this option does
not make sense.
[1]: https://github.com/odoo/odoo/commit/bae04041a528e1a1fe97387ca5b75943c1d0fe97
opw-2764895
closesodoo/design-themes#561
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Now, `_post_copy()` is only called when the module is installed for the
first time on a website, not when the module is updated.
See counterpart commit in community for more details.
opw-2824045
closesodoo/design-themes#562
Related: odoo/odoo#91012
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This is a backport of [1] which at the same time finally enables the
test to be able to test all theme tours. Notice that the tours should
be improved so that each step properly checks that the previous step
actually had an effect (as those tours are normally made to display to
the user and were not designed for testing). However, this is already
really useful as only checking if *entering* edit mode in each theme
does not crash is already covering most issues that can be created when
designing a theme at the moment.
[1]: https://github.com/odoo/design-themes/commit/52fef46388ec880af78c5a5f3e6152c4510548f4closesodoo/design-themes#532
Related: odoo/odoo#80936
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Before this commit, it was possible to edit the scroll button of the
cover snippet in Bistro and Monglia themes.
task-2656662
closesodoo/design-themes#518
Related: odoo/odoo#78532
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when dropping custom snippet (or saved snippet)
containing an animation in the page, the animated element of the
snippet remained hidden.
task-2664876
closesodoo/design-themes#516
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, the option "each time it becomes visible" did not
work in edit mode.
task-2630112
closesodoo/design-themes#490
X-original-commit: 87233c988b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Those two themes were defining a 'hambuger-type' variable to
'off-canvas', probably a typo of 'hamburger-type'... but the themes
do not even activate the views related to 'off-canvas', so this had
simply no effect and did not create any bug.
closesodoo/design-themes#486
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when drag n drop a snippet to move it in a website
page, the snippet was invisible after the drop.
task-2215118
closesodoo/design-themes#468
X-original-commit: d8e547ceab
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when animated elements with a css translate
overflowed the #wrapwrap (before and during animations), a horizontal
scrollbar was visible on the #wrapwrap until the end of the animation.
After this commit, the horizontal scrollbar is no longer visible at
any time during the animations.
task-2215118
closesodoo/design-themes#270
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Because of a typo, the theme used "sans-serif" as font, thus with a
random look according to OS and browser.
opw-2559735
closesodoo/design-themes#268
Related: odoo/odoo#74294
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, the calculation of the top position of the
animated elements did not take into account the fact that the
scrollable element is no longer the body. And therefore the animations
never started.
task-2215118
closesodoo/design-themes#54
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The animations "Rotate In-Down-Left" and "Rotate In-Down-Right" were
not done correctly because we were trying to get the position of the
element (by not taking CSS transforms into calculations) via the
matrix of the css transform and it does not work if there is a
transform-origin on the element.
task-2215118
closesodoo/design-themes#50
X-original-commit: ad7389630c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The license is missing in most enterprise manifest so
the decision was taken to make it explicit in all cases.
When not defined, a warning will be triggered starting from
14.0 when falling back on the default LGPL-3.
closesodoo/design-themes#43
Related: odoo/enterprise#19850
Related: odoo/odoo#74231
Signed-off-by: Xavier Dollé (xdo) <xdo@odoo.com>
The contact header scss variable value was written with an uppercase
unlike other header scss variables. Unfortunately, fixing that typo is
not stable-friendly (as people already using the template now saved
that typo in their DB). Instead, we use that typo as default value for
the related themes.
Related to task-2368576
closesodoo/design-themes#28
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Odoo Translation Bot