Merge pull request #1151 from tarteo/11-resize-columns

[11.0][ADD] web_tree_resize_column: Resize columns in tree views

web_tree_resize_column/README.rst

@@ -0,0 +1,89 @@
+==============
+Resize Columns
+==============
+
+.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! This file is generated by oca-gen-addon-readme !!
+   !! changes will be overwritten.                   !!
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+.. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
+    :target: https://odoo-community.org/page/development-status
+    :alt: Production/Stable
+.. |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/11.0/web_tree_resize_column
+    :alt: OCA/web
+.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
+    :target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_tree_resize_column
+    :alt: Translate me on Weblate
+.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
+    :target: https://runbot.odoo-community.org/runbot/162/11.0
+    :alt: Try me on Runbot
+
+|badge1| |badge2| |badge3| |badge4| |badge5| 
+
+This module adds the ability to resize columns in tree views.
+
+**Table of contents**
+
+.. contents::
+   :local:
+
+Usage
+=====
+
+To use this module, you need to:
+
+#. Go to any tree view;
+#. hover over the border of the column you want to resize;
+#. hold click and drag the column to the desired width.
+
+This also works for tree views that are nested in form views.
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
+In case of trouble, please check there if your issue has already been reported.
+If you spotted it first, help us smashing it by providing a detailed and welcomed
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_tree_resize_column%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+Do not contact contributors directly about support or help with technical issues.
+
+Credits
+=======
+
+Authors
+~~~~~~~
+
+* Onestein
+
+Contributors
+~~~~~~~~~~~~
+
+* Dennis Sluijk <d.sluijk@onestein.nl>
+
+Other credits
+~~~~~~~~~~~~~
+
+This module uses a jQuery plugin by Jones Vinoth Joseph <https://github.com/Jo-Geek/jQuery-ResizableColumns>.
+
+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 <https://github.com/OCA/web/tree/11.0/web_tree_resize_column>`_ project on GitHub.
+
+You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

web_tree_resize_column/__manifest__.py

@@ -0,0 +1,19 @@
+# Copyright 2019 Onestein
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+{
+    'name': 'Resize Columns',
+    'summary': 'Resize columns in tree views',
+    'category': 'Extra Tools',
+    'version': '11.0.1.0.0',
+    'development_status': 'Production/Stable',
+    'author': 'Onestein, Odoo Community Association (OCA)',
+    'license': 'AGPL-3',
+    'website': 'https://github.com/OCA/web',
+    'depends': [
+        'web'
+    ],
+    'data': [
+        'templates/assets.xml',
+    ],
+}

web_tree_resize_column/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Dennis Sluijk <d.sluijk@onestein.nl>

web_tree_resize_column/readme/CREDITS.rst

@@ -0,0 +1 @@
+This module uses a jQuery plugin by Jones Vinoth Joseph <https://github.com/Jo-Geek/jQuery-ResizableColumns>.

web_tree_resize_column/readme/DESCRIPTION.rst

@@ -0,0 +1 @@
+This module adds the ability to resize columns in tree views.

web_tree_resize_column/readme/USAGE.rst

@@ -0,0 +1,7 @@
+To use this module, you need to:
+
+#. Go to any tree view;
+#. hover over the border of the column you want to resize;
+#. hold click and drag the column to the desired width.
+
+This also works for tree views that are nested in form views.

web_tree_resize_column/static/lib/resizableColumns/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Jones Vinoth Joseph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web_tree_resize_column/static/lib/resizableColumns/jQuery.resizableColumns.js

@@ -0,0 +1,47 @@
+(function($) {
+    $.fn.resizableColumns = function() {
+      var isColResizing = false;
+      var resizingPosX = 0;
+      var _table = $(this);
+      var _thead = $(this).find('thead');
+
+      _thead.find('th').each(function() {
+        $(this).css('position', 'relative');
+        if ($(this).is(':not(:last-child)')) $(this).append("<div class='resizer' style='position:absolute;top:0px;right:-3px;bottom:0px;width:6px;z-index:999;background:transparent;cursor:col-resize'></div>");
+      })
+
+      $(document).mouseup(function(e) {
+        _thead.find('th').removeClass('resizing');
+        isColResizing = false;
+        e.stopPropagation();
+      })
+
+      _table.find('.resizer').mousedown(function(e) {
+        _thead.find('th').removeClass('resizing');
+        $(_thead).find('tr:first-child th:nth-child(' + ($(this).closest('th').index() + 1) + ') .resizer').closest('th').addClass('resizing');
+        resizingPosX = e.pageX;
+        isColResizing = true;
+        e.stopPropagation();
+      })
+
+      _table.mousemove(function(e) {
+        if (isColResizing) {
+
+          var _resizing = _thead.find('th.resizing .resizer');
+          if (_resizing.length == 1) {
+            var _nextRow = _thead.find('th.resizing + th');
+            var _pageX = e.pageX || 0;
+            var _widthDiff = _pageX - resizingPosX;
+            var _setWidth = _resizing.closest('th').innerWidth() + _widthDiff;
+            var _nextRowWidth = _nextRow.innerWidth() - _widthDiff;
+            if (resizingPosX != 0 && _widthDiff != 0 && _setWidth > 50 && _nextRowWidth > 50) {
+              _resizing.closest('th').innerWidth(_setWidth);
+              resizingPosX = e.pageX;
+              _nextRow.innerWidth(_nextRowWidth);
+            }
+          }
+        }
+      })
+    };
+  }
+(jQuery));

web_tree_resize_column/static/src/js/backend.js

@@ -0,0 +1,47 @@
+/* Copyright 2019 Onestein
+ * License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). */
+
+odoo.define('web_tree_resize_column.backend', function (require) {
+    "use strict";
+
+    var ListRenderer = require('web.ListRenderer');
+
+    ListRenderer.include({
+
+        /**
+         * @override
+         */
+        _renderView: function() {
+            // Preserve width of columns
+            var styles = [];
+            this.$el.find('thead th').each(function () {
+                styles.push($(this).attr('style'));
+            });
+
+            var res = this._super.apply(this, arguments);
+
+            // Initialize jQuery plugin
+            this.$el.find('table').resizableColumns();
+
+            // Restore width of columns
+            this.$el.find('thead th').each(function (index, th) {
+                $(th).attr('style', styles[index]);
+            });
+
+            return res;
+        },
+
+        /**
+         * Prevent sorting when the user is resizing a column.
+         *
+         * @override
+         */
+        _onSortColumn: function (event) {
+            if ($(event.target).is('.resizer')) {
+                return;
+            }
+
+            this._super.apply(this, arguments);
+        },
+    });
+});

web_tree_resize_column/templates/assets.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 Onestein
+     License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). -->
+
+<odoo>
+    <template id="assets_backend" inherit_id="web.assets_backend">
+        <xpath expr=".">
+            <script src="/web_tree_resize_column/static/lib/resizableColumns/jQuery.resizableColumns.js"></script>
+
+            <script src="/web_tree_resize_column/static/src/js/backend.js"></script>
+        </xpath>
+    </template>
+</odoo>