在odoo10中为状态栏添加颜色

Question

需要在odoo10的状态栏中添加颜色，可用的openerp版本例如： <field name = 'state' widget=statusbar clickabe= 'True' statubar_colors='{"new": "blue"}'>

如何在odoo10的状态栏中添加颜色

状态栏的不同状态需要不同的颜色例如：蓝色代表草稿，绿色代表进度，红色代表取消

Answer 1

有两种解决方案可满足您的要求：

1. 如果您只需要一个表单视图的这种行为，就像这样简单：

只需添加style标签即可击败css selector生成的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">

在这里我使用了相同的，css selector因为它Odoo selector是在使用后加载的，请注意我的状态裸按钮有.disabled类，因为readonly我认为您必须更改这clickabe= 'True'意味着它不是只读的。

2. 如果你想在你的所有模型中使用css file它，你需要使用它并将其添加到 assets_backend 模板，确保你的选择器击败了 Odoo 选择器。

   <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>

现在我不知道你想如何准确地改变颜色 这里，你需要处理CSS选择正确的元素，例如如果你想让状态栏blue只有在"new"值为时才颜色selected，幸运的是你 Odoo 显示值selected在data-value不会因翻译而改变的属性中。

   .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;
    }

这是在 Odoo 11 中，当我检查元素时，我注意到：

• 选择的状态具有btn-primary其余的类btn-default
• 只读有属性disabled="disabled" 和类disabled

并且只是为了表明这项工作这是我所拥有的屏幕截图，您可能会有一些副作用，当您打开一些record时popup，这form仍然显示在网页中，如果有的话，这也会影响显示的记录一个status裸露widget的，因为style tag会被删除时，form视图删除从网页。

编辑：

假设您的选择有两个值：新的、有效的

如果选中，这将使新的颜色变为蓝色，并且对选择的绿色有效

<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" .....>

这一切都是关于通过data-value希望你明白的来选择领域。这比处理 javascript 更容易。