Use CSS to make priority labels stand out more

Questions
1

Hey guys, I am trying to use some CSS magic to make priority labels easier to differentiate. I would like to change the color and style of the little P0, P1, P2, P3 label on the task based on the priority (not linked to task color itself) to make high priority tasks easy to find while still having the option to color a task for a different purpose, concept:

image

image

image

For stuff like this I think I need the priority to be an attribute of the “task-priority” element of the task, which it now is not. The P0, P1, P2, P3 part of the element is now just text, that I cannot use for conditional formatting as far as I know.

Anyone with some more experience than me who can help me in the right direction?

Possibly I have to make a plugin that changes this part of TaskHelper.php:

    public function renderPriority($priority)
    {
        $html = '<span class="task-priority" title="'.t('Task priority').'">';
        $html .= '<span class="ui-helper-hidden-accessible">'.t('Task priority').' </span>';
        $html .= $this->helper->text->e($priority >= 0 ? 'P'.$priority : '-P'.abs($priority));
        $html .= '</span>';

        return $html;
    }
2

you could also do it with js and css. that would allow you to select an element, which contains, and set the css.

3

Ended up changing

$html = '<span class="task-priority" title="'.t('Task priority').'">';

to

$html = '<span class="task-priority-'.$priority.'" title="'.t('Task priority').'">';

and adding some CSS per prio:

.task-priority-0 {
    display: none;
}

.task-priority-1 {
    color: black;
    font-weight: bold;
    background: yellow;
    opacity: 1 !important;
    padding: 4px 2px;
    border-radius: 8px;
}

.task-priority-2 {
    color: white;
    font-weight: bold;
    background: orange;
    opacity: 1 !important;
    padding: 4px 2px;
    border-radius: 8px;
}

.task-priority-3 {
    color: white;
    font-weight: bold;
    background: red;
    opacity: 1 !important;
    padding: 4px 2px;
    border-radius: 8px;
}

This gets the results I want:

image
image1398×180 17.3 KB

Now I just have to figure out how to do this in the form of a plugin so it doesn’t break on updates etc.

4

I dont believe there is a simple mechanism to just override a helper, so you will need to register your custom helper, and then override the templates that call the previous one, where you need it to call your helper.

register a helper:
$this->helper->register('newTaskHelper', '\Kanboard\Plugin\MyPlugin\Helper\NewTaskHelper');

example, call your helper in a template:
<?= $this->helper->newTaskHelper->renderMyFunction($variable1, $variable2) ?>

Couple things to keep in mind. When you override a template, any updates to that template in Kanboard, will no longer be within your template, unless you keep it up to date. Multiple plugins that override the same template, will not happen, only one template will win the override contest.

Going back to my previous suggestion, eliminates both problems.