add color to task status

CHANGELOG.md

@@ -5,4 +5,5 @@ Branch master
 - add assignee in task list;
 - fix some translation; 
 - add a filtering by center on list;
+- add color in boxes for task statuses;
 

Resources/public/sass/_task-statuses.scss

@@ -0,0 +1,34 @@
+.task-status {
+    &.box {
+        font-variant: small-caps;
+        display: inline;
+        padding: .2em .6em .3em;
+        font-size: 0.88rem;
+        font-weight: bold;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: .25em;
+        color: white;
+    }
+    
+    &.type-task_default {
+        //  'new', 'in_progress', 'closed', 'canceled'
+            &.place-new {
+                background-color: var(--chill-yellow);
+            }
+
+            &.place-in_progress {
+                background-color: var(--chill-green);
+            }
+
+            &.place-closed {
+                background-color: var(--chill-blue);
+            }
+
+            &.place-canceled {
+                background-color: var(--chill-beige);
+            }
+    }
+}

Resources/public/sass/_task.scss

@@ -1,4 +1,5 @@
 @import '../../../../main/Resources/public/sass/custom/config/colors';
+@import "_task-statuses.scss";
 
 div#single_task_warningInterval {
     display: flex;

Resources/views/SingleTask/_list.html.twig

@@ -24,7 +24,7 @@
                             {% endif %}
                             <td>
                                 {% for place in workflow_marked_places(task) %}
-                                    <span class="">{{ place|trans }}</span>
+                                    <span class="task-status box type-{{ task.type }} place-{{ place }}">{{ place|trans }}</span>
                                 {% endfor %}
                                 
                                 {% if task.assignee is not null %}

Resources/views/SingleTask/show.html.twig

@@ -25,17 +25,12 @@
 {% block personcontent %}
 <h1 class="chill-red">{{ 'Task'|trans }}</h1>
 
-<h2>{{ task.title }}</h2>
+<h2>{{ task.title }} {% for place in workflow_marked_places(task) %}
+                <span class="task-status box type-{{ task.type }} place-{{ place }}">{{ place|trans }}</span>
+            {% endfor %}</h2>
 
     <dl class="chill_view_data">
 
-        <dt class="inline">{{ 'Task status'|trans }}</dt>
-        <dd>
-            {% for place in workflow_marked_places(task) %}
-                <span class="">{{ place|trans }}</span>
-            {% endfor %}
-        </dd>
-
         <dt class="inline">{{ 'Description'|trans }}</dt>
         <dd>
             {% if task.description is empty %}