From 6ec372f4675f383bcfa3ed6df606bdbc404f9a2a Mon Sep 17 00:00:00 2001 From: LauraCForgeFlow Date: Thu, 15 Jan 2026 10:20:51 +0100 Subject: [PATCH] [ADD] web_tree_column_keyboard_resize --- web_tree_column_keyboard_resize/README.rst | 92 ++++ web_tree_column_keyboard_resize/__init__.py | 2 + .../__manifest__.py | 18 + .../pyproject.toml | 3 + .../readme/CONTRIBUTORS.md | 1 + .../readme/DESCRIPTION.md | 14 + .../static/description/index.html | 438 ++++++++++++++++++ .../static/src/js/list_renderer.esm.js | 42 ++ 8 files changed, 610 insertions(+) create mode 100644 web_tree_column_keyboard_resize/README.rst create mode 100644 web_tree_column_keyboard_resize/__init__.py create mode 100644 web_tree_column_keyboard_resize/__manifest__.py create mode 100644 web_tree_column_keyboard_resize/pyproject.toml create mode 100644 web_tree_column_keyboard_resize/readme/CONTRIBUTORS.md create mode 100644 web_tree_column_keyboard_resize/readme/DESCRIPTION.md create mode 100644 web_tree_column_keyboard_resize/static/description/index.html create mode 100644 web_tree_column_keyboard_resize/static/src/js/list_renderer.esm.js diff --git a/web_tree_column_keyboard_resize/README.rst b/web_tree_column_keyboard_resize/README.rst new file mode 100644 index 000000000000..f4c4deb0232f --- /dev/null +++ b/web_tree_column_keyboard_resize/README.rst @@ -0,0 +1,92 @@ +=============================== +Web Tree Column Keyboard Resize +=============================== + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:c7ae568a008d24897c0d9ddee67a3e09f3b334e272047e54ef89b65ae35b43a1 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/18.0/web_tree_column_keyboard_resize + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-18-0/web-18-0-web_tree_column_keyboard_resize + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=18.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module creates some keyboard shortcuts to allow resizing tree view +columns when having some cell in the column focused (in edit mode for +that cell / row). This can improve efficiency, since users don't need to +reach for the mouse when wanting to resize columns. + +The following shortcuts are added: + +- By default, the width is adjusted in steps of 20 pixels per key + press. +- ``Shift + Down Arrow``: Decrease the width of the focused column. +- ``Shift + Up Arrow``: Increase the width of the focused column. + +The changed width of columns is reset back to the original once focusing +out of the current row, since this functionality is designed for +temporary visibility enhancement during editing sessions and not for +permanent layout changes. Users can use the standard mouse drag resizing +for permanent width adjustments. + +**Table of contents** + +.. contents:: + :local: + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +------- + +* ForgeFlow + +Contributors +------------ + +- Laura Cazorla laura.cazorla@forgeflow.com + +Maintainers +----------- + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_tree_column_keyboard_resize/__init__.py b/web_tree_column_keyboard_resize/__init__.py new file mode 100644 index 000000000000..cd4049c1352a --- /dev/null +++ b/web_tree_column_keyboard_resize/__init__.py @@ -0,0 +1,2 @@ +# Copyright 2026 ForgeFlow (https://www.forgeflow.com) +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl) diff --git a/web_tree_column_keyboard_resize/__manifest__.py b/web_tree_column_keyboard_resize/__manifest__.py new file mode 100644 index 000000000000..e0a5e4f0f175 --- /dev/null +++ b/web_tree_column_keyboard_resize/__manifest__.py @@ -0,0 +1,18 @@ +# Copyright 2026 ForgeFlow (https://www.forgeflow.com) +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl) + +{ + "name": "Web Tree Column Keyboard Resize", + "summary": "Allow resizing tree view columns using keyboard shortcuts", + "version": "18.0.1.0.0", + "category": "Extra Tools", + "website": "https://github.com/OCA/web", + "author": "ForgeFlow, Odoo Community Association (OCA)", + "license": "AGPL-3", + "depends": ["web"], + "assets": { + "web.assets_backend": [ + "web_tree_column_keyboard_resize/static/src/js/list_renderer.esm.js", + ], + }, +} diff --git a/web_tree_column_keyboard_resize/pyproject.toml b/web_tree_column_keyboard_resize/pyproject.toml new file mode 100644 index 000000000000..4231d0cccb3d --- /dev/null +++ b/web_tree_column_keyboard_resize/pyproject.toml @@ -0,0 +1,3 @@ +[build-system] +requires = ["whool"] +build-backend = "whool.buildapi" diff --git a/web_tree_column_keyboard_resize/readme/CONTRIBUTORS.md b/web_tree_column_keyboard_resize/readme/CONTRIBUTORS.md new file mode 100644 index 000000000000..8510a90fdd21 --- /dev/null +++ b/web_tree_column_keyboard_resize/readme/CONTRIBUTORS.md @@ -0,0 +1 @@ +- Laura Cazorla diff --git a/web_tree_column_keyboard_resize/readme/DESCRIPTION.md b/web_tree_column_keyboard_resize/readme/DESCRIPTION.md new file mode 100644 index 000000000000..5272a92df78d --- /dev/null +++ b/web_tree_column_keyboard_resize/readme/DESCRIPTION.md @@ -0,0 +1,14 @@ +This module creates some keyboard shortcuts to allow resizing tree view columns +when having some cell in the column focused (in edit mode for that cell / row). +This can improve efficiency, since users don't need to reach for the mouse when +wanting to resize columns. + +The following shortcuts are added: +- By default, the width is adjusted in steps of 20 pixels per key press. +- `Shift + Down Arrow`: Decrease the width of the focused column. +- `Shift + Up Arrow`: Increase the width of the focused column. + +The changed width of columns is reset back to the original once focusing out of +the current row, since this functionality is designed for temporary visibility +enhancement during editing sessions and not for permanent layout changes. Users +can use the standard mouse drag resizing for permanent width adjustments. diff --git a/web_tree_column_keyboard_resize/static/description/index.html b/web_tree_column_keyboard_resize/static/description/index.html new file mode 100644 index 000000000000..d4a8344ee256 --- /dev/null +++ b/web_tree_column_keyboard_resize/static/description/index.html @@ -0,0 +1,438 @@ + + + + + +Web Tree Column Keyboard Resize + + + +
+

Web Tree Column Keyboard Resize

+ + +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

+

This module creates some keyboard shortcuts to allow resizing tree view +columns when having some cell in the column focused (in edit mode for +that cell / row). This can improve efficiency, since users don’t need to +reach for the mouse when wanting to resize columns.

+

The following shortcuts are added:

+
    +
  • By default, the width is adjusted in steps of 20 pixels per key +press.
    • +
  • Shift + Down Arrow: Decrease the width of the focused column.
    • +
  • Shift + Up Arrow: Increase the width of the focused column.
    • +
+

The changed width of columns is reset back to the original once focusing +out of the current row, since this functionality is designed for +temporary visibility enhancement during editing sessions and not for +permanent layout changes. Users can use the standard mouse drag resizing +for permanent width adjustments.

+

Table of contents

+ +
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • ForgeFlow
    • +
+
+ +
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_tree_column_keyboard_resize/static/src/js/list_renderer.esm.js b/web_tree_column_keyboard_resize/static/src/js/list_renderer.esm.js new file mode 100644 index 000000000000..da520220e7a5 --- /dev/null +++ b/web_tree_column_keyboard_resize/static/src/js/list_renderer.esm.js @@ -0,0 +1,42 @@ +import {ListRenderer} from "@web/views/list/list_renderer"; +import {patch} from "@web/core/utils/patch"; + +const RESIZE_PIXEL_STEP = 20; + +patch(ListRenderer.prototype, { + // Handle Shift+Arrow keyboard shortcuts for column resizing + onCellKeydownEditMode(hotkey, cell, group, record) { + if (hotkey === "shift+arrowup" || hotkey === "shift+arrowdown") { + const column = this._getColumnFromCell(cell); + if (column?.name && hotkey === "shift+arrowup") { + this._expandColumnToContent(column.name, true); + return true; + } else if (column?.name && hotkey === "shift+arrowdown") { + this._expandColumnToContent(column.name, false); + return true; + } + } + return super.onCellKeydownEditMode(hotkey, cell, group, record); + }, + // Get column definition from table cell index + _getColumnFromCell(cell) { + if (!cell || cell.cellIndex === null) { + return null; + } + return this.columns[cell.cellIndex]; + }, + // Resize column: expand=true increases width, expand=false decreases width + _expandColumnToContent(columnName, expand) { + requestAnimationFrame(() => { + const table = this.tableRef.el; + if (!table) return; + // Find the column header by data-name attribute + const th = table.querySelector(`th[data-name="${columnName}"]`); + if (!th) return; + // Calculate new width and apply it to the header + const delta = expand ? RESIZE_PIXEL_STEP : -RESIZE_PIXEL_STEP; + const width = `${Math.max(th.scrollWidth + delta)}px`; + th.style.width = width; + }); + }, +});