Skip to content

Instantly share code, notes, and snippets.

@BanderMansourH

BanderMansourH/Odoo Kanban Ribbon.md

Forked from akhdaniel/Odoo Kanban Ribbon.md
Created June 4, 2023 07:36
Show Gist options
  • Save BanderMansourH/f1839df42842f6e64a7b49cc7ac9b2b0 to your computer and use it in GitHub Desktop.
Save BanderMansourH/f1839df42842f6e64a7b49cc7ac9b2b0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    Cara membuat kanban yang ada ribbon nya seperti ini, misalnya berdasarkan state suatu record:

    ![telegram-cloud-photo-size-5-6057744710799306077-y](https://user-images.githubusercontent.com/995563/140010652-d77449d0-3faa-4412-9b17-3eb6aae84074.jpg)


  2. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ![telegram-cloud-photo-size-5-6057744710799306077-y](https://user-images.githubusercontent.com/995563/140010652-d77449d0-3faa-4412-9b17-3eb6aae84074.jpg)


    1 Siapin File CSS, static/src/scc/ribbon.css
  3. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@


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

  4. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -160,8 +160,8 @@

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

  5. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -168,6 +168,8 @@
    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.

    ```xml
    <record id="view_vit_topup_gas_fee_kanban" model="ir.ui.view" >
    <field name="name">vit_topup_gas_fee</field>
  6. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -149,7 +149,6 @@
    <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"/>
    <!-- <script type="text/javascript" src="/adyen_platforms/static/src/js/adyen_transactions.js"></script> -->
    </xpath>
    </template>
    </odoo>
  7. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 175 additions and 0 deletions.
    175 changes: 175 additions & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,189 @@
    1 Siapin File CSS, static/src/scc/ribbon.css
    ===================

    ```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
    <?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"/>
    <!-- <script type="text/javascript" src="/adyen_platforms/static/src/js/adyen_transactions.js"></script> -->
    </xpath>
    </template>
    </odoo>

    ```

    3 Import via __manifest__.xml
    ===================

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

    4 Inherit kanban misalnya
    ===================

    ```xml
    <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>
    ```
  8. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    1. Siapin File CSS, static/src/scc/ribbon.css
    1 Siapin File CSS, static/src/scc/ribbon.css
    ===================

    2. Import via view/asset.xml
    2 Import via view/asset.xml
    ===================

    3. Import via __manifest__.xml
    3 Import via __manifest__.xml
    ===================


    4. Inherit kanban misalnya
    4 Inherit kanban misalnya
    ===================


  9. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 9 additions and 4 deletions.
    13 changes: 9 additions & 4 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,14 @@
    *1 Siapin File CSS, static/src/scc/ribbon.css
    1. Siapin File CSS, static/src/scc/ribbon.css
    ===================

    *2. Import via view/asset.xml
    2. Import via view/asset.xml
    ===================

    *3. Import via __manifest__.xml
    3. Import via __manifest__.xml
    ===================

    *4. Inherit kanban misalnya

    4. Inherit kanban misalnya
    ===================


  10. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    ** 1. Siapin File CSS, static/src/scc/ribbon.css
    *1 Siapin File CSS, static/src/scc/ribbon.css

    **2. Import via view/asset.xml
    *2. Import via view/asset.xml

    **3. Import via __manifest__.xml
    *3. Import via __manifest__.xml

    **4. Inherit kanban misalnya
    *4. Inherit kanban misalnya


  11. @akhdaniel akhdaniel revised this gist Nov 3, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    **1. Siapin File CSS, static/src/scc/ribbon.css
    ** 1. Siapin File CSS, static/src/scc/ribbon.css

    **2. Import via view/asset.xml

  12. @akhdaniel akhdaniel created this gist Nov 3, 2021.
    9 changes: 9 additions & 0 deletions Odoo Kanban Ribbon.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    **1. Siapin File CSS, static/src/scc/ribbon.css

    **2. Import via view/asset.xml

    **3. Import via __manifest__.xml

    **4. Inherit kanban misalnya