├── .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 click here 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 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /registration.php: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /view/adminhtml/ui_component/sales_order_grid.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | select 12 | 13 | select 14 | 15 | 16 | 17 | 18 | 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 | 6 |
7 | --------------------------------------------------------------------------------