[Josuesp1620]

Migration of web_responsive to 20.0.

The module history from 19.0 is preserved following the OCA migration guide.

Main changes:

• Owl 3 / Odoo 20 web client API updates (components, templates, patches)
• Assets: web._assets_primary_variables as a list, QUnit tests replaced by Hoot tests in web.assets_unit_tests
• Manifest bumped to 20.0.1.0.0; README regenerated

Validation:

• pre-commit passes
• Fresh install on Odoo 20.0 succeeds
• Python tests: 2 passed, 0 failures (CI)
• Hoot tests (migrated from the legacy QUnit suite, which no longer exists in 20.0):
  verified locally with --test-tags /web_responsive (WebSuite / MobileWebSuite):
  4 passed on desktop and 4 passed on mobile

Closes #3675

[flotho]

Successfully tested on runboat.
Used theme Milk and Theme Community,
No weird colors IMHO

[Josuesp1620]

@pedrobaeza Thanks! Could you tell me which colors look weird (which screen, or a screenshot)? I'll fix them.

[vanerek]

Thanks for the migration! While testing this branch on 20.0 Community with Redirect to Home enabled, we hit two navigation issues (the first one exists on 19.0 too):

1. Browser Back from an app to /odoo keeps the user in the app. The home history entry has no state, so the router fills it with the current action, and _loadDefaultApp only toggles the body class, so the AppsMenu doesn't open.
2. Opening the apps menu with the icon keeps the app mounted behind it. URL, tab title and app-specific systray items (e.g. Website's New/Edit) stay those of the app.

We solved both by backing the apps menu with a client action tagged menu, the same model as the Enterprise home menu. Core already special-cases this tag (the router maps it to /odoo, breadcrumbs skip it), and web_responsive excludes web_enterprise, so there is no clash:

• the AppsMenu is open exactly while that action is the current controller;
• the menu icon calls actionService.restore() to go back to the replaced app;
• _loadDefaultApp does doAction("menu", {clearBreadcrumbs: true});
• the redirect_menuId localStorage workaround is no longer needed.

~70 lines in apps_menu.esm.js + an empty template. Happy to share the diff or open a follow-up PR after this one is merged, whichever you prefer.

[ljmnoonan]

@vanerek , yes, this feature was so buggy that I simply dropped it in my refactor here #3703. I did play a bit with making it an actual action as you seem to have done, but ultimately decided to leave it for later. If you have solved this, I would love to take a look!

[pedrobaeza]

Sorry for the delay answering. I was in holidays last week.

My concern about the colors can be seen in this screenshot:

To have a grey background on the frame, but the rest of the element with white background seems very odd. It's true that enterprise is having the same color combination, but I think we can do it better in OCA. What do you think?

Another thing about the PR itself: can you please squash your latest commit into the migration one?

[Josuesp1620]

Thanks @pedrobaeza , agreed. On mobile, core leaves the form sheet without background, so the grey webclient background showed between the white boxes. Now the sheet uses the same background as on desktop (only below 768px, larger screens unchanged):

While checking it I also found that, on phones, the text of the fields sat at the top of their box (the 35px min-height of this module vs the 25px inputs of Odoo 20), so I centered it in a separate commit. No field changes size:

I squashed the previous fix into the migration commit and left both changes in their own commits, so they are easy to review. Happy to squash them too if you prefer.

[pedrobaeza]

Thanks for the changes. There still seems to be some parts on grey:

The chatter still remains with grey background, but I think that can be kept that way:

You can squash these changes into the migration one, as GitHub already provides the diff of the latest push.

[CarlosRoca13]

Can you add this changes? #3748

[DucTruongKomit]

Thanks for the migration! I found a small layout issue while testing it on 20.0.

When the database is neutralized, Odoo shows the banner "Database neutralized for testing: no emails sent, etc." above the navbar (web.neutralize_banner, 24px high), so the navbar is pushed down to 24px–70px. The apps menu container keeps position: fixed; top: $o-navbar-height (46px), so when the App Switcher is opened it covers the bottom half of the navbar (systray icons, company and user names are cut).

static/src/components/apps_menu/apps_menu.scss, mixin full-screen-dropdown:

position: fixed;
top: $o-navbar-height;

Steps to reproduce:

1. Install web_responsive on a neutralized database (e.g. a database duplicated/restored for testing).
2. Click the apps menu icon in the navbar.
3. The App Switcher overlaps the navbar by the height of the banner.

Could the top position follow the real bottom of the navbar instead of a fixed offset (for example computed from the navbar element, or by positioning the panel relative to the navbar)? Databases without the banner are not affected.

[Josuesp1620]

Thanks @pedrobaeza Those were the readonly fields: on mobile, core paints their box with the page background so they blend with it, so on the white sheet they showed up in grey. They now use the sheet background too (only below 768px):

I kept the chatter as it is, as you suggested, and squashed everything into the migration commit.

[Josuesp1620]

Thanks @DucTruongKomit for the report! The fixed top offset came from this migration: in 19.0 the panel had no top and just stayed below the apps button. It now works the same way again, so it follows the navbar when the neutralize banner is shown, including when the banner wraps on two lines on narrow phones. Databases without the banner look exactly the same as before.

Desktop

Mobile

[pedrobaeza]

Thanks for the work and the comprehensive review!

Let's merge this as the initial version, and if more things are discovered, they can be handled in later PRs.

/ocabot merge nobump

[OCA-git-bot]

What a great day to merge this nice PR. Let's do it!
Prepared branch 20.0-ocabot-merge-pr-3679-by-pedrobaeza-bump-nobump, awaiting test results.

[OCA-git-bot]

This PR has the approved label and has been created more than 5 days ago. It should therefore be ready to merge by a maintainer (or a PSC member if the concerned addon has no declared maintainer). 🤖

[OCA-git-bot]

Congratulations, your PR was merged at b18056b. Thanks a lot for contributing to OCA. ❤️