Odoo Kanban Ribbon

Odoo Kanban Ribbon.md

Cara membuat kanban yang ada ribbon nya seperti ini, misalnya berdasarkan state suatu record:

1 Siapin File CSS, static/src/scc/ribbon.css

.ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 200px;
  padding-top: 3px;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 400 10px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
  height: 15px;
}
.ribbon-open {
  background-color: #EC7063;
}
.ribbon-draft {
  background-color: #5DADE2;
}
.ribbon-done {
  background-color: #2ECC71;
}
.ribbon-closed {
  background-color: #95A5A6;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: 0px;
  right: 0px;
  margin-top: 0px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -20px;
  top: 20px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}

2 Import via view/asset.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_backend" inherit_id="web.assets_backend" name="Ribbon Backend Assets">
        <xpath expr="." position="inside">
            <link rel="stylesheet" type="text/scss" href="/<FOLDER_ADDON>/static/src/css/ribbon.css"/>
        </xpath>
    </template>
</odoo>

3 Import via manifest.xml

	"data": [
		...
		"view/assets.xml",
	],         

4 Inherit kanban misalnya

Warna Ribbon di kanban sesuai dengan state record ybs, boleh ganti sesuka hati berdasarkan apa, yg penting class warna nya sudah ada di file css. Contonya ini ada class ribbon-open, ribbon-draft, ribbon-closed, ribbon-done.

        <record id="view_vit_topup_gas_fee_kanban" model="ir.ui.view" >
            <field name="name">vit_topup_gas_fee</field>
            <field name="model">vit.topup_gas_fee</field>
            <field name="inherit_id" ref="vit_intr.view_vit_topup_gas_fee_kanban"/>
            <field name="arch" type="xml">

                <xpath expr="//kanban/templates/t/div" position="inside">
                    <div t-attf-class="ribbon ribbon-top-right" >
                        <span t-attf-class="ribbon-{{ record.state.raw_value }}">
                            <t t-esc="record.state.raw_value"/>
                        </span> 
                    </div>
                </xpath>             
                       
            </field>
        </record>