├── .github
    └── FUNDING.yml
├── README.md
├── composer.json
├── etc
    └── module.xml
├── registration.php
├── screenshot
    └── order-status.png
└── view
    └── adminhtml
        ├── layout
            └── sales_order_index.xml
        ├── ui_component
            └── sales_order_grid.xml
        └── web
            ├── css
                └── source
                │   ├── _colors.less
                │   └── _module.less
            ├── js
                └── grid
                │   └── columns
                │       └── select.js
            └── template
                └── ui
                    └── grid
                        └── cells
                            └── text.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [mateussantin]
2 | custom: ["https://nubank.com.br/pagar/1bxwx1/KrTCm3JrIA"]
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Magento 2 Admin Order Status Color
 2 | Changes the color of the order status column in the UI grid, based on the current status of the order. 
 3 | 
 4 | ## Spontaneous Contribution
 5 | If you want to send me a contribution of any amount so that I can continue developing and finding other solutions that make your life easier like this one, I will be very grateful, the link is next to the profile or you can <a href="https://nubank.com.br/pagar/1bxwx1/KrTCm3JrIA" target="_blank">click here</a> Thanks!
 6 | 
 7 | ## Introduction to installation:
 8 | 
 9 | ### How to install
10 | 
11 | ```
12 | composer require mateus/module-orderstatuscolor
13 | (alternative) composer require mateus/module-orderstatuscolor:dev-master
14 | php bin/magento module:enable Mateus_OrderStatusColor
15 | php bin/magento setup:upgrade
16 | ```
17 | 
18 | ## Screenshot
19 | ![ScreenShot](https://github.com/mateussantin/magento2-admin-order-status-color/blob/master/screenshot/order-status.png)
20 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "mateus/module-orderstatuscolor",
 3 |     "description": "Changes the color of the order status column in the UI grid, based on the current status of the order.",
 4 |     "license": "proprietary",
 5 |     "version": "2.0.0",
 6 |     "type": "magento2-module",
 7 |     "keywords": [
 8 |         "mateussantin",
 9 |         "magento2",
10 |         "Order",
11 |         "Order Status",
12 |         "Order Status Color"
13 |     ],
14 |     "authors": [
15 |         {
16 |             "name": "Mateus Santin",
17 |             "email": "mateussantin.jr@gmail.com"
18 |         }
19 |     ],
20 |     "homepage": "https://github.com/mateussantin/magento2-admin-order-status-color",
21 |     "require": {
22 |         "php": ">=7.4"
23 |     },
24 |     "minimum-stability": "stable",
25 |     "repositories": [
26 |         {
27 |             "type": "composer",
28 |             "url": "https://repo.magento.com/"
29 |         }
30 |     ],
31 |     "autoload": {
32 |         "psr-4": {
33 |             "Mateus\\OrderStatusColor\\": ""
34 |         },
35 |         "files": [
36 |             "registration.php"
37 |         ]
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 | * Copyright © Mateus. All rights reserved.
 5 | */
 6 | -->
 7 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 8 |     <module name="Mateus_OrderStatusColor" setup_version="1.0.0">
 9 |         <sequence>
10 |             <module name="Magento_Sales"/>
11 |             <module name="Magento_Ui"/>
12 |         </sequence>
13 |     </module>
14 | </config>
15 | 


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     /**
 3 |      * Copyright © Mateus. All rights reserved.
 4 |      * See COPYING.txt for license details.
 5 |      */
 6 |     \Magento\Framework\Component\ComponentRegistrar::register(
 7 |         \Magento\Framework\Component\ComponentRegistrar::MODULE,
 8 |         'Mateus_OrderStatusColor',
 9 |         __DIR__
10 |     );
11 | 


--------------------------------------------------------------------------------
/screenshot/order-status.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mateussantin/magento2-admin-order-status-color/64c049fa8fe01321571f885ad1b728d389957fb6/screenshot/order-status.png


--------------------------------------------------------------------------------
/view/adminhtml/layout/sales_order_index.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 | * Copyright © Mateus. All rights reserved.
 5 | */
 6 | -->
 7 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 8 |     <body>
 9 |         <referenceContainer name="content">
10 |             <uiComponent name="sales_order_grid"/>
11 |         </referenceContainer>
12 |     </body>
13 | </page>
14 | 


--------------------------------------------------------------------------------
/view/adminhtml/ui_component/sales_order_grid.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!--
 3 | /**
 4 | * Copyright © Mateus. All rights reserved.
 5 | */
 6 | -->
 7 | <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 8 |     <columns name="sales_order_columns">
 9 |         <column name="status" component="Mateus_OrderStatusColor/js/grid/columns/select">
10 |             <settings>
11 |                 <filter>select</filter>
12 |                 <options class="Magento\Sales\Ui\Component\Listing\Column\Status\Options"/>
13 |                 <dataType>select</dataType>
14 |                 <label translate="true">Status</label>
15 |             </settings>
16 |         </column>
17 |     </columns>
18 | </listing>
19 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/css/source/_colors.less:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright © Mateus. All rights reserved.
 3 |  */
 4 | 
 5 | /* Colors */
 6 | @bg-pending: #fdf0d5;
 7 | @color-pending: #6f4400;
 8 | 
 9 | @bg-processing: #E5F7FE;
10 | @color-processing: #006bb4;
11 | 
12 | @bg-complete: #e5efe5;
13 | @color-complete: #006400;
14 | 
15 | @bg-closed: #fae5e5;
16 | @color-closed: #e02b27;
17 | 
18 | @bg-default: transparent;
19 | @color-default: #303030;
20 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/css/source/_module.less:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright © Mateus. All rights reserved.
 3 |  */
 4 | 
 5 | @import '_colors.less';
 6 | 
 7 | .page-layout-admin-1column {
 8 |     .order-pending,
 9 |     .order-processing,
10 |     .order-complete,
11 |     .order-closed,
12 |     .order-default {
13 |         display: block;
14 |         font-weight: bold;
15 |         padding: 3px;
16 |         text-align: center;
17 |         text-transform: uppercase;
18 |         font-size: 13px;
19 |     }
20 | 
21 |     .order-pending {
22 |         background: @bg-pending;
23 |         border: 1px solid @color-pending;
24 |         color: @color-pending;
25 |     }
26 | 
27 |     .order-processing {
28 |         background: @bg-processing;
29 |         border: 1px solid @color-processing;
30 |         color: @color-processing;
31 |     }
32 | 
33 |     .order-complete {
34 |         background: @bg-complete;
35 |         border: 1px solid @color-complete;
36 |         color: @color-complete;
37 |     }
38 | 
39 |     .order-closed {
40 |         background: @bg-closed;
41 |         border: 1px solid @color-closed;
42 |         color: @color-closed;
43 |     }
44 | 
45 |     .order-default {
46 |         background: @bg-default;
47 |         border: 1px solid @color-default;
48 |         color: @color-default;
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/js/grid/columns/select.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright © Mateus. All rights reserved.
 3 |  */
 4 | 
 5 | define([
 6 |     'underscore',
 7 |     'Magento_Ui/js/grid/columns/select'
 8 | ], function (_, Column) {
 9 |     'use strict';
10 | 
11 |     return Column.extend({
12 |         defaults: {
13 |             bodyTmpl: 'Mateus_OrderStatusColor/ui/grid/cells/text'
14 |         },
15 |         getOrderStatusColor: function (row) {
16 |             if (row.status == 'pending') {
17 |                 return 'order-pending';
18 |             } else if (row.status == 'processing') {
19 |                 return 'order-processing';
20 |             } else if (row.status == 'complete') {
21 |                 return 'order-complete';
22 |             } else if (row.status == 'closed' || row.status == 'canceled') {
23 |                 return 'order-closed';
24 |             } else {
25 |                 return 'order-default';
26 |             }
27 |         }
28 |     });
29 | });
30 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/template/ui/grid/cells/text.html:
--------------------------------------------------------------------------------
1 | <!--
2 | /**
3 |  * Copyright © Mateus. All rights reserved.
4 |  */
5 | -->
6 | <div class="data-grid-cell-content" data-bind="attr: { class: $col.getOrderStatusColor($row()) }" text="$col.getLabel($row())"></div>
7 | 


--------------------------------------------------------------------------------