Skip to content
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.

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

[FIX] headers_overlay: unhide cols/rows icon position broken #3733

Conversation

dhrp-odoo
Copy link
Contributor

@dhrp-odoo dhrp-odoo commented Feb 20, 2024

Description:

  • Previously, there was an issue with the position of the unhide cols/rows icon, which has now been rectified. This fix involves setting the icon's position to absolute, applying bootstrap classes, and removing CSS from the ts file for o-unhide-buttons.

  • Furthermore, when the hiddenItems consist of the first or last column/row, bootstrap classes are now utilized to appropriately hide one of the icons.

Task: : 3696210

review checklist

  • feature is organized in plugin, or UI components
  • support of duplicate sheet (deep copy)
  • in model/core: ranges are Range object, and can be adapted (adaptRanges)
  • in model/UI: ranges are strings (to show the user)
  • undo-able commands (uses this.history.update)
  • multiuser-able commands (has inverse commands and transformations where needed)
  • new/updated/removed commands are documented
  • exportable in excel
  • translations (_t("qmsdf %s", abc))
  • unit tested
  • clean commented code
  • track breaking changes
  • doc is rebuild (npm run doc)
  • status is correct in Odoo

@robodoo
Copy link
Collaborator

robodoo commented Feb 20, 2024

@dhrp-odoo dhrp-odoo force-pushed the saas-17.1-fix-unhide-cols-rows-icon-position-broken-dhrp branch 2 times, most recently from aa6f1ee to 6a53cda Compare February 22, 2024 10:44
Copy link
Contributor

@anhe-odoo anhe-odoo left a comment

Choose a reason for hiding this comment

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

For what I've seen, you can fix this issue with the two changes I propose here. All other changes are useless, and the two proposed lines will make you able to remove the o-unhide-buttons CSS style in headers_overlay.ts in favor to the use of bootstrap :)

@@ -42,25 +42,22 @@
t-as="hiddenItem"
t-key="hiddenItem_index">
<div
class="o-unhide-buttons position-relative float-end"
class="o-unhide-buttons position-absolute float-end"
Copy link
Contributor

@anhe-odoo anhe-odoo Feb 29, 2024

Choose a reason for hiding this comment

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

You can change this line to class="position-absolute end-0 translate-middle-y"

@@ -101,25 +98,22 @@
t-as="hiddenItem"
t-key="hiddenItem_index">
<div
class="o-unhide-buttons position-relative h-100 d-flex align-items-center"
class="o-unhide-buttons position-absolute h-100 d-flex align-items-center"
Copy link
Contributor

@anhe-odoo anhe-odoo Feb 29, 2024

Choose a reason for hiding this comment

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

You can change this line to class="position-absolute h-100 d-flex align-items-center translate-middle-x gap-2"

@dhrp-odoo
Copy link
Contributor Author

For what I've seen, you can fix this issue with the two changes I propose here. All other changes are useless, and the two proposed lines will make you able to remove the o-unhide-buttons CSS style in headers_overlay.ts in favor to the use of bootstrap :)

Ahhh, It seems you haven't consider the scenario involving icons on the first or last row/column. Right?

Previously, there was an issue with the position of the unhide cols/rows
icon, which has now been rectified. This fix involves setting the icon's
position to absolute, applying bootstrap classes, and removing CSS from
the ts file for o-unhide-buttons.

Furthermore, when the hiddenItems consist of the first or last column/row,
bootstrap classes are now utilized to appropriately hide one of the icons.

Task ID: 3696210
@dhrp-odoo dhrp-odoo force-pushed the saas-17.1-fix-unhide-cols-rows-icon-position-broken-dhrp branch from 6a53cda to c69ae8f Compare February 29, 2024 09:10
@anhe-odoo
Copy link
Contributor

@dhrp-odoo : Yes, indeed, I haven't tried the external limits, nice catch :) LGTM now

</t>
<div
class="o-unhide rounded mb-1"
t-att-class="{'invisible': hiddenItem.includes(0)}"
Copy link
Collaborator

Choose a reason for hiding this comment

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

Any reason to change the t-if to invisible class ? Does it break the style with t-if ?
It's best to use t-if to avoid building the DOM (to make it invisible afterward)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Any reason to change the t-if to invisible class ? Does it break the style with t-if ?

Yes, there is. If the icon is positioned on the first or last row/column, it won't have one of the icons, leading to a misalignment.

I attempted to resolve this by adding some pixels, but then ADRM proposed using the invisible class instead. You can find the discussion here.

Copy link
Collaborator

@LucasLefevre LucasLefevre left a comment

Choose a reason for hiding this comment

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

robodoo r+

robodoo pushed a commit that referenced this pull request Mar 25, 2024
Previously, there was an issue with the position of the unhide cols/rows
icon, which has now been rectified. This fix involves setting the icon's
position to absolute, applying bootstrap classes, and removing CSS from
the ts file for o-unhide-buttons.

Furthermore, when the hiddenItems consist of the first or last column/row,
bootstrap classes are now utilized to appropriately hide one of the icons.

Task ID: 3696210

closes #3733

Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
@robodoo robodoo closed this Mar 25, 2024
@fw-bot fw-bot deleted the saas-17.1-fix-unhide-cols-rows-icon-position-broken-dhrp branch April 8, 2024 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants