Reputation: 726
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
Upvotes: 3
Views: 1801
Reputation: 88
inherit_id="web.assets_backend"
add style as you need, you can also give style in css
Upvotes: 0
Reputation: 14721
There is two solution for your requirement:
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.
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:
btn-primary
the rest have btn-default
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.
Upvotes: 5
Reputation: 234
This feature was removed from Odoo a long time ago.
https://github.com/odoo/odoo/issues/5987
https://github.com/odoo/odoo/pull/11199
If you need to add this feature you will have to create a new widget for it.
Upvotes: 0