From 7480a7ea2de6c7d0a7b8c0aafd763c76cddb39a0 Mon Sep 17 00:00:00 2001 From: bosd <5e2fd43-d292-4c90-9d1f-74ff3436329a@anonaddy.me> Date: Thu, 14 May 2026 18:16:25 +0200 Subject: [PATCH] [IMP] base_tier_validation: rewrite tier_review_widget collapse with native
MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the OWL-driven panel/card collapse machinery with the native HTML5 ``
`` / ```` element. The browser handles the toggle, the open state and keyboard accessibility natively; no JavaScript needed. Removed: - ``onToggleCollapse`` handler in ``tier_review_widget.esm.js`` (~13 lines walking ``ev.currentTarget.closest(".panel-heading")`` / ``.card-header`` and toggling ``style.display`` manually). - ``useState`` import and the ``this.state.collapse`` boolean. - The ```` shim and the explicit ``
`` wrapper. Added: - ``
`` with the same "Reviews" label. ``open`` attribute defaults to expanded, matching the previous behaviour. - SCSS to re-skin the disclosure marker: ``summary::before`` shows the FontAwesome caret (``\f0d7``) and rotates -90° when the ``
`` is closed. ``summary::-webkit-details-marker`` hidden so we don't render two triangles. Net effect: - ~30 lines of JS gone, ``useState`` import dropped. - ~12 lines of SCSS replaced (Bootstrap 3 ``panel-*`` rules dropped outright; the new selectors target a single ``.o_tier_review_*`` namespace). - Same UX (click ``Reviews`` heading to toggle). - Accessibility: native ``
`` is keyboard-operable (Space / Enter) out of the box; the previous ```` shim wasn't. --- .../tier_review_widget.esm.js | 25 +-- .../tier_review_widget.scss | 44 ++-- .../tier_review_widget/tier_review_widget.xml | 197 +++++++++--------- 3 files changed, 119 insertions(+), 147 deletions(-) diff --git a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.esm.js b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.esm.js index b9b87135..571b8e86 100644 --- a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.esm.js +++ b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.esm.js @@ -1,34 +1,11 @@ -import {Component, useState} from "@odoo/owl"; +import {Component} from "@odoo/owl"; import {registry} from "@web/core/registry"; -import {useService} from "@web/core/utils/hooks"; export class ReviewsTable extends Component { - setup() { - super.setup(); - this.orm = useService("orm"); - this.state = useState({ - collapse: false, - }); - } - _getReviewData() { const records = this.props.record.data.review_ids.records; return records.map((record) => record.data); } - - onToggleCollapse(ev) { - const panelHeading = ev.currentTarget.closest(".panel-heading"); - const collapseDiv = panelHeading.nextElementSibling.matches("div#collapse1") - ? panelHeading.nextElementSibling - : null; - if (!collapseDiv) return; - if (this.state.collapse) { - collapseDiv.style.display = "none"; - } else { - collapseDiv.style.display = "block"; - } - this.state.collapse = !this.state.collapse; - } } ReviewsTable.template = "base_tier_validation.Collapse"; diff --git a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.scss b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.scss index a42c166d..05b0d29e 100644 --- a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.scss +++ b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.scss @@ -3,39 +3,45 @@ ul.o_review { max-width: 800px; } -.panel-group { +.o_tier_review_widget { min-height: auto !important; margin-top: -6px !important; padding: 16px 16px 8px 16px !important; } -.panel-heading { - background-color: initial !important; -} - -.panel { - border: 0 !important; -} - -.panel-body { +.o_tier_review_body { overflow-y: hidden; overflow-x: auto; } -.panel-title > a, -.panel-title > a:active { +/* Style the native as a section heading. The browser + handles open/close state itself; we only re-skin the disclosure + triangle to match Odoo's FontAwesome caret look. */ +.o_tier_review_details > summary { + cursor: pointer; + list-style: none; + font-weight: bold; + padding: 8px 0; display: block; } -.panel-heading a:before { +.o_tier_review_details > summary::-webkit-details-marker { + display: none; +} + +.o_tier_review_details > summary::before { font-family: FontAwesome; content: "\f0d7"; - float: right; - transition: all 0.5s; + margin-right: 8px; + display: inline-block; + transition: transform 0.3s; +} + +.o_tier_review_details:not([open]) > summary::before { + transform: rotate(-90deg); } -.panel-heading.active a:before { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - transform: rotate(180deg); +.o_tier_review_widget .o_tier_review_seq { + width: 2rem; + white-space: nowrap; } diff --git a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.xml b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.xml index 92735f4d..e435b2c8 100644 --- a/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.xml +++ b/base_tier_validation/static/src/components/tier_review_widget/tier_review_widget.xml @@ -1,114 +1,103 @@ -
-
-
-

- - Reviews - -

-
-
-
- - - - - - - - - - - - - - +
+
+ Reviews +
+
SequenceRequested byDescriptionStatusTodo byDone byValidation DateComment
+ + + + + + + + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - -
#Requested byDescriptionStatusTodo byDone byValidation DateComment
- - + t-if="review.status == 'pending'" + t-set="status_class" + t-value="''" + /> + + +
+ + + + + + + + + + + + + - - - - - - - - - - - - - - - - -
-
+ + + + + + + + + + +
-
+