[IMP] web_filter_header_button: put buttons in their own row

When there are too many buttons, they won't fit in the window and they
will overlap with other ui elemnets. We can prevent it putting them in
their own row.

TT49431

web_filter_header_button/README.rst

@@ -7,7 +7,7 @@ Filter Button
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:9da8b47931a94c1b0a4f43e7a450e88a87095f7d1d6aa5fdf36fc59efbb75fe4
+   !! source digest: sha256:e9f3e0db2c52f42eb3e177ee261caec02d793b0102a7d5159c4c163381fd13b4
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
@@ -95,6 +95,10 @@ Known issues / Roadmap
    limiting in some cases. Keep it in mind or use
    ``base_view_inheritance_extension`` if you want to use proper context
    inheritance.
+-  Another nice to have would be to be able to hide the filters in the
+   filter list to be able to show them just in the header, although
+   there's not a straigh forward way to do it and it could lead to side
+   effects.
 
 Bug Tracker
 ===========

web_filter_header_button/readme/ROADMAP.md

@@ -1,2 +1,5 @@
 - Group filters by kind
 - As we use the `context` attribute, the inheritance could be limiting in some cases. Keep it in mind or use `base_view_inheritance_extension` if you want to use proper context inheritance.
+- Another nice to have would be to be able to hide the filters in the filter list to be
+  able to show them just in the header, although there's not a straigh forward way to
+  do it and it could lead to side effects.

web_filter_header_button/static/description/index.html

@@ -367,7 +367,7 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:9da8b47931a94c1b0a4f43e7a450e88a87095f7d1d6aa5fdf36fc59efbb75fe4
+!! source digest: sha256:e9f3e0db2c52f42eb3e177ee261caec02d793b0102a7d5159c4c163381fd13b4
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/15.0/web_filter_header_button"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_filter_header_button"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=15.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module allows to add some selected filters as buttons in the header
@@ -436,6 +436,10 @@ following the <em>Configure</em> section.</p>
 limiting in some cases. Keep it in mind or use
 <tt class="docutils literal">base_view_inheritance_extension</tt> if you want to use proper context
 inheritance.</li>
+<li>Another nice to have would be to be able to hide the filters in the
+filter list to be able to show them just in the header, although
+there’s not a straigh forward way to do it and it could lead to side
+effects.</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">

web_filter_header_button/static/src/control_panel/control_panel.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates>
     <t t-inherit="web.Legacy.ControlPanel" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('o_cp_buttons')]" position="after">
+        <xpath expr="//div[hasclass('o_cp_bottom')]" position="after">
             <t t-if="env.view.type !== 'form'">
                 <FilterButton />
             </t>

web_filter_header_button/static/src/filter_button/filter_button.xml

@@ -3,36 +3,38 @@
 
     <t t-name="filter_button.FilterButton" owl="1">
         <t t-set="filters" t-value="shownFilters(model.get('filters'))" />
-        <div class="btn-group" t-if="filters">
-            <button
-                t-if="filters &amp;&amp; filters.length"
-                t-attf-class="btn btn-outline-primary"
-                t-on-click.stop="onClickReset()"
-            >
-                <i class="fa fa-times" />
-            </button>
-            <!-- Directly get the model filters so we can react to changes -->
-            <t t-foreach="filters" t-as="filter" t-key="filter.id">
-                <t t-set="options" t-value="filter.context.shown_in_panel" />
-                <t t-set="filter_mapping" t-value="mapFilterType(filter)" />
-                <t t-set="color" t-value="filter_mapping.color || 'primary'" />
-                <!-- We can set an empty string on the optional name to show only the icon -->
-                <t
-                    t-set="name"
-                    t-value="options.name !== undefined ? options.name : filter.description"
-                />
+        <div t-if="filters" class="o_cp_bottom_filter_buttons">
+            <div class="btn-group">
                 <button
-                    t-attf-class="btn {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
-                    t-on-click.stop="onToggleFilter(filter)"
-                    t-att-data-hotkey="options.hotkey"
+                    t-if="filters &amp;&amp; filters.length"
+                    t-attf-class="btn btn-outline-primary"
+                    t-on-click.stop="onClickReset()"
                 >
-                    <i
-                        t-if="options.icon"
-                        t-attf-class="fa {{options.icon}} {{name !== '' ? 'mr-1' : ''}}"
-                    />
-                    <t t-esc="name" />
+                    <i class="fa fa-times" />
                 </button>
-            </t>
+                <!-- Directly get the model filters so we can react to changes -->
+                <t t-foreach="filters" t-as="filter" t-key="filter.id">
+                    <t t-set="options" t-value="filter.context.shown_in_panel" />
+                    <t t-set="filter_mapping" t-value="mapFilterType(filter)" />
+                    <t t-set="color" t-value="filter_mapping.color || 'primary'" />
+                    <!-- We can set an empty string on the optional name to show only the icon -->
+                    <t
+                        t-set="name"
+                        t-value="options.name !== undefined ? options.name : filter.description"
+                    />
+                    <button
+                        t-attf-class="btn {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
+                        t-on-click.stop="onToggleFilter(filter)"
+                        t-att-data-hotkey="options.hotkey"
+                    >
+                        <i
+                            t-if="options.icon"
+                            t-attf-class="fa {{options.icon}} {{name !== '' ? 'mr-1' : ''}}"
+                        />
+                        <t t-esc="name" />
+                    </button>
+                </t>
+            </div>
         </div>
     </t>
 </templates>