Mercedes Scenna

For one of our most complex projects we have developed a navigation that contains the smart buttons in the backend views. We did some improvements in general on the contacts and companies, the need came from having a better use of the space. A better look and performance were the base premises. 

The smart button navigation was entirely meant to improve the available space and layout. We decided to move the smart buttons to one line at the top of the view, instead of floating on the right since the more buttons you have, the more it pushes the rest of the content down. 

The tricky task about implementing a navigation like this for the backend was to have it working with the odoo structure. Working with the backend means that the xml code one sees in the templates is far from what will be then rendered in the frontend. Buttons will change according to the addons installed, the view the user is on, amount of orders, etc.

<div name="buttons" position="replace" />
<field name="image" position="before" >
      <div class="oe_button_nav oe_button_box flex menu" name="buttons"> </div>
Odoo CMS - a big picture
Odoo image and text block

What happens then if you have more buttons than what the window can fit? Based on this smart plugin js based called flexMenu we adapted it to work with the backend buttons. We specified the max amount of buttons that will fit on the view and when that number is exceeded, we add a dropdown in the shape of a button where all the exceeding buttons will be listed.

In turn, each viewport can fit different amount of buttons. That is achieved by css media queries:

* For screens over 1200px, we show 8 buttons of 12.5% of the view:
100% / 8 = 12.5%

* For screens under 992px, we show 7 buttons of 14.28% of the view: 
100% / 7 = 14.28%

* For screens under 768px, we show 5 buttons of 20% of the view:
    100% / 5 = 20%

On window resize, the javascript is triggered again and does the calculations and button rendering. 

Odoo image and text block
Odoo CMS - a big picture

Smart buttons naviagtion in action

About Mercedes Scenna

The sassy frontend skilled/ She does not only coding but also conceptualizing and drawing/ Traveling and photography is her passion.