Add colurs to statusbar in odoo10

问题

Need to add colour in statusbar in odoo10 which available openerp versions eg: <field name = 'state' widget=statusbar clickabe= 'True' statubar_colors='{"new": "blue"}'>

How add colours in statusbar in odoo10

Need different color for different states in status bar For eg: Blue color for draft,green for progress, red for cancel

回答1:

There is two solution for your requirement:

If you need this behavior for only one Form view, Is simple as this:

just add style tag to beat the css selector generated by Odoo

        <style>
            .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
               background: yellow;
            }
            .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after {
               border-left-color: yellow;
            }
        </style>
        ...
        ...
        <field name ="state" widget="statusbar">

Here I used the same css selector because it's loaded after Odoo selector it is the one used, notice that my status bare button have .disabled class because it's readonly I think you have to change that clickabe= 'True' means it's not readonly.

if you want to have this for all your model here you need to use css file and add it to assets_backend template, make sure that your selector beat Odoo selector.

   <template id="assets_backend" name="backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/your_addon_name/static/src/css/your_css_file_name.css"/>
        </xpath>
    </template>

Now I don't how you want to change the color exactly Here, you need to deal with CSS to select the right element, for example if you want to make the status bar color blue only when the "new" value is selected, lucky for you Odoo show the value selected in attribute data-value that doesn't change by translation.

   .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
        background: blue;
    }
    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
       border-left-color: blue;
    }

This is in Odoo 11, when I inspected the element, this what I noticed:

status that is selected have class btn-primary the rest have btn-default
readonly have attribute disabled="disabled" and class disabled

And just to show that this work Here is a screen shot of what I have, You may have some side effect, it's when you open some record in popup and this form is still shown in the web page, this will effect the record shown too if it have a status bare widget, because the style tag will be removed when the form view is removed from the web page.

Edits:

Let say your selection has two values : new, valid

This will color new to blue if selected and valid to green fi selected

<style>

       .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
            background: blue;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
           border-left-color: blue;
        }

        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"] {
            background: blue;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"]::after {
           border-left-color: blue;
        }

        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"] {
            background: red;
        }
        .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"]::after {
           border-left-color: red;
        }
</style>
...
...
...
<field name="state" .....>

It's all about selecting the field by data-value Hope you get the idea. and this is easier than having to deal with javascript.