Skip to content

[IMP] html_builder: change bring up/down icons #4831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: master-imp-website-image-options-gppa
Choose a base branch
from
Open

[IMP] html_builder: change bring up/down icons #4831

wants to merge 5 commits into from

Conversation

@ldau-odoo
Copy link

@ldau-odoo ldau-odoo commented Oct 21, 2025

This PR adds new icons Odoo UI icons for the send to back/bring to front functionality.

task-5173190

Before After
image (2) Screenshot 2025-10-21 at 12 36 47

@robodoo
Copy link

robodoo commented Oct 21, 2025

This PR targets the un-managed branch odoo-dev/odoo:master-imp-website-image-options-gppa, it needs to be retargeted before it can be merged.

@ldau-odoo ldau-odoo force-pushed the master-imp-website-image-options-ldau branch 4 times, most recently from 8140797 to 8c29bc2 Compare October 22, 2025 06:30
mano-odoo
mano-odoo requested changes Oct 22, 2025
View reviewed changes
Copy link

@mano-odoo mano-odoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icons look great!

Just a small comment, there are still occurences of .o_send_back and .o_bring_front in odoo/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss if you could check to adapt/remove them, thanks!

@ldau-odoo ldau-odoo force-pushed the master-imp-website-image-options-ldau branch from 8c29bc2 to 1d65cff Compare October 22, 2025 15:10
@ldau-odoo ldau-odoo requested a review from mano-odoo October 23, 2025 07:03
@gppa-odoo
[IMP] website, html_builder: enhance snippets toolbar
2926e6b 
- Persist tooltip 'Double click to replace' for 3 seconds, because
  users often missed it when it disappeared too quickly.
- Update image overlay actions to adopt a toolbar-like style, since the
  old design looked inconsistent and confused users.

task-4789254
@gppa-odoo
[IMP] website, html_builder: update image options in builder
5b662b8 
- Reorder image options to follow a more logical sequence.
- Remove size option for image in grid mode.

task-4789254
@gppa-odoo gppa-odoo force-pushed the master-imp-website-image-options-gppa branch 3 times, most recently from 19ef084 to a61edf2 Compare October 27, 2025 05:05
@ldau-odoo ldau-odoo force-pushed the master-imp-website-image-options-ldau branch from 1d65cff to d76e3b1 Compare October 27, 2025 08:29
@gppa-odoo
[IMP] website, *: hide overlay button when toolbar is active
a65928c 
`*=html_builder, html_editor`

- Hide overlay buttons when editor toolbar is active as this leads to
  a confusion for users.

task-4789254
@gppa-odoo gppa-odoo force-pushed the master-imp-website-image-options-gppa branch from a61edf2 to a65928c Compare October 27, 2025 08:56
@ldau-odoo ldau-odoo force-pushed the master-imp-website-image-options-ldau branch from d76e3b1 to c898894 Compare October 27, 2025 09:04
gppa-odoo and others added 2 commits October 27, 2025 10:15
@gppa-odoo @ldau-odoo
[IMP] website, *: hide overlay button when toolbar is active
08e0bb9 
`*=html_builder, html_editor`

- Hide overlay buttons when editor toolbar is active as this leads to
  a confusion for users.

task-4789254
@ldau-odoo
[IMP] html_builder: change bring up/down icons
fc4f167 
This commit adds new icons Odoo UI icons for the send to back/bring to
front functionality.

task-5173190
@ldau-odoo ldau-odoo force-pushed the master-imp-website-image-options-ldau branch from c898894 to fc4f167 Compare October 27, 2025 09:15
@gppa-odoo gppa-odoo force-pushed the master-imp-website-image-options-gppa branch 2 times, most recently from 9b53b7e to 74fbb3a Compare November 4, 2025 10:36
sobo-odoo
sobo-odoo requested changes Nov 4, 2025
View reviewed changes
Copy link

@sobo-odoo sobo-odoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is my review 🙂 The new icons are really nice 🤩
I have some comments, mostly on the naming 👍

addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js

const buttons = [];
this.overlayTarget = target;
if (!this.config.isMobileView(this.overlayTarget)) {
Copy link

@sobo-odoo sobo-odoo Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it the final "improve toolbar" PR or did you only cherry-pick the commits to see what the new icons will look like on it ? 🙂
If it is not the final PR, can you clean it and keep only what is needed ? 🙂

EDIT: I see that it was already cherry-picked in the other PR, so don't forget to make the changes on it then
For me the new icons could be sent independently but as you prefer 🙂

addons/web/static/lib/odoo_ui_icons/style.css
Comment on lines +95 to +96
.oi-move-up:before { content: '\e84c'; }
.oi-move-down:before { content: '\e84d'; }
Copy link

@sobo-odoo sobo-odoo Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a fan of changing send-back/bring-front for this, you should at least keep the front/back notion => when I read up/down I am expecting arrows or to move vertically, but here they are really used to say in front of/behind so you should keep that 🙂

Could you change it to oi-move-front/back (oi-move-behind could also be a possibility) or oi-bring-front/oi-send-back ? 🙂

addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js

const buttons = [];
this.overlayTarget = target;
if (!this.config.isMobileView(this.overlayTarget)) {
Copy link

@sobo-odoo sobo-odoo Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commit message:

  • Based on my other comments, you should therefore rename the commit as change the grid mode "bring front/send back" icons 🙂
  • new icons Odoo UI icons -> icons two times
  • also mention the website task it is linked to -> task-4789254 😉

addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js Outdated
Comment on lines -103 to -108
class: "o_send_back oi",
class: "oi-move-down oi",
title: _t("Send to back"),
handler: this.sendGridItemToBack.bind(this),
},
{
class: "o_bring_front oi",
Copy link

@sobo-odoo sobo-odoo Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of removing the old classes, I would have only removed the CSS associated to them and added your new classes, as they were used to target these specific grid buttons easily in JS too (and they matched the button handlers) 🤔 (its like the clone button: it uses fa fa-clone but still has oe_snippet_clone to identify it 👍 )

If you rename them as asked in my other comment, I guess it could be fine, but I still think they should be easily "identifiable" so let's keep the old classes 🙂

@sobo-odoo sobo-odoo mentioned this pull request Nov 4, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sobo-odoo sobo-odoo sobo-odoo requested changes

@mano-odoo mano-odoo mano-odoo approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@ldau-odoo @robodoo @sobo-odoo @mano-odoo @gppa-odoo