Changing Order Status drop down box colors

[Kimosabe]

Hi everyone!

I was trying to change the background colors for the order status dropdown box in the admin area, but i could not make it.

(Attached an image to show what i mean.)

I think it would be really helpful for the staff managing orders to see colored options in the dropdown (ideally, same as the statuses colors)


Any ideas?
 

Edited April 29, 2021 by Kimosabe (see edit history)

[Kimosabe]

Shamless bump

[DelosTR]

Hi Kimosabe, I reply to this topic because I found a way (almost, 2/3)

Because I found your topic, maybe others will too, and then if we could have help to make it better.

My version: 1.7.7.8

 

So first for the order list view:

src\PrestaShopBundle\Resources\views\Admin\Common\Grid\Columns\Content\choice.html.twig

Here is the part of the code: (it's a raw version, I use a loop to make conditions in, if statut id = x background color = x)

So you have to edit with your own ids and colors.

{#** MOD ajout de cette ligne pour le hover  *#}      
<style> .statuhover:hover {background-color: #dddddd !important;} </style>     
      
      {% for name,value in choices if value != selectedChoice %}
 
 
{#** MOD ajout de ce block de if pour bg color  *#}
    
{% set color = 'white' %}
{% set colort = 'black' %}    
{% if value in ['4', '5', '22', '23', '24', '32'] %} {% set color="#01b887" %}
{% elseif value in ['3', '9'] %} {% set color="#3498D8" %} {% set colort="white" %}
{% elseif value in ['31'] %} {% set color="#8f79ff" %} {% set colort="black" %}
{% elseif value in ['6'] %} {% set color="#dddddd" %} {% set colort="black" %}
{% elseif value in ['8'] %} {% set color="#E74C3C" %} {% set colort="white" %}
{% elseif value in ['2', '21'] %} {% set color="#ff6935" %} {% set colort="black" %}
{% elseif value in ['25', '26', '27'] %} {% set color="#FF8C00" %} {% set colort="black" %}
{% elseif value in ['7', '18', '29'] %} {% set color="#ffa5aa" %} {% set colort="black" %}
{% elseif value in ['1', '10'] %} {% set color="#ffc535" %} {% set colort="black" %}
{% elseif value in ['30'] %} {% set color="#FFE035" %} {% set colort="black" %}
{% else %} {% set color="black" %} {% set colort="white" %}
{% endif %}
      
      
        <button class="js-dropdown-item dropdown-item statuhover" style="background-color: {{ color }}; font-weight: 600; color: {{ colort }};" data-value="{{ value }}">{{ name }}</button> {#** MOD ajout de style background et font et color  *#}
        
      {% endfor %}

 

Next the order detail view:

src\Core\Form\ChoiceProvider\OrderStateByIdChoiceProvider.php

This one is a better version as I could use variables and just add an attr:
 

    public function getChoicesAttributes()
    {
        $orderStates = $this->orderStateDataProvider->getOrderStates($this->languageId);
        $attrs = [];

        foreach ($orderStates as $orderState) {
            $orderState['name'] .= $orderState['deleted'] == 1 ? ' ' . $this->translator->trans('(deleted)', [], 'Admin.Global') : '';
            $attrs[$orderState['name']]['data-background-color'] = $orderState['color'];
            $attrs[$orderState['name']]['data-is-bright'] = $this->colorBrightnessCalculator->isBright($orderState['color']);
            
// MOD ajout de ces 2 lignes pour bgcolor status order detail
            if ($attrs[$orderState['name']]['data-is-bright'] == 0) { $bright = "white";} else { $bright = "black"; }
            $attrs[$orderState['name']]['style'] = "background-color:" . $orderState['color'] . "!important; color:" . $bright . "; font-weight: 600;";
            
        }

        return $attrs;
    }

 

The "// MOD" are my edits. Of course clean the cache.

And then the last view is the multiple choices in the orders list, I tried for days, I was so close, I could find status IDs, I could change the background-color in 3 different files!

But it's not in a loop, so the last id win.. I could make a loop but outside, not inside the select.

I give up here, if someone want to try, here are the 3 files where it happens (maybe there is another one)

src\PrestaShopBundle\Resources\views\Admin\Sell\Order\Order\Blocks\change_orders_status_modal.html.twig

src\PrestaShopBundle\Form\Admin\Sell\Order\ChangeOrdersStatusType.php

vendor\symfony\symfony\src\Symfony\Component\Form\Extension\Core\Type\ChoiceType.php